block by emeeks bf12ea372b4e5202bb64

Networks - Edges 4

Full Screen

Edges Example 4 for How to Create Effective Network Data Visualization

A less common method for drawing directed edges is to draw the edge as a shape, in this case a triangle. To code this requires playing with JavaScript’s Math.atan2 function so that you can find the edges of the node perpendicular to the direction of the angle of the link to the other node.

One of the challenges in the use of abstract shapes is that your readers don’t have any experience with edges as triangles. On seeing this, https://twitter.com/zanstrong asked me if the edges were “comets” (meaning the fat end was the target) or “nails” (meaning the sharp end was the target). You don’t want your readers to be confused about fundamental characteristics of an already complicated data visualization like this, so make sure to include a legend that identifies anything that might be confusing, and especially something like this.

A benefit of triangular edges is that the shape encodes the stretching of nodes away from each other due to competing forces in the network, like pieces of taffy.

index.html

firm.csv