Start here
Short paths into the atlas — pick one and follow the seven sections.
Popular in Everything About Visualization
Visualization FAQ
Is the studio a full design suite replacement?
Do scores crown the “best” chart?
Does studio guarantee WCAG pass?
Pie charts always bad?
Studio
Browse the atlas
📊 Charts
Bars, lines, pies, scatter, heat, waterfall, funnel, treemap.
▮ Bar chart
Compare categories on a shared baseline — the default honest chart for reports, ads and assignments.
Open →
📈 Line chart
Show change through time with a continuous path — the workhorse of reports and science homework.
Open →
◐ Pie & donut
A seductive part-to-whole shape — powerful in ads, dangerous when slices multiply.
Open →
⚬ Scatter plot
Two measured variables as a cloud of points — the honest way to talk about correlation.
Open →
▦ Heatmap
A matrix of intensity — dense, seductive, and easy to lie with a rainbow scale.
Open →
📶 Waterfall
How a total was built — start, pluses, minuses, end. The finance slide that still earns its keep.
Open →
▽ Funnel
Stages that shrink — marketing and ads love it; science class should ask whether the widths are honest.
Open →
▭ Treemap
Hierarchy as nested rectangles — files, budgets and portfolios when a pie would choke.
Open →
📶 Histogram
Counts per bin — how a measurement piles up, not how categories compare.
Open →
🔀 Diagrams
Flow, org, mind map, Venn, timeline.
⇨ Flowchart
Boxes and arrows for a process — the assignment classic that still runs operations decks.
Open →
🌳 Org chart
Who reports to whom — a tree that can clarify a company or flatten a classroom project.
Open →
✦ Mind map
A radial dump of ideas — superb for study notes, weak as a finished argument.
Open →
◯ Venn diagram
Overlapping sets — a school favourite that ads overuse and analysts should ration.
Open →
— Timeline
Events on a rail of time — history homework, product launches and campaign calendars.
Open →
⬡ Shapes
Geometry, arrows, callouts, infographic blocks.
▲ Geometric shapes
Circles, squares, triangles, hexagons — the alphabet of ads, icons and worksheets.
Open →
→ Arrows & connectors
Direction is an argument — ads, slides and worksheets live or die on the arrow.
Open →
💬 Callouts & badges
The shout on the layout — sale badges, comic balloons, numbered steps on a poster.
Open →
▣ Infographic blocks
A page built from tiles — magazines, landing pages and science-fair boards.
Open →
🎯 Craft
Color systems, data-ink, accessibility.
🎨 Color systems
Hue is a tool, not decoration — categorical, sequential and diverging scales for charts and ads.
Open →
✒️ Data-ink
Every pixel should earn its keep — Tufte’s test for reports, and a warning against cute ads.
Open →
♿ Accessible viz
If it only works in hue, it does not work — patterns, contrast and text that survive greyscale.
Open →
✦ Studio
Work reports, ads, school assignments, pitch decks.
📁 Work reports
The weekly and quarterly pack — bars, waterfalls and tiles that a manager can read in four minutes.
Open →
📣 Ads & creative
Shapes that must work at a glance — badges, arrows, crops and a single number that sells.
Open →
📚 School assignments
Figures a teacher can mark — labelled axes, a source line, and a chart that matches the question.
Open →
🎬 Pitch decks
Ten to fifteen slides that argue — market, wedge, proof, ask. Charts only where they close a beat.
Open →
W Ways
Twenty practical playbooks — contrast, grids, Mermaid, ECharts, D3, Lucide and more — with licenses and GitHub links.
A11Y WCAG contrast check
Check text-and-background contrast before you ship - the fastest accessibility win for slides, sites and posters.
Open →
PAL Palette and scale builder
Build categorical, sequential and diverging palettes that survive print and color-blind viewing.
Open →
Aa Typography scale
Pick a modular type scale so titles, body and captions stop fighting each other on slides and one-pagers.
Open →
GRID Slide and document grid
Align every block to a simple grid so reports, pitches and posters look intentional without a designer.
Open →
CHOOSE Data-to-chart decision
Match the question to an encoding - comparison, trend, part-to-whole, correlation - before opening any tool.
Open →
MM Mermaid text diagrams
Write a flowchart or sequence in plain text - versionable, reviewable, and free via Mermaid.
Open →
SEQ Sequence diagram patterns
Show who talks to whom across time - the office and classroom pattern for APIs, handoffs and protocols.
Open →
SKETCH Excalidraw sketch wireframes
Sketch the idea with Excalidraw before polishing - hand-drawn clarity beats premature pixel craft.
Open →
EC Apache ECharts dashboards
Ship interactive office dashboards with Apache ECharts - Apache-2.0, huge chart catalog, no proprietary scrape.
Open →
CJ Chart.js quick charts
Drop Chart.js into a page for honest bars and lines when you need a web chart today, not a platform.
Open →
D3 D3 custom craft
Reach for D3 when the encoding does not exist in a template - full control, higher craft cost.
Open →
VL Vega-Lite grammar
Declare encodings in JSON with Vega-Lite - reproducible charts that teach the grammar of graphics.
Open →
PLOT Observable Plot kit
Plot tidy tables with Observable Plot - concise, ISC-licensed, and friendly for analysis explainers.
Open →
ROUGH Rough.js annotation
Use Rough.js strokes to annotate and emphasize - persuasion through human-looking marks, not chrome.
Open →
SANK Sankey flow stories
Tell how quantity moves between stages with a Sankey - budgets, funnels and energy stories.
Open →
NET Network graph maps
Map relationships as nodes and links - teams, citations, dependencies - with open graph libraries.
Open →
MAP Choropleth story maps
Shade regions by a rate - elections, health, sales - with open geo stacks and honest color scales.
Open →
ICO Open icon systems
Pick one open icon set and stick to it - consistent metaphors beat mixed clipart in decks and products.
Open →
CV Resume infographic recipe
Build a one-page visual resume: grid, type scale, honest skill bars, open icons - no clipart dump.
Open →
QBR Quarterly report visuals
A repeatable quarterly pack: waterfall bridge, trend lines, contrast-safe type, one idea per slide.
Open →