Implementing the Perforce Helix in D3.js

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.

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.

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.