watercolorviz

A JavaScript library for watercolor-style data visualizations.

★ GitHub

A few of the charts

Bar chart

Coffees poured this week. Tweak it →

Streamgraph

Stacked flows with a soft, organic centerline.

Show code 
new StackedArea('#chart', {
  stream: true,
  data: { x, series },
});

Area chart

A single translucent wash under a hand-drawn edge.

Show code 
new Area('#chart', {
  data: { x, y },
  color: '#6f93c2',
});

Confidence interval

Honest uncertainty: the band literally looks blurry.

Show code 
new Interval('#chart', {
  // a band you can see the doubt in
  data: { x, y, lo, hi },
  color: '#6f93c2',
});

Radar

Translucent washes over a hand-drawn web, two profiles compared.

Show code 
new Radar('#chart', {
  data: {
    axes: ['Speed', 'Power', 'Range', …],
    series: [[7, 5, 8, …], [4, 8, 6, …]],
  },
  seriesNames: ['Model A', 'Model B'],
});

Stacked area

Bands stacked from a zero baseline, with a built-in legend.

Show code 
new StackedArea('#chart', {
  data: { x, series: { Alpha, Beta, Gamma } },
  colors: ['#dc8068', '#94a854', '#6f93c2'],
});

Annotations

Circles, callouts and highlight bands, on any chart, in data coords.

Show code 
new Line('#chart', {
  data: { x, y },
  annotations: [
    { type: 'band', from: 3, to: 5, label: 'surge' },
    { type: 'circle', at: [5, 60], r: 20 },
    { type: 'callout', at: [1, 60], to: [5, 60], text: 'new high' },
  ],
});

Daily activity

A calendar heatmap, one wash per day, six months of it.

Show code 
new Calendar('#chart', {
  data: { days: [{ date, value }, …] },
  color: '#4ca85f',
});

Set it up in a minute

  1. Install from npm (or skip straight to the import map below for a no-bundler setup): 
    npm install watercolorviz d3
  2. Import a chart and go. Give it a selector, some data, and optional shared options (color, colors, ink, paper, title, seed, width…): 
    import { Bar } from 'watercolorviz';

new Bar('#chart', {
  data: { labels: ['A', 'B', 'C'], values: [30, 55, 42] },
});
  3. No bundler? Load it straight in the browser with an import map and a canvas: 
    <script type="importmap">
  { "imports": { "d3": "https://cdn.jsdelivr.net/npm/d3@7/+esm" } }
</script>
<div id="chart"></div>
<script type="module">
  import { Bar } from 'watercolorviz';
  new Bar('#chart', { data: { labels: ['A', 'B'], values: [30, 55] } });
</script>