The 12 Kinds of Data Visualization People — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/dataviz-people

The 12 Kinds of Data Visualization People

A Semiotic persona machine

The 2017 essay sorted data visualization people into seven affectionate types. This expanded remake accepts that the taxonomy has mutated: pick a person and the argument changes chart form, data shape, interaction, and visual posture.

Original taxonomy fromThe 7 Kinds of Data Visualization People. Expanded to twelve here, with new interface art rather than the original Susie Lu cartoons.

Spreadsheet maximalists

Excel Brute Forcers

If the chart menu refuses, make the cells conspire.

Brief

A flow diagram built from helper columns, named ranges, and a heroic disregard for the default chart picker.

Semiotic move

Semiotic treats the contraption as first-class flow data: nodes, edges, values, labels, and hover all stay explicit.

Active chart

SankeyDiagram

Excel

Twelve chart instincts

Every type gets a native chart body

The shared material

Same taxonomy, many visual grammars

The strip below keeps the five temperament metrics constant across the twelve personas. The large chart above is free to become a flow, dashboard, field, story, model, funnel, terminal gag, workshop rubric, or taxonomy.

Speed

Craft

Evidence

Audience

Weird

Implementation shape

A selector can change the entire chart grammar

JSX

import { CandlestickChart, FunnelChart, GroupedBarChart, LineChart, SankeyDiagram, Scatterplot, TreeDiagram, } from "semiotic" const chartFor = { excel: SankeyDiagram, tableau: GroupedBarChart, italians: CustomGlyphAtlas, media: LineChart, scientists: Scatterplot, industry: FunnelChart, freelancers: CustomIconGarden, procedural: Scatterplot, finance: CandlestickChart, devops: TerminalSankey, workshops: GroupedBarChart, dissectors: TreeDiagram, } // The selector changes data shape, chart type, palette, and explanatory copy. const persona = getPersona(activePersonaId) const Chart = chartFor[persona.id] <Chart {...chartPropsFor(persona)} />