Drawing Networks

A Visual Primer

A network drawing answers different questions depending on how it is arranged. Lines can make a path easy to trace, while a matrix can make a dense set of connections easier to compare. This primer rebuilds a 2015 workshop as working charts. Try the same reading task in each view, then use the playground to inspect a graph of your own.

Chapter 1

What a Network Is

Start by identifying the relationships you want to understand. The chapters compare common network structures and the layouts that help explain them.

Networks also vary along three axes worth naming before you draw one: directionality (do edges point, or merely connect?), multipart structure (is it one kind of node, or several — people and places, say?), and edge complexity (weight, parallel edges, even negative links). Every choice below is really a choice about how to make one of those legible.

Fig. 1.1In a hierarchy, every node below the root has one parent. A tree makes those levels and relationships easy to follow.

After Elijah Meeks's 2015 workshopCreating Effective Network Data Visualization with D3and theIntroduction to Networkstoy — bespoke D3 then, Semiotic now. Network data: the Les Misérables co-appearance graph (Knuth), the canonical force-layout test set.