Posted on Sat 20 October 2012

Handdrawn Graphs with D3

From [cached]Dan Foreman-Mackey, with slight modifications.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    // Generate some data.
    function f1 (x) {
        return Math.exp(-0.5 * (x - 1) * (x - 1)) * Math.sin(x + 0.2) + 0.05;
    }

    function f2 (x) {
        return 0.5 * Math.cos(x - 0.5) + 0.1 + Math.sqrt(Math.abs(x)) / 2 - 0.65;
    }

    var xmin = -1.0,
        xmax = 7,
        N = 100,
        data = d3.range(xmin, xmax, (xmax - xmin) / N).map(function (d) {
            return {x: d, y: f1(d)};
        })
        data2 = d3.range(xmin, xmax, (xmax - xmin) / N).map(function (d) {
            return {x: d, y: f2(d)};
        });

    labels = [
      {text: "<-- it's going to be legendary", x: 200, y: 55}
    ]
    var plot = xkcdplot("The most important graph ever made", "Time of Day", "Awesomeness", labels);
    plot("#plt");
    plot.plot(data);
    plot.plot(data2, {stroke: "red"});
    plot.xlim([-1.5, 7.5]).draw();

© Julian Schrittwieser. Built using Pelican. Theme by Giulio Fidente on github. .