Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick D3 custom craft?
When the story is: novel forms, research figures, bespoke explainers.
When should I avoid D3 custom craft?
Skip it in cases like: a Chart.js bar already answers the manager question.
Who invented or popularised it?
Mike Bostock D3 (2011) - still the craft backbone of custom viz
What does it encode?
data joins to SVG/Canvas marks with explicit scales
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.
D3 custom craft encodes values as data joins to SVG/Canvas marks with explicit scales. Mike Bostock D3 (2011) - still the craft backbone of custom viz.
In reports, ads and assignments it fits novel forms, research figures, bespoke explainers. Skip it when a Chart.js bar already answers the manager question.
Software
- D3 — Modules for scales, shapes, hierarchies and more - ISC. · ISC · github.com/d3/d3
- d3-shape — Generators for lines, areas, stacks and arcs. · ISC · github.com/d3/d3-shape
- d3-scale — Map data domains to visual ranges honestly. · ISC · github.com/d3/d3-scale
- Observable Plot — Higher-level D3-family grammar when you want speed. · ISC · github.com/observablehq/plot
- Vega — Runtime grammar alternative for complex interactive specs. · BSD-3-Clause · github.com/vega/vega
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.
D3 custom craft: honour data joins to SVG/Canvas marks with explicit scales, and switch when a Chart.js bar already answers the manager question.