xkcdplot

XKCD-style plots in Javascript using D3

NOTE: This is a fork of Dan Foreman-Mackey's awesome xkcdplot, packaged for npm/browserify/webpack. The following description is from Dan's original post.

Inspired by this blog post and Mike Bostock's comment on this HN thread, I decided to make an XKCD-style plot in Javascript using D3 with a custom interpolation function. I also tried to use the "reusable chart" paradigm.

You should really check out the source.

Here's an example...

Usage

Install the package:

npm install --save xkcdplot

Import xkcd plot:

import xkcdplot from "xkcdplot";

Create the plot:

var plot = xkcdplot();

Configure it:

plot
  .width(800)
  .height(600);

Generate at least one series of data of the form [{ x: ..., y: ... }, ...]:

let data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 }
];

let data2 = [
  { x: 1, y: 3 },
  { x: 2, y: 2 }
];

Add them to the plot:

plot.plot(data);
plot.plot(data2, { stroke: "red" });

Set any final settings, then draw it:

plot("body")
  .xlim([-1.5, 7.5])
  .draw();

Humor Sans

If you're using webpack you can load the "Humor Sans" font by simply importing it:

import "xkcdplot/humor-sans";

Or without ES2015 modules:

require("xkcdplot/humor-sans");

You need to configure the following loaders (or similar):

{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(eot|woff2?|ttf|svg)$/, loader: "file-loader" }