This page contains two visuals built with D3 v7: (1) a hierarchical Tree with different shapes/colors by layer, and (2) a Force-Directed Network (authors ↔ papers) with ≥6 nodes. Everything is original code and fully commented for screenshots.
Tip: On VizHub, paste this into index.html and press Save.
Explanation: We use d3.hierarchy +
d3.tree to compute node/link
positions. Shapes by depth: root =
rounded rectangle; internal = circle; leaves =
diamond. Colors by layer: depth-0 teal,
depth-1 blue, depth-2 light-blue. Hover
highlights links and shows tooltips.
Explanation: We use
d3.forceSimulation with
link/charge/center forces.
Shapes by type: Authors = circles;
Papers = squares. Hover shows details; drag to
reposition.
A tree represents strict hierarchy: every child has a single parent, no cycles. It’s ideal for organizational charts, file systems, biological taxonomy, or any data with one clear root and layered levels (e.g., “Programming → Families → Languages”). In contrast, a network supports many-to-many relationships and cycles. Networks are better when entities can connect in multiple ways, such as co-authorship, transportation routes, social friendships, citation graphs, or “authors ↔ papers”. These aren’t strictly hierarchical and would be misleading in a tree, so a network visualization is preferred.