rough-plot

A tiny sketch-style visualization library for creating hand-drawn looking charts and plots.

Installation

npm install rough-plot

Usage

Import and call rp.plot() with your data and configuration:

Bar Charts

Vertical bars:

import * as rp from "rough-plot";

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

const node = rp.plot({
  type: "barY",
  data,
  x: "genre",
  y: "sold"  
});

document.getElementById("container").append(node);

Horizontal bars:

const node = rp.plot({
  type: "barX",
  data,
  x: "sold",
  y: "genre"  
});

Stacked bars (add color field to group data):

const node = rp.plot({
  type: "barY",
  data,
  x: "month",
  y: "rainfall",
  color: "name",
});

Line Charts

Basic line:

const data = [
  { year: "1991", value: 3 },
  { year: "1992", value: 4 },
  { year: "1993", value: 3.5 },
];

const node = rp.plot({
  type: "lineY",
  data,
  x: "year",
  y: "value"
});

Multi-series with curves:

const node = rp.plot({
  type: "lineY",
  data,
  x: "month",
  y: "temperature",
  color: "city",
  curve: true,
});

Area Charts

Single series:

const node = rp.plot({
  type: "areaY",
  data,
  x: "year",
  y: "value"
});

Stacked:

const node = rp.plot({
  type: "areaY",
  data,
  x: "year",
  y: "value",
  color: "country",
  curve: true,
});

Scatter Plot

const data = [
  [10.0, 8.04],
  [8.07, 6.95],
  [13.0, 7.58],
];

const node = rp.plot({
  type: "point",
  data,
  x: d => d[0],
  y: d => d[1],
});

Pie & Donut Charts

Pie:

const node = rp.plot({
  type: "pie",
  data,
  theta: "sold",
  color: "genre"  
});

Donut:

const node = rp.plot({
  type: "pie",
  data,
  theta: "sold",
  color: "genre",
  innerRadius: 0.5  
});

Dimensions

Customize chart size and margins:

const node = rp.plot({
  type: "barY",
  width: 400,
  height: 300,
  marginLeft: 50,
  marginBottom: 50,
  marginRight: 50,
  marginTop: 5,
  data,
  x: "a",
  y: "b"
});

License

MIT