God Data Viz
Procedure
- The one message. Write the takeaway as a sentence. It becomes the chart title.
- Pick the chart by the question:
| Question | Chart |
|---|---|
| Compare categories | Horizontal bar (sorted); dot plot |
| Change over time | Line (≤ 5 series); area for totals; column for few periods |
| Part-to-whole | Stacked bar / 100% bar; donut only for 2–4 parts; treemap for many |
| Distribution | Histogram, box/violin, beeswarm |
| Relationship | Scatter (+ trend line), bubble (careful) |
| Ranking over time | Bump chart, slope chart |
| Geography | Choropleth (normalise per capita!), proportional symbols |
| Flow | Sankey, alluvial |
| Single KPI | Big number + delta + sparkline |
| Precise lookup | Table (with conditional formatting) |
- Declutter: remove chart borders, heavy gridlines (keep light horizontal ones), 3D, shadows and legends (label lines directly). Start bar axes at zero. Use tabular numerals, sensible rounding, and units in labels.
- Highlight: grey for context, accent colour for the story. Annotate the key point ("Launch → +32%").
- Colour scales: sequential (one hue, light→dark: viridis, cividis, or blues), diverging (two hues around a meaningful midpoint, e.g.
#2166AC → #F7F7F7 → #B2182B), categorical (≤ 7 distinct; Okabe–Ito set for colour-blind safety). Don't encode with red vs green alone. - Accessibility: text alternative (a summary + key numbers), data table toggle, patterns or direct labels in addition to colour, keyboard focus for interactive charts, ≥ 3:1 contrast for marks against the background.
Dashboard rules
- Top row: 3–5 KPIs with comparison (vs last period / target) and trend.
- Middle: primary trend chart. Bottom: breakdowns and tables.
- Consistent time ranges and units; filters at the top; last-updated timestamp.
- Density: 8pt grid, 12–14px labels, avoid more than ~9 charts per view.
Infographic structure
Title (the takeaway) → hook stat → 3–5 sections in reading order (top→bottom for 2:3 vertical, left→right for 16:9) → sources and date → brand. Use icons from one family (Lucide, Phosphor, Material Symbols, Tabler). Pinterest/IG vertical infographics: 1000×1500 or 1080×1350 frames.
Code snippets
- Vega-Lite (fast, declarative):
{ "mark": "bar", "encoding": { "y": {"field":"country","sort":"-x"}, "x": {"field":"value","type":"quantitative"} } } - Recharts (React):
<BarChart layout="vertical">…with<LabelList>for direct labels. - Chart.js: set
plugins.legend.display=falseand use the datalabels plugin for direct labelling. - D3/SVG for bespoke editorial charts: build scales (
d3.scaleLinear), axes with few ticks,<title>andaria-labelon the SVG. - ECharts for large interactive dashboards and maps.


