TresPies · parametric data-viz stack

casa-datos

Chart and choropleth primitives, the house 8-color categorical scale, and a single-file data tool — the stack for a data explorer, an indicator dashboard, or a one-file analysis tool you can email to someone.

Every number on this page is synthetic sample data, generated for demonstration — not sourced from any real client, program, or place.

01 · Bar chart (synthetic)

One snapshot, four programs

A zero-baseline bar chart — bars always start at zero, so height differences represent real ratios, never an exaggerated slice of a truncated axis. Values are printed directly above each bar, so the numbers read correctly even in grayscale.

Latest synthetic value per program live demo

Bar chart: latest synthetic value per program0255075100Program A: 62 idx62Program AProgram B: 45 idx45Program BProgram C: 78 idx78Program CProgram D: 34 idx34Program D

Synthetic data. Reroll the seed in the parámetros panel below for a new example.

02 · Line chart (synthetic)

Six periods, three programs

Each series pairs a color with its own marker shape and dash pattern, and is labeled directly at the end of its line — color is never the only way to tell two series apart.

Synthetic trend by period live demo

Line chart: synthetic trend by period0255075100P1P2P3P4P5P6Program AProgram BProgram C

Synthetic data. Reroll the seed in the parámetros panel below for a new example.

03 · Small multiples (synthetic)

One scale, four panels

All four panels share a single y-scale, computed across every program's data. That is what makes them honestly comparable at a glance — a taller bar always means a bigger number, panel to panel.

All six periods per program live demo

Small multiples: all six periods per programProgram AProgram A — P1: 40P1Program A — P2: 48P2Program A — P3: 44P3Program A — P4: 55P4Program A — P5: 58P5Program A — P6: 62P6Program BProgram B — P1: 60P1Program B — P2: 55P2Program B — P3: 50P3Program B — P4: 47P4Program B — P5: 46P5Program B — P6: 45P6Program CProgram C — P1: 30P1Program C — P2: 42P2Program C — P3: 55P3Program C — P4: 60P4Program C — P5: 70P5Program C — P6: 78P6Program DProgram D — P1: 50P1Program D — P2: 44P2Program D — P3: 62P3Program D — P4: 58P4Program D — P5: 40P5Program D — P6: 34P6

Synthetic data. Reroll the seed in the parámetros panel below for a new example.

04 · Choropleth map (synthetic geometry)

An abstract grid, not a real place

A 4×4 grid of invented sectors, not a real jurisdiction or boundary. Fill color follows a sequential scale between two tokens; every cell also prints its own value, and its label flips between ink and paper so it stays readable at both ends of the scale.

Synthetic sector grid live demo

Choropleth map: synthetic sector gridSector A1: 22 idxSector A122Sector A2: 48 idxSector A248Sector A3: 63 idxSector A363Sector A4: 90 idxSector A490Sector B1: 35 idxSector B135Sector B2: 55 idxSector B255Sector B3: 71 idxSector B371Sector B4: 40 idxSector B440Sector C1: 60 idxSector C160Sector C2: 28 idxSector C228Sector C3: 82 idxSector C382Sector C4: 51 idxSector C451Sector D1: 44 idxSector D144Sector D2: 66 idxSector D266Sector D3: 20 idxSector D320Sector D4: 77 idxSector D477Synthetic value (0-100)2090

Synthetic geometry — an abstract grid, never a real boundary. Swapping in a real GeoJSON dataset: see choropleth.js's closing comment.

Email someone a tool

tool.html is one self-contained file — no external anything. Paste in a small dataset, get a bar chart back, and send the file itself; nothing else is required to open it.

Open the data tool

The seed below regenerates every synthetic dataset on this page — the four charts and their data tables update together, reproducibly.

semilla · seed —
on