{"id":2294,"date":"2019-07-27T13:01:34","date_gmt":"2019-07-27T12:01:34","guid":{"rendered":"https:\/\/chewett.co.uk\/blog\/?p=2294"},"modified":"2019-07-30T23:42:49","modified_gmt":"2019-07-30T22:42:49","slug":"implementing-the-perforce-helix-in-d3-js","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/2294\/implementing-the-perforce-helix-in-d3-js\/","title":{"rendered":"Implementing the Perforce Helix in D3.js"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

This blog post talks about the steps I took to implement the Perforce helix in D3.js.<\/p>\n\n\n\n\n\n\n\n

What is the Perforce Helix?<\/h2>\n\n\n\n

Perforce is a company that makes a version control system of the same name. One of their main products has been recently renamed Perforce Helix Core.<\/p>\n\n\n\n

Lately on their website they have created a new visualisation of a helix spinning around. Connections are made by close nodes on the helix and to the mouse.<\/p>\n\n\n\n

\"\"
Image of the Perforce homepage showing their helix<\/figcaption><\/figure>\n\n\n\n

In addition, if you press any mouse button the visualisation will spin faster.<\/p>\n\n\n\n

Since this is a pretty cool graphic I decided to spend some time visualising this in D3.js.<\/p>\n\n\n\n

Implementing a basic spinning helix<\/h2>\n\n\n\n

To implement a basic spinning helix you dont actually need to move the points in a 3d space. To achieve this effect you can use a cosine wave.<\/p>\n\n\n\n

For each dot the vertical position will be calculated by moving through the cosine waves period. This creates a slow movement at the top and bottom of the motion, and a quick movement through the middle.<\/p>\n\n\n\n

This is likely what the Perforce team have used to display their cosine wave, however I haven’t investigated their code.<\/p>\n\n\n\n

By varying the point along the cosine wave for each dot, you can create a helix effect of two spinning strands.<\/p>\n\n\n\n

Drawing the lines between points<\/h3>\n\n\n\n

Once the dots are calculated drawing the lines is simple. If two dots are within a certain distance then they should have a line.<\/p>\n\n\n\n

Depending on the closeness of the points, the lines should be more or less opaque.<\/p>\n\n\n\n

Currently I have implemented it so that every line will do a set of relatively intensive pow()<\/code> operations however this can be improved in the future. I talked about this before in checking if two points are within a certain distance<\/a>.<\/p>\n\n\n\n

If I go back to this I will implement much faster checks to speed up the computation.<\/p>\n\n\n\n

Showing off the actual helix<\/h2>\n\n\n\n

My attempt can be seen live on my website here<\/a>.<\/p>\n\n\n\n

\"\"
Image showing my implementation of the Perforce helix<\/figcaption><\/figure>\n\n\n\n

As stated before this isn’t the most efficient way to do it. If I go to work on this again I will implement the mouse events the Perforce team added. <\/p>\n\n\n\n

This was a pretty fun project that combined my enjoyment maths and D3.js to represent the data. I look forward to tweaking this in the future for more performance and additional features.<\/p>\n","protected":false},"excerpt":{"rendered":"

This blog post talks about the steps I took to implement the Perforce helix in D3.js.<\/p>\n","protected":false},"author":1,"featured_media":2301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Today I am blogging about my implementation of the #Perforce helix in #d3js","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[98],"tags":[229,291,219,72],"class_list":["post-2294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-d3-js","tag-d3-js-version-5","tag-data-visualisation","tag-javascript"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-B0","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":2294,"position":0},"title":"Drawing shapes in D3.js Version 5","author":"Chewett","date":"September 5, 2018","format":false,"excerpt":"This post goes over the various D3.js symbols typically used for scatter plots. D3.js built-in symbols D3.js has a number of built-in symbols which can be used for any data visualisation needs. The most common use of these are\u00a0for points on scatter plots and similar graphs. It is important to\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1700,"url":"https:\/\/chewett.co.uk\/blog\/1700\/colour-scales-in-d3-version-5\/","url_meta":{"origin":2294,"position":1},"title":"Colour scales in D3 Version 5","author":"Chewett","date":"November 3, 2018","format":false,"excerpt":"Over the past versions in D3.js there have been a number of changes to how you can get a colour scale to use with your charting. This blog post explores what is available and how to use it. This blog post applies to D3.js version 5. Colour scales in D3.js\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2021,"url":"https:\/\/chewett.co.uk\/blog\/2021\/how-to-load-multiple-d3-versions-at-once\/","url_meta":{"origin":2294,"position":2},"title":"How to load multiple D3 versions at once","author":"Chewett","date":"March 2, 2019","format":false,"excerpt":"Today I am writing a short tutorial on how you can load multiple D3.js versions at once. Why you might want to load multiple D3 versions? Most of the time you will be using the same version of D3 for all visualisations on the page. However there may be cases\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1463,"url":"https:\/\/chewett.co.uk\/blog\/1463\/summary-of-mike-bostock-on-d3-selections\/","url_meta":{"origin":2294,"position":3},"title":"Summary of Mike Bostock on D3 selections","author":"Chewett","date":"August 25, 2018","format":false,"excerpt":"Today I talk about and link to Mike Bostock's post on D3 selections, in this he talks about the basic unit of d3, the selection. Who is Mike Bostock? Mike Bostock is one of the key developers of d3.js and worked for a number of years creating visualizations with this\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2080,"url":"https:\/\/chewett.co.uk\/blog\/2080\/visualising-herd-immunity-with-vaccinations-using-d3-js\/","url_meta":{"origin":2294,"position":4},"title":"Visualising Herd Immunity with Vaccinations using D3.js","author":"Chewett","date":"March 16, 2019","format":false,"excerpt":"In this post I talk about my latest D3.js visualisation showing how herd immunity is affected by vaccination level. Ideas of Visualising Vaccination level and demonstrating Herd Immunity Originally theotheredmund of Reddit created a visualisation showing how herd immunity works at different visualisation levels. This has recently been popularised as\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/vaccination_library_d3.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/vaccination_library_d3.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/vaccination_library_d3.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/vaccination_library_d3.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1483,"url":"https:\/\/chewett.co.uk\/blog\/1483\/d3-js-version-5-scatterplot-with-shapes\/","url_meta":{"origin":2294,"position":5},"title":"D3.js version 5 Scatterplot with shapes","author":"Chewett","date":"September 15, 2018","format":false,"excerpt":"Today I write about\u00a0how you can create a scatter plot with different shapes in D3.js version 5. Aim of this tutorial This blog builds on Mike Bostocks\u00a0Scatterplot with shapes example and reworks it for D3.js version 5. This tutorial will focus on the changes needed to convert the original diagram\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=2294"}],"version-history":[{"count":2,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2294\/revisions"}],"predecessor-version":[{"id":2302,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2294\/revisions\/2302"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/2301"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=2294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=2294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=2294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}