block by emeeks c408363501ccc4410dbd

Offset Edges 1

Full Screen

One of the best recent network data visualization examples is the New York Times method of representing how campaign staff were shared across the campaigns of 2016 presidential candidates.

One of the methods that makes it so engaging and readable is that it uses offset edges to represent the number of connections between nodes. This is fundamentally a different graphical method of representing weight in this case, but could also be used to show edges of different kinds (such as if you were connected to someone not only via Twitter but via Facebook and LinkedIn).

This is an initial stab at drawing offset edges. The hardest part is calculating the outside edges of each circle in such a way that links are evenly spaced even when connecting nodes of different sizes. If anyone wants to improve my calculations, please feel free to do so. Eventually I’ll turn this into a D3 component so that it’s trivial for anyone to make offset edges in any network data visualization.

Obviously the simple force-directed layout isn’t doing as good a job as the curated layout of the original, and there’s no edge-routing (such as the kind found in cola.js) implemented here.

index.html

clinton.csv