Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick Network graph maps?
When the story is: org influence maps, dependency graphs, classroom social maps.
When should I avoid Network graph maps?
Skip it in cases like: a simple org chart or bullet list already carries the claim.
Who invented or popularised it?
Force-directed layouts; Cytoscape.js and friends on GitHub
What does it encode?
nodes and edges with force or hierarchical layout
Is it OK in ads?
Yes if one claim is visible at a glance in Meta, Google and retail print; otherwise link to a full figure.
Will a teacher accept it?
Yes for lab reports and poster boards if axes, units and a source line are present.
Network graph maps encodes values as nodes and edges with force or hierarchical layout. Force-directed layouts; Cytoscape.js and friends on GitHub.
In reports, ads and assignments it fits org influence maps, dependency graphs, classroom social maps. Skip it when a simple org chart or bullet list already carries the claim.
Software
- Cytoscape.js — Graph theory toolkit for the browser - MIT. · MIT · github.com/cytoscape/cytoscape.js
- force-graph — Force-directed canvases with little boilerplate. · MIT · github.com/vasturiano/force-graph
- d3-force — Physics used under many custom network views. · ISC · github.com/d3/d3-force
- Mermaid flowchart — Text graphs when interaction is unnecessary. · MIT · github.com/mermaid-js/mermaid
- Mind-map demo — Static radial relationship teaching marks. · CC0 examples · github.com/Tool-Lifes/viz-atlas
Exports
- Exports 1 — SVG
- Exports 2 — PDF
- Exports 3 — EMF/SVG into slides (no screenshots)
- Exports 4 — SVG for web, PDF for print
Accessibility
- Accessibility 1 — Never hue alone. Stack pattern, label and position.
- Accessibility 2 — 4.5:1 for text, 3:1 for large marks.
- Accessibility 3 — Short alt text on the chart; numbers also as an HTML table.
- Accessibility 4 — Motion only as emphasis. Honour prefers-reduced-motion.
Network graph maps: honour nodes and edges with force or hierarchical layout, and switch when a simple org chart or bullet list already carries the claim.