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.
Parts
- Mark — The core mark of D3 custom craft is data joins to SVG/Canvas marks with explicit scales.
- Scale — The scale must show zero (or a declared break) and units.
- Axis — Axis titles name the variable, not a mood.
- Legend — A legend is weaker than a direct label. Write beside the mark when you can.
- Label — Numbers are optional. If comparison is the job, label the ends only.
- Grid — Keep the grid faint. Data should own the ink.
- Annotation — One annotation sentence. Date the source.
- Frame — A thin frame. Never a 3-D box.
Variants
- Data-Driven Documents — Variant 1 of D3 custom craft (Data-Driven Documents). Same encoding, different layout.
- Custom SVG marks — Variant 2 of D3 custom craft (Custom SVG marks). Same encoding, different layout.
- D3 scales — Variant 3 of D3 custom craft (D3 scales). Same encoding, different layout.
- D3 custom craft 4 — Variant 4 of D3 custom craft (D3 custom craft 4). Same encoding, different layout.
Labels
- Axis — On D3 custom craft, make Mark readable.
- Legend — On D3 custom craft, make Scale readable.
- Label — On D3 custom craft, make Axis readable.
- Grid — On D3 custom craft, make Legend readable.
- Annotation — On D3 custom craft, make Label readable.
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.