Force-Directed Graph of Aggravating Relationships

force-directed graph visualization that simulates physical forces on particles. In our case we use links of type "aggravates" from the World Problems entry Discrimination against women.

Starting from the source entry, all child nodes are pushed away from it in all directions, and they then in turn repel their own child nodes, etc. This is best observed on page reload. Connected child nodes automatically get into equilibrium as far as possible from their parents. Nodes without any connection often fly off the viewport.

Nodes can also be dragged around using the mouse. Entry labels show on mouseover (if displayed permanently the network gets obscured by too too much text). The colours and sizes of the node circles are grouped by depth. All nodes are linked to their entry pages. In principle can any level be set and drawn. However, in the case of the Encyclopedia the number of links often increases too rapidly to generate a readable/meaningful or even just a visually pleasing image anywhere above 3 or 4 levels.

Force-directed graph is yet another elegant and useful specimen of the open-source visualization framework D3.js.

15 April, 2023

© 2021-2024 by
Official presentation at