What shape does each chart type produce?

Bar and pie give an array of label and value objects, line gives date and value pairs, scatter gives x, y, and group, treemap gives a nested name and children hierarchy with leaf values, and force gives nodes and links arrays.

How is the line chart data generated?

It is a random walk over consecutive days starting at 2024-01-01. Each day's value nudges up or down from the previous one, producing a believable time series you can parse with d3.timeParse.

Is the force graph guaranteed to be connected?

Yes. Each node after the first links to an earlier node, which guarantees a connected graph, and then a few extra random edges are added so the layout looks natural rather than tree-like.

How do I use the treemap output?

The treemap is a hierarchy with a root, group children, and leaf nodes carrying a value. Pass it to d3.hierarchy and call sum on the value field, then run d3.treemap to compute the layout.

Is the data reproducible across reruns?

Yes. The generator is seeded, so the same chart type, count, and seed produce identical data. The Regenerate button advances the seed for a fresh dataset.

D3.js Sample Data Generator

A D3.js sample data generator that emits correctly shaped JSON for the most common chart types, so you can prototype a visualization without hand-writing fixtures. It covers bar, line, scatter, pie, treemap, and force graph layouts.

How it works

Pick a chart type and the generator produces data in the exact shape D3 expects. Bar and pie charts get an array of { label, value }. Line charts get a seeded random walk of { date, value } over consecutive days from 2024-01-01, ready for d3.timeParse. Scatter charts get { x, y, group }. Treemaps get a nested hierarchy of a root, group children, and leaves carrying a value. Force graphs get { nodes, links }, where each node after the first links back to an earlier one to guarantee a connected graph, plus a few extra random edges.

Everything is seeded for reproducibility, so the same chart type, point count, and seed yield identical data. The Regenerate button advances the seed.

Tips and example

For a force graph, keep the node count under about 24 so the layout stays legible. The output looks like this:

{
  "nodes": [{ "id": "n0", "label": "Alpha", "group": 2 }],
  "links": [{ "source": "n1", "target": "n0", "value": 3 }]
}

For a treemap, pass the result to d3.hierarchy(data).sum(d => d.value) before running the layout. Use the inline hint under the dropdown as a quick reminder of which D3 helper each shape pairs with, then copy the JSON into your prototype.