Data Visualization Playground

A lightweight charting playground built from scratch — no charting library, just React, SVG, and Framer Motion. Upload your own CSV or switch between sample datasets, then flip between chart types to see the same data from different angles.

What it does

• CSV upload: Drop a CSV (or click to browse) and it becomes a selectable dataset. Delimiters (comma, semicolon, tab) are auto-detected, and column types are inferred — a column is treated as numeric only if every non-empty cell parses as a number.
• Four chart types: Grouped bars, multi-series lines, scatter plot, and pie — all rendered as hand-written SVG with staggered entrance animations.
• Schema-agnostic rendering: The charts don't know anything about the datasets. They discover numeric columns at render time, so the same code paths handle the sample data and whatever you upload.
• Data preview: The first rows of the active dataset are shown in a table so you can verify the parse did what you expected.

Why no charting library?

Partly as an exercise: axis math, path generation, and pie-slice arc geometry are good fundamentals to be able to write by hand. And partly because for four chart types, a bespoke ~400-line implementation is smaller and easier to style consistently than a D3 or Chart.js integration.

The trade-off is real, though — you don't get zoom, brushing, or export for free. For anything production-grade with those requirements I'd reach for a library; this playground is about understanding what those libraries do under the hood.

How the CSV parsing works

The parser is deliberately simple and strict:

1. Split into lines, auto-detect the delimiter by which one yields the most columns in the header row.
2. Reject files where any row's column count doesn't match the header — silent misalignment is worse than an error message.
3. Infer types column-wise, not cell-wise: one non-numeric cell makes the whole column categorical, which keeps the charts from mixing units.
4. Cap at 200 rows to keep the animated SVG rendering smooth.

Known limitation: it doesn't handle quoted fields containing delimiters (the full CSV spec is surprisingly gnarly — that's what dedicated parsers like PapaParse are for).

Try it

1. Pick a sample dataset, or drop in your own CSV
2. Switch between bar, line, scatter, and pie
3. Check the data preview to see how your columns were typed