Visual chooser cards
Pick by glance — the table below stays for search and screen readers.
| Topic | Family | Use when | Avoid when |
|---|---|---|---|
| ▮ Bar chart | Charts | comparing a handful of… | too many categories, 3-D… |
| 📈 Line chart | Charts | trends, seasonality and a… | unordered categories, or… |
| ◐ Pie & donut | Charts | two to five parts that sum… | many similar slices, 3-D… |
| ⚬ Scatter plot | Charts | correlation, outliers and… | one axis is not… |
| ▦ Heatmap | Charts | patterns across two… | precise lookup of a… |
| 📶 Waterfall | Charts | P&L bridges, budget vs… | the story is a trend over… |
| ▽ Funnel | Charts | ordered drop-off: leads,… | stages are not nested… |
| ▭ Treemap | Charts | part-to-whole with many… | you need precise… |
| 📶 Histogram | Charts | one continuous measurement… | bins differ in width, or… |
| ⇨ Flowchart | Diagrams | decisions, loops and… | the structure is a… |
| 🌳 Org chart | Diagrams | reporting lines, committee… | work actually flows… |
| ✦ Mind map | Diagrams | brainstorming, revision… | you must prove a claim… |
| ◯ Venn diagram | Diagrams | two or three sets with a… | four-plus sets, or when… |
| — Timeline | Diagrams | ordered events, eras,… | you need quantities… |
| ▲ Geometric shapes | Shapes | icons, posters,… | you need to encode a… |
| → Arrows & connectors | Shapes | sequence, cause,… | every object has an arrow… |
| 💬 Callouts & badges | Shapes | promos, numbered how-tos,… | the badge repeats the… |
| ▣ Infographic blocks | Shapes | dashboards, posters,… | the tiles hide that the… |
| 🎨 Color systems | Craft | legends, brand systems,… | rainbow defaults, or… |
| ✒️ Data-ink | Craft | auditing slides,… | a poster that must shout… |
| ♿ Accessible viz | Craft | public dashboards, exams,… | relying on red/green alone… |
| 📁 Work reports | Studio | recurring reviews, budget… | a one-off story that needs… |
| 📣 Ads & creative | Studio | retail offers, app… | the claim needs a full… |
| 📚 School assignments | Studio | lab reports, history… | decorating first — pick… |
| 🎬 Pitch decks | Studio | fundraising, sales… | dumping the whole… |
| A11Y WCAG contrast check | Ways | UI type, slide titles,… | judging brand hue alone… |
| PAL Palette and scale builder | Ways | choropleths, heatmaps,… | rainbow scales on ordered… |
| Aa Typography scale | Ways | decks, handouts, classroom… | random point sizes per… |
| GRID Slide and document grid | Ways | PowerPoint or Google… | stacking free-floating… |
| CHOOSE Data-to-chart decision | Ways | first 60 seconds of any… | picking a chart because it… |
| MM Mermaid text diagrams | Ways | process docs, onboarding,… | pixel-perfect brand… |
| SEQ Sequence diagram patterns | Ways | API flows, support… | a simple unordered… |
| SKETCH Excalidraw sketch wireframes | Ways | kickoffs, classroom… | final brand assets that… |
| EC Apache ECharts dashboards | Ways | ops dashboards, quarterly… | a single static bar in a… |
| CJ Chart.js quick charts | Ways | internal tools, student… | you need maps, sankeys or… |
| D3 D3 custom craft | Ways | novel forms, research… | a Chart.js bar already… |
| VL Vega-Lite grammar | Ways | reproducible analysis… | you only need one… |
| PLOT Observable Plot kit | Ways | analysis write-ups,… | you must match a heavy… |
| ROUGH Rough.js annotation | Ways | explainer highlights, ad… | dense quantitative… |
| SANK Sankey flow stories | Ways | budget allocation,… | the audience only needs a… |
| NET Network graph maps | Ways | org influence maps,… | a simple org chart or… |
| MAP Choropleth story maps | Ways | regional comparisons,… | raw counts without… |
| ICO Open icon systems | Ways | slides, product UI,… | mixing five icon styles on… |
| CV Resume infographic recipe | Ways | students, freelancers,… | ATS-only plain text is… |
| QBR Quarterly report visuals | Ways | managers, founders,… | stuffing every KPI onto… |
When two forms both fit, pick the one with the simpler encoding.