xkcdplot
v1.1.0
Published
XKCD-style plots in Javascript using D3
Downloads
6
Readme
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" }