DataViz v0.1
Upload a CSV and turn it into charts on a freeform canvas. Place, move, and resize as many bar, line, area, scatter, pie, donut, and histogram charts as you like — parsed, aggregated, and rendered entirely in your browser with no dependencies and no upload to any server.
Features
- CSV ParsingAutomatic delimiter detection (comma, semicolon, tab, pipe), quoted fields with embedded commas and newlines, and per-column type detection (number, date, boolean, text).
- Canvas WorkspacePlace multiple charts on a pannable, zoomable canvas. Drag to move, pull the eight handles to resize, pan by dragging empty space (or middle/right-drag), and zoom with Ctrl+scroll, pinch, or the toolbar buttons.
- Seven Chart TypesBar / column (vertical or horizontal), line, area, scatter, pie, donut, and histogram — each chart on the canvas keeps its own settings.
- AggregationSum, average, count, minimum, maximum, median, or no aggregation for raw rows.
- Grouping & SeriesPivot a category column into multiple series, or plot several numeric columns side by side.
- Sorting & Top-NOrder categories by X or Y, and cap the chart to the top N rows. Pie slices beyond twelve collapse into “Other”.
- Five PalettesOcean, sunset, forest, berry, and mono color schemes, plus a legend position control.
- ExportDownload the whole canvas or a single chart as SVG or high-resolution PNG, or export the aggregated or full dataset as CSV.
- Projects & Auto-SaveSave and load projects as JSON, with auto-save to localStorage and optional file-based auto-save.
- Multi-Tab SyncBroadcastChannel keeps multiple open tabs in sync and puts stale tabs into read-only mode.
- PrivacyEverything runs client-side. Your data never leaves your machine.
Quick Start
Loading data
Click Open CSV in the toolbar, drag a file onto the canvas, or click Try sample data to explore with a built-in 48-row sales dataset.
Choosing fields
Open the Data tab to see every detected column with its inferred type. Click the X button to use a column as the category axis and Y to add a numeric column as a value series. You can also assign fields from the Chart tab.
Refining the chart
Pick a chart type from the toolbar, then use the Chart tab to set aggregation, grouping, sorting, a top-N limit, titles, axis labels, the color palette, and legend position. Every chart on the canvas stores its own settings — select one to edit it.
Arranging the canvas
Click Add Chart (or a chart-type button with nothing selected) to drop another chart onto the canvas. Drag a chart to move it, drag any of its eight handles to resize it, and drag empty space to pan. Ctrl/Cmd+scroll (or a trackpad pinch) zooms about the cursor, and the toolbar offers +, −, and Fit. Duplicate, delete, and layer-order actions live in the toolbar and right-click menu.
Chart Types
| Type | Best for | Notes |
|---|---|---|
| Bar / Column | Comparing categories | Vertical or horizontal; grouped or stacked-style multi-series |
| Line | Trends over time | Uses a true numeric/date axis when X is numeric or a date |
| Area | Magnitude over time | Same axis logic as line, with a filled baseline |
| Scatter | Correlation between two numbers | Requires a numeric X; group by a column for colored series |
| Pie | Part-to-whole | Top 12 slices, remainder grouped as “Other” |
| Donut | Part-to-whole with a center hole | Same data rules as pie |
| Histogram | Distribution of one numeric column | Bin count derived from the row count |
Keyboard Shortcuts
Technical Details
- Framework: Vanilla JavaScript (ES5-compatible), no dependencies
- Rendering: Hand-built inline SVG with no charting library
- Parsing: Custom RFC 4180–style CSV parser with delimiter detection
- Limits: Up to 20,000 rows per dataset, 100-row preview
- State: Chart objects on a canvas, each with its own config; config-level and full-data undo/redo snapshots
- Theme: Free Open Tools ecosystem dark/light scheme with toggle
- Export: Canvas or single-chart SVG, PNG (2× rasterized), aggregated CSV, raw CSV
Version History
- Initial release
- CSV upload with auto delimiter detection and column type inference
- Bar, line, area, scatter, pie, donut, and histogram charts
- Aggregation, grouping, sorting, and top-N limiting
- Five color palettes, legend positioning, titles and axis labels
- Freeform canvas workspace for multiple charts, with drag-to-move, eight-handle resize, snap-to-grid, and z-order controls
- Pan, zoom, and fit-to-window canvas navigation
- Per-chart settings with a selected-chart indicator
- Canvas / single-chart SVG and PNG export, plus CSV export
- JSON project save and load, auto-save, multi-tab coordination, and undo/redo