Implementing the Perforce Helix in D3.js
![](https://i0.wp.com/chewett.co.uk/blog/wp-content/uploads/2019/07/d3_perforce_helix-1.jpg?resize=678%2C254&ssl=1)
This blog post talks about the steps I took to implement the Perforce helix in D3.js.
What is the Perforce Helix?
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.
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.
![](https://i0.wp.com/chewett.co.uk/blog/wp-content/uploads/2019/07/perforce_helix.png?resize=678%2C204&ssl=1)
In addition, if you press any mouse button the visualisation will spin faster.
Since this is a pretty cool graphic I decided to spend some time visualising this in D3.js.
Implementing a basic spinning helix
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.
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.
This is likely what the Perforce team have used to display their cosine wave, however I haven’t investigated their code.
By varying the point along the cosine wave for each dot, you can create a helix effect of two spinning strands.
Drawing the lines between points
Once the dots are calculated drawing the lines is simple. If two dots are within a certain distance then they should have a line.
Depending on the closeness of the points, the lines should be more or less opaque.
Currently I have implemented it so that every line will do a set of relatively intensive pow()
operations however this can be improved in the future. I talked about this before in checking if two points are within a certain distance.
If I go back to this I will implement much faster checks to speed up the computation.
Showing off the actual helix
My attempt can be seen live on my website here.
![](https://i0.wp.com/chewett.co.uk/blog/wp-content/uploads/2019/07/my_version_helix.png?resize=678%2C144&ssl=1)
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.
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.