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.
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.