XKCD plots in d3
✓ Published0🌍 Public
SSpaceActuary
Last edited May 6, 2016
Created on May 6, 2016
This example recreates the hand-drawn aesthetic of XKCD comics in D3.js by rendering jagged, slightly distorted line plots and axes. It uses a custom path interpolation function to add jitter to every line, including the axes and arrowheads, while a custom "xkcd" font styles the title and labels. The code generates two mathematical functions (an exponential sine wave and a cosine wave) with `d3.range`, then plots them using `d3.svg.line` with the quirky interpolation. Built with D3 v2 and SVG rendering, the example demonstrates how to bend standard chart elements into a playful, informal visual style.
AI-generated descriptionforked from <a href='http://bl.ocks.org/dfm/'>dfm</a>'s block: <a href='http://bl.ocks.org/dfm/3914862'>XKCD-style plots in d3</a>