Recently I’ve been working on some prototypes at work, and we’ve been doing a lot of rapid iteration and one of the ideas called for a splatter plot which was assumed would be fixed, but I had an idea on handling placement purely by linear position, which would then map to some position on a ring (in a series of concentric rings) which, in turn, maps to an X, Y position. I experimentally determined the spacing, number of nodes and radius for the circles and coded up the prototype. The nodes were image based and I’d say maybe 40% of it was dynamic.

Since that project I’ve been curious if it would be possible to use SVG paths and dynamically scale them to a normalized size as well as clip them, so they align properly. In addition this will allow you to scale up the visualization to any size. The answer is yes, this works quite well.

The central class is the SplatterPlot class, to initialize it you simply reference some empty div on your page and tell it what it’s dimensions are and the maximum number of nodes.

var plot = new SplatterPlot('panel_one', 1000, 600, 200);

Now you just need to add nodes to your visualization. Here, I’m going to add a star. remember, you can just grab any old SVG path without editing, because it will be scaled for you.

nonSequentialDistributionMode : this boolean allows you to distribute nodes in a pseudo-random fashion across the full visualization. The plot uses and internal random number generator, so the output results are deterministic(repeatable).

seed : this number is the seed value for the internal random generator, and determines the overall layout of the graph.

expansionFactor : this determines the spacing between the layout rings. Initially set to 1.5

nodeY : determines the height of each node.

nodeX : determines the width of each node.

buffer : This determines the extra space between nodes on a given ring. Initially 0.