radiodario · December 8, 2016 08:04
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Happy New Year everybody</title>

    <script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
    <script src="xkcd.js"></script>

 <style>

 @font-face {
    font-family: "xkcd";
    src: url('http://antiyawn.com/uploads/Humor-Sans.ttf');
 }

 body {
    font-family: "xkcd", sans-serif;
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-top: 75px;
 }

 text.title {
    font-size: 20px;
 }

 path {
    fill: none;
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
 }

 path.axis {
    stroke: black;
 }

 path.bgline {
    stroke: white;
    stroke-width: 6px;
 }

 </style>

 </head>
 <body>

    <script>

        // Generate some data.
        d3.csv('data.csv', function(data) {
            
            var pops = data.map(function(d, i) {
                var value = {
                    x: i,
                    y: +d['old lang syne']
                }  

                return value
            })
            console.log(pops)

            // Build the plot.
            var plot = xkcdplot();
            plot("body");
    
            // Add the lines.
            plot.plot(pops);
    
            // Render the image.
            plot.xlim([0,500]).draw();
        });
    </script>

 </body>
 </html>
diff --git a/xkcd.js b/xkcd.js
 function xkcdplot() {

    // Default parameters.
    var width = 700,
        height = 380,
        margin = 20,
        arrowSize = 12,
        arrowAspect = 0.4,
        arrowOffset = 6,
        magnitude = 0.003,
        xlabel = "Weeks from 2004 to 2012",
        ylabel = "Searches for Auld Lang Syne",
        title = "Happy new year",
        xlim,
        ylim;

    // Plot elements.
    var el,
        xscale = d3.scale.linear(),
        yscale = d3.scale.linear();

    // Plotting functions.
    var elements = [];

    // The XKCD object itself.
    var xkcd = function (nm) {
        el = d3.select(nm).append("svg")
                    .attr("width", width + 2 * margin)
                    .attr("height", height + 2 * margin)
                .append("g")
                    .attr("transform", "translate(" + margin + ", "
                                                    + margin + ")");
        return xkcd;
    };

    // Getters and setters.
    xkcd.xlim = function () {
        if (!arguments.length) return xlim;
        xlim = arguments[0];
        return xkcd;
    };

    // Do the render.
    xkcd.draw = function () {
        // Set the axes limits.
        xscale.domain(xlim).range([0, width]);
        yscale.domain(ylim).range([height, 0]);

        // Compute the zero points where the axes will be drawn.
        var x0 = xscale(0),
            y0 = yscale(0);

        // Draw the axes.
        var axis = d3.svg.line().interpolate(xinterp);
        el.selectAll(".axis").remove();
        el.append("svg:path")
            .attr("class", "x axis")
            .attr("d", axis([[0, y0], [width, y0]]));
        el.append("svg:path")
            .attr("class", "y axis")
            .attr("d", axis([[x0, 0], [x0, height]]));

        // Laboriously draw some arrows at the ends of the axes.
        var aa = arrowAspect * arrowSize,
            o = arrowOffset,
            s = arrowSize;
        el.append("svg:path")
            .attr("class", "x axis arrow")
            .attr("d", axis([[width - s + o, y0 + aa], [width + o, y0], [width - s + o, y0 - aa]]));
        el.append("svg:path")
            .attr("class", "x axis arrow")
            .attr("d", axis([[s - o, y0 + aa], [-o, y0], [s - o, y0 - aa]]));
        el.append("svg:path")
            .attr("class", "y axis arrow")
            .attr("d", axis([[x0 + aa, s - o], [x0, -o], [x0 - aa, s - o]]));
        el.append("svg:path")
            .attr("class", "y axis arrow")
            .attr("d", axis([[x0 + aa, height - s + o], [x0, height + o], [x0 - aa, height - s + o]]));

        for (var i = 0, l = elements.length; i < l; ++i) {
            var e = elements[i];
            e.func(e.data, e.x, e.y, e.opts);
        }

        // Add some axes labels.
        el.append("text").attr("class", "x label")
                              .attr("text-anchor", "end")
                              .attr("x", width - s)
                              .attr("y", y0 + aa)
                              .attr("dy", ".75em")
                              .text(xlabel);
        el.append("text").attr("class", "y label")
                              .attr("text-anchor", "end")
                              .attr("x", aa)
                              .attr("y", x0)
                              .attr("dy", "-.75em")
                              .attr("transform", "rotate(-90)")
                              .text(ylabel);

        // And a title.
        el.append("text").attr("class", "title")
                              .attr("text-anchor", "end")
                              .attr("x", width)
                              .attr("y", 0)
                              .text(title);

        return xkcd;
    };

    // Adding plot elements.
    xkcd.plot = function (data, opts) {
        var x = function (d) { return d.x; },
            y = function (d) { return d.y; },
            cx = function (d) { return xscale(x(d)); },
            cy = function (d) { return yscale(y(d)); },
            xl = d3.extent(data, x),
            yl = d3.extent(data, y);

        // Rescale the axes.
        xlim = xlim || xl;
        xlim[0] = Math.min(xlim[0], xl[0]);
        xlim[1] = Math.max(xlim[1], xl[1]);
        ylim = ylim || yl;
        ylim[0] = Math.min(ylim[0], yl[0]);
        ylim[1] = Math.max(ylim[1], yl[1]);

        // Add the plotting function.
        elements.push({
                        data: data,
                        func: lineplot,
                        x: cx,
                        y: cy,
                        opts: opts
                      });

        return xkcd;
    };

    // Plot styles.
    function lineplot(data, x, y, opts) {
        var line = d3.svg.line().x(x).y(y).interpolate(xinterp),
            bgline = d3.svg.line().x(x).y(y),
            strokeWidth = _get(opts, "stroke-width", 3),
            color = _get(opts, "stroke", "steelblue");
        el.append("svg:path").attr("d", bgline(data))
                             .style("stroke", "white")
                             .style("stroke-width", 2 * strokeWidth + "px")
                             .style("fill", "none")
                             .attr("class", "bgline");
        el.append("svg:path").attr("d", line(data))
                             .style("stroke", color)
                             .style("stroke-width", strokeWidth + "px")
                             .style("fill", "none");
    };

    // XKCD-style line interpolation. Roughly based on:
    //    jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-in-matplotlib
    function xinterp (points) {
        // Scale the data.
        var f = [xscale(xlim[1]) - xscale(xlim[0]),
                 yscale(ylim[1]) - yscale(ylim[0])],
            z = [xscale(xlim[0]),
                 yscale(ylim[0])],
            scaled = points.map(function (p) {
                return [(p[0] - z[0]) / f[0], (p[1] - z[1]) / f[1]];
            });

        // Compute the distance along the path using a map-reduce.
        var dists = scaled.map(function (d, i) {
            if (i == 0) return 0.0;
            var dx = d[0] - scaled[i - 1][0],
                dy = d[1] - scaled[i - 1][1];
            return Math.sqrt(dx * dx + dy * dy);
        }),
            dist = dists.reduce(function (curr, d) { return d + curr; }, 0.0);

        // Choose the number of interpolation points based on this distance.
        var N = Math.round(200 * dist);

        // Re-sample the line.
        var resampled = [];
        dists.map(function (d, i) {
            if (i == 0) return;
            var n = Math.max(3, Math.round(d / dist * N)),
                spline = d3.interpolate(scaled[i - 1][1], scaled[i][1]),
                delta = (scaled[i][0] - scaled[i - 1][0]) / (n - 1);
            for (var j = 0, x = scaled[i - 1][0]; j < n; ++j, x += delta)
                resampled.push([x, spline(j / (n - 1))]);
        });

        // Compute the gradients.
        var gradients = resampled.map(function (a, i, d) {
            if (i == 0) return [d[1][0] - d[0][0], d[1][1] - d[0][1]];
            if (i == resampled.length - 1)
                return [d[i][0] - d[i - 1][0], d[i][1] - d[i - 1][1]];
            return [0.5 * (d[i + 1][0] - d[i - 1][0]),
                    0.5 * (d[i + 1][1] - d[i - 1][1])];
        });

        // Normalize the gradient vectors to be unit vectors.
        gradients = gradients.map(function (d) {
            var len = Math.sqrt(d[0] * d[0] + d[1] * d[1]);
            return [d[0] / len, d[1] / len];
        });

        // Generate some perturbations.
        var perturbations = smooth(resampled.map(d3.random.normal()), 3);

        // Add in the perturbations and re-scale the re-sampled curve.
        var result = resampled.map(function (d, i) {
            var p = perturbations[i],
                g = gradients[i];
            return [(d[0] + magnitude * g[1] * p) * f[0] + z[0],
                    (d[1] - magnitude * g[0] * p) * f[1] + z[1]];
        });

        return result.join("L");
    }

    // Smooth some data with a given window size.
    function smooth(d, w) {
        var result = [];
        for (var i = 0, l = d.length; i < l; ++i) {
            var mn = Math.max(0, i - 5 * w),
                mx = Math.min(d.length - 1, i + 5 * w),
                s = 0.0;
            result[i] = 0.0;
            for (var j = mn; j < mx; ++j) {
                var wd = Math.exp(-0.5 * (i - j) * (i - j) / w / w);
                result[i] += wd * d[j];
                s += wd;
            }
            result[i] /= s;
        }
        return result;
    }

    // Get a value from an object or return a default if that doesn't work.
    function _get(d, k, def) {
        if (typeof d === "undefined") return def;
        if (typeof d[k] === "undefined") return def;
        return d[k];
    }

    return xkcd;

 }
	Week	old lang syne
	2004-01-04 - 2004-01-10	0
	2004-01-11 - 2004-01-17	0
	2004-01-18 - 2004-01-24	0
	2004-01-25 - 2004-01-31	0
	2004-02-01 - 2004-02-07	0
	2004-02-08 - 2004-02-14	0
	2004-02-15 - 2004-02-21	0
	2004-02-22 - 2004-02-28	0
	2004-02-29 - 2004-03-06	0
	2004-03-07 - 2004-03-13	0
	2004-03-14 - 2004-03-20	0
	2004-03-21 - 2004-03-27	0
	2004-03-28 - 2004-04-03	0
	2004-04-04 - 2004-04-10	0
	2004-04-11 - 2004-04-17	0
	2004-04-18 - 2004-04-24	0
	2004-04-25 - 2004-05-01	0
	2004-05-02 - 2004-05-08	0
	2004-05-09 - 2004-05-15	0
	2004-05-16 - 2004-05-22	0
	2004-05-23 - 2004-05-29	0
	2004-05-30 - 2004-06-05	0
	2004-06-06 - 2004-06-12	0
	2004-06-13 - 2004-06-19	0
	2004-06-20 - 2004-06-26	0
	2004-06-27 - 2004-07-03	0
	2004-07-04 - 2004-07-10	0
	2004-07-11 - 2004-07-17	0
	2004-07-18 - 2004-07-24	0
	2004-07-25 - 2004-07-31	0
	2004-08-01 - 2004-08-07	0
	2004-08-08 - 2004-08-14	0
	2004-08-15 - 2004-08-21	0
	2004-08-22 - 2004-08-28	0
	2004-08-29 - 2004-09-04	0
	2004-09-05 - 2004-09-11	7
	2004-09-12 - 2004-09-18	0
	2004-09-19 - 2004-09-25	0
	2004-09-26 - 2004-10-02	0
	2004-10-03 - 2004-10-09	0
	2004-10-10 - 2004-10-16	0
	2004-10-17 - 2004-10-23	0
	2004-10-24 - 2004-10-30	0
	2004-10-31 - 2004-11-06	0
	2004-11-07 - 2004-11-13	10
	2004-11-14 - 2004-11-20	10
	2004-11-21 - 2004-11-27	11
	2004-11-28 - 2004-12-04	14
	2004-12-05 - 2004-12-11	16
	2004-12-12 - 2004-12-18	12
	2004-12-19 - 2004-12-25	30
	2004-12-26 - 2005-01-01	68
	2005-01-02 - 2005-01-08	9
	2005-01-09 - 2005-01-15	5
	2005-01-16 - 2005-01-22	5
	2005-01-23 - 2005-01-29	5
	2005-01-30 - 2005-02-05	0
	2005-02-06 - 2005-02-12	0
	2005-02-13 - 2005-02-19	0
	2005-02-20 - 2005-02-26	0
	2005-02-27 - 2005-03-05	0
	2005-03-06 - 2005-03-12	0
	2005-03-13 - 2005-03-19	0
	2005-03-20 - 2005-03-26	0
	2005-03-27 - 2005-04-02	0
	2005-04-03 - 2005-04-09	0
	2005-04-10 - 2005-04-16	0
	2005-04-17 - 2005-04-23	0
	2005-04-24 - 2005-04-30	0
	2005-05-01 - 2005-05-07	0
	2005-05-08 - 2005-05-14	0
	2005-05-15 - 2005-05-21	0
	2005-05-22 - 2005-05-28	0
	2005-05-29 - 2005-06-04	0
	2005-06-05 - 2005-06-11	0
	2005-06-12 - 2005-06-18	0
	2005-06-19 - 2005-06-25	0
	2005-06-26 - 2005-07-02	0
	2005-07-03 - 2005-07-09	0
	2005-07-10 - 2005-07-16	0
	2005-07-17 - 2005-07-23	0
	2005-07-24 - 2005-07-30	0
	2005-07-31 - 2005-08-06	0
	2005-08-07 - 2005-08-13	0
	2005-08-14 - 2005-08-20	0
	2005-08-21 - 2005-08-27	0
	2005-08-28 - 2005-09-03	0
	2005-09-04 - 2005-09-10	0
	2005-09-11 - 2005-09-17	0
	2005-09-18 - 2005-09-24	4
	2005-09-25 - 2005-10-01	4
	2005-10-02 - 2005-10-08	4
	2005-10-09 - 2005-10-15	5
	2005-10-16 - 2005-10-22	5
	2005-10-23 - 2005-10-29	5
	2005-10-30 - 2005-11-05	5
	2005-11-06 - 2005-11-12	5
	2005-11-13 - 2005-11-19	5
	2005-11-20 - 2005-11-26	12
	2005-11-27 - 2005-12-03	9
	2005-12-04 - 2005-12-10	17
	2005-12-11 - 2005-12-17	18
	2005-12-18 - 2005-12-24	29
	2005-12-25 - 2005-12-31	62
	2006-01-01 - 2006-01-07	25
	2006-01-08 - 2006-01-14	4
	2006-01-15 - 2006-01-21	3
	2006-01-22 - 2006-01-28	3
	2006-01-29 - 2006-02-04	4
	2006-02-05 - 2006-02-11	0
	2006-02-12 - 2006-02-18	0
	2006-02-19 - 2006-02-25	0
	2006-02-26 - 2006-03-04	0
	2006-03-05 - 2006-03-11	0
	2006-03-12 - 2006-03-18	0
	2006-03-19 - 2006-03-25	0
	2006-03-26 - 2006-04-01	0
	2006-04-02 - 2006-04-08	0
	2006-04-09 - 2006-04-15	0
	2006-04-16 - 2006-04-22	0
	2006-04-23 - 2006-04-29	3
	2006-04-30 - 2006-05-06	0
	2006-05-07 - 2006-05-13	0
	2006-05-14 - 2006-05-20	0
	2006-05-21 - 2006-05-27	0
	2006-05-28 - 2006-06-03	0
	2006-06-04 - 2006-06-10	4
	2006-06-11 - 2006-06-17	0
	2006-06-18 - 2006-06-24	0
	2006-06-25 - 2006-07-01	0
	2006-07-02 - 2006-07-08	0
	2006-07-09 - 2006-07-15	0
	2006-07-16 - 2006-07-22	0
	2006-07-23 - 2006-07-29	0
	2006-07-30 - 2006-08-05	0
	2006-08-06 - 2006-08-12	0
	2006-08-13 - 2006-08-19	0
	2006-08-20 - 2006-08-26	0
	2006-08-27 - 2006-09-02	0
	2006-09-03 - 2006-09-09	0
	2006-09-10 - 2006-09-16	4
	2006-09-17 - 2006-09-23	4
	2006-09-24 - 2006-09-30	4
	2006-10-01 - 2006-10-07	4
	2006-10-08 - 2006-10-14	4
	2006-10-15 - 2006-10-21	4
	2006-10-22 - 2006-10-28	4
	2006-10-29 - 2006-11-04	5
	2006-11-05 - 2006-11-11	5
	2006-11-12 - 2006-11-18	5
	2006-11-19 - 2006-11-25	6
	2006-11-26 - 2006-12-02	9
	2006-12-03 - 2006-12-09	19
	2006-12-10 - 2006-12-16	16
	2006-12-17 - 2006-12-23	23
	2006-12-24 - 2006-12-30	38
	2006-12-31 - 2007-01-06	55
	2007-01-07 - 2007-01-13	4
	2007-01-14 - 2007-01-20	3
	2007-01-21 - 2007-01-27	5
	2007-01-28 - 2007-02-03	2
	2007-02-04 - 2007-02-10	3
	2007-02-11 - 2007-02-17	2
	2007-02-18 - 2007-02-24	2
	2007-02-25 - 2007-03-03	3
	2007-03-04 - 2007-03-10	3
	2007-03-11 - 2007-03-17	3
	2007-03-18 - 2007-03-24	3
	2007-03-25 - 2007-03-31	3
	2007-04-01 - 2007-04-07	2
	2007-04-08 - 2007-04-14	2
	2007-04-15 - 2007-04-21	2
	2007-04-22 - 2007-04-28	2
	2007-04-29 - 2007-05-05	3
	2007-05-06 - 2007-05-12	2
	2007-05-13 - 2007-05-19	2
	2007-05-20 - 2007-05-26	2
	2007-05-27 - 2007-06-02	2
	2007-06-03 - 2007-06-09	2
	2007-06-10 - 2007-06-16	2
	2007-06-17 - 2007-06-23	2
	2007-06-24 - 2007-06-30	2
	2007-07-01 - 2007-07-07	3
	2007-07-08 - 2007-07-14	3
	2007-07-15 - 2007-07-21	4
	2007-07-22 - 2007-07-28	4
	2007-07-29 - 2007-08-04	3
	2007-08-05 - 2007-08-11	3
	2007-08-12 - 2007-08-18	2
	2007-08-19 - 2007-08-25	2
	2007-08-26 - 2007-09-01	2
	2007-09-02 - 2007-09-08	2
	2007-09-09 - 2007-09-15	2
	2007-09-16 - 2007-09-22	2
	2007-09-23 - 2007-09-29	2
	2007-09-30 - 2007-10-06	2
	2007-10-07 - 2007-10-13	2
	2007-10-14 - 2007-10-20	3
	2007-10-21 - 2007-10-27	2
	2007-10-28 - 2007-11-03	3
	2007-11-04 - 2007-11-10	2
	2007-11-11 - 2007-11-17	4
	2007-11-18 - 2007-11-24	7
	2007-11-25 - 2007-12-01	10
	2007-12-02 - 2007-12-08	12
	2007-12-09 - 2007-12-15	12
	2007-12-16 - 2007-12-22	94
	2007-12-23 - 2007-12-29	41
	2007-12-30 - 2008-01-05	68
	2008-01-06 - 2008-01-12	6
	2008-01-13 - 2008-01-19	5
	2008-01-20 - 2008-01-26	4
	2008-01-27 - 2008-02-02	2
	2008-02-03 - 2008-02-09	2
	2008-02-10 - 2008-02-16	3
	2008-02-17 - 2008-02-23	3
	2008-02-24 - 2008-03-01	3
	2008-03-02 - 2008-03-08	2
	2008-03-09 - 2008-03-15	2
	2008-03-16 - 2008-03-22	4
	2008-03-23 - 2008-03-29	3
	2008-03-30 - 2008-04-05	3
	2008-04-06 - 2008-04-12	2
	2008-04-13 - 2008-04-19	2
	2008-04-20 - 2008-04-26	2
	2008-04-27 - 2008-05-03	2
	2008-05-04 - 2008-05-10	2
	2008-05-11 - 2008-05-17	2
	2008-05-18 - 2008-05-24	1
	2008-05-25 - 2008-05-31	1
	2008-06-01 - 2008-06-07	3
	2008-06-08 - 2008-06-14	2
	2008-06-15 - 2008-06-21	3
	2008-06-22 - 2008-06-28	2
	2008-06-29 - 2008-07-05	2
	2008-07-06 - 2008-07-12	2
	2008-07-13 - 2008-07-19	2
	2008-07-20 - 2008-07-26	2
	2008-07-27 - 2008-08-02	1
	2008-08-03 - 2008-08-09	2
	2008-08-10 - 2008-08-16	3
	2008-08-17 - 2008-08-23	3
	2008-08-24 - 2008-08-30	2
	2008-08-31 - 2008-09-06	1
	2008-09-07 - 2008-09-13	3
	2008-09-14 - 2008-09-20	3
	2008-09-21 - 2008-09-27	2
	2008-09-28 - 2008-10-04	3
	2008-10-05 - 2008-10-11	2
	2008-10-12 - 2008-10-18	3
	2008-10-19 - 2008-10-25	3
	2008-10-26 - 2008-11-01	2
	2008-11-02 - 2008-11-08	3
	2008-11-09 - 2008-11-15	4
	2008-11-16 - 2008-11-22	5
	2008-11-23 - 2008-11-29	8
	2008-11-30 - 2008-12-06	12
	2008-12-07 - 2008-12-13	17
	2008-12-14 - 2008-12-20	20
	2008-12-21 - 2008-12-27	25
	2008-12-28 - 2009-01-03	78
	2009-01-04 - 2009-01-10	7
	2009-01-11 - 2009-01-17	3
	2009-01-18 - 2009-01-24	3
	2009-01-25 - 2009-01-31	3
	2009-02-01 - 2009-02-07	3
	2009-02-08 - 2009-02-14	3
	2009-02-15 - 2009-02-21	2
	2009-02-22 - 2009-02-28	2
	2009-03-01 - 2009-03-07	2
	2009-03-08 - 2009-03-14	1
	2009-03-15 - 2009-03-21	1
	2009-03-22 - 2009-03-28	1
	2009-03-29 - 2009-04-04	2
	2009-04-05 - 2009-04-11	2
	2009-04-12 - 2009-04-18	2
	2009-04-19 - 2009-04-25	3
	2009-04-26 - 2009-05-02	1
	2009-05-03 - 2009-05-09	2
	2009-05-10 - 2009-05-16	1
	2009-05-17 - 2009-05-23	2
	2009-05-24 - 2009-05-30	1
	2009-05-31 - 2009-06-06	2
	2009-06-07 - 2009-06-13	3
	2009-06-14 - 2009-06-20	2
	2009-06-21 - 2009-06-27	2
	2009-06-28 - 2009-07-04	2
	2009-07-05 - 2009-07-11	2
	2009-07-12 - 2009-07-18	2
	2009-07-19 - 2009-07-25	2
	2009-07-26 - 2009-08-01	2
	2009-08-02 - 2009-08-08	2
	2009-08-09 - 2009-08-15	2
	2009-08-16 - 2009-08-22	2
	2009-08-23 - 2009-08-29	2
	2009-08-30 - 2009-09-05	3
	2009-09-06 - 2009-09-12	4
	2009-09-13 - 2009-09-19	2
	2009-09-20 - 2009-09-26	2
	2009-09-27 - 2009-10-03	2
	2009-10-04 - 2009-10-10	3
	2009-10-11 - 2009-10-17	3
	2009-10-18 - 2009-10-24	2
	2009-10-25 - 2009-10-31	2
	2009-11-01 - 2009-11-07	4
	2009-11-08 - 2009-11-14	4
	2009-11-15 - 2009-11-21	4
	2009-11-22 - 2009-11-28	8
	2009-11-29 - 2009-12-05	13
	2009-12-06 - 2009-12-12	15
	2009-12-13 - 2009-12-19	21
	2009-12-20 - 2009-12-26	25
	2009-12-27 - 2010-01-02	100
	2010-01-03 - 2010-01-09	10
	2010-01-10 - 2010-01-16	4
	2010-01-17 - 2010-01-23	4
	2010-01-24 - 2010-01-30	3
	2010-01-31 - 2010-02-06	2
	2010-02-07 - 2010-02-13	3
	2010-02-14 - 2010-02-20	2
	2010-02-21 - 2010-02-27	2
	2010-02-28 - 2010-03-06	2
	2010-03-07 - 2010-03-13	3
	2010-03-14 - 2010-03-20	3
	2010-03-21 - 2010-03-27	2
	2010-03-28 - 2010-04-03	2
	2010-04-04 - 2010-04-10	2
	2010-04-11 - 2010-04-17	2
	2010-04-18 - 2010-04-24	2
	2010-04-25 - 2010-05-01	2
	2010-05-02 - 2010-05-08	2
	2010-05-09 - 2010-05-15	2
	2010-05-16 - 2010-05-22	2
	2010-05-23 - 2010-05-29	3
	2010-05-30 - 2010-06-05	3
	2010-06-06 - 2010-06-12	1
	2010-06-13 - 2010-06-19	2
	2010-06-20 - 2010-06-26	2
	2010-06-27 - 2010-07-03	1
	2010-07-04 - 2010-07-10	2
	2010-07-11 - 2010-07-17	1
	2010-07-18 - 2010-07-24	2
	2010-07-25 - 2010-07-31	2
	2010-08-01 - 2010-08-07	2
	2010-08-08 - 2010-08-14	2
	2010-08-15 - 2010-08-21	2
	2010-08-22 - 2010-08-28	2
	2010-08-29 - 2010-09-04	3
	2010-09-05 - 2010-09-11	3
	2010-09-12 - 2010-09-18	2
	2010-09-19 - 2010-09-25	2
	2010-09-26 - 2010-10-02	2
	2010-10-03 - 2010-10-09	2
	2010-10-10 - 2010-10-16	3
	2010-10-17 - 2010-10-23	2
	2010-10-24 - 2010-10-30	3
	2010-10-31 - 2010-11-06	3
	2010-11-07 - 2010-11-13	3
	2010-11-14 - 2010-11-20	5
	2010-11-21 - 2010-11-27	6
	2010-11-28 - 2010-12-04	11
	2010-12-05 - 2010-12-11	14
	2010-12-12 - 2010-12-18	16
	2010-12-19 - 2010-12-25	26
	2010-12-26 - 2011-01-01	93
	2011-01-02 - 2011-01-08	14
	2011-01-09 - 2011-01-15	6
	2011-01-16 - 2011-01-22	3
	2011-01-23 - 2011-01-29	5
	2011-01-30 - 2011-02-05	4
	2011-02-06 - 2011-02-12	3
	2011-02-13 - 2011-02-19	4
	2011-02-20 - 2011-02-26	3
	2011-02-27 - 2011-03-05	3
	2011-03-06 - 2011-03-12	3
	2011-03-13 - 2011-03-19	2
	2011-03-20 - 2011-03-26	2
	2011-03-27 - 2011-04-02	2
	2011-04-03 - 2011-04-09	3
	2011-04-10 - 2011-04-16	1
	2011-04-17 - 2011-04-23	2
	2011-04-24 - 2011-04-30	2
	2011-05-01 - 2011-05-07	2
	2011-05-08 - 2011-05-14	1
	2011-05-15 - 2011-05-21	3
	2011-05-22 - 2011-05-28	2
	2011-05-29 - 2011-06-04	2
	2011-06-05 - 2011-06-11	2
	2011-06-12 - 2011-06-18	2
	2011-06-19 - 2011-06-25	2
	2011-06-26 - 2011-07-02	2
	2011-07-03 - 2011-07-09	1
	2011-07-10 - 2011-07-16	2
	2011-07-17 - 2011-07-23	2
	2011-07-24 - 2011-07-30	2
	2011-07-31 - 2011-08-06	2
	2011-08-07 - 2011-08-13	1
	2011-08-14 - 2011-08-20	2
	2011-08-21 - 2011-08-27	3
	2011-08-28 - 2011-09-03	2
	2011-09-04 - 2011-09-10	5
	2011-09-11 - 2011-09-17	4
	2011-09-18 - 2011-09-24	2
	2011-09-25 - 2011-10-01	2
	2011-10-02 - 2011-10-08	3
	2011-10-09 - 2011-10-15	2
	2011-10-16 - 2011-10-22	3
	2011-10-23 - 2011-10-29	3
	2011-10-30 - 2011-11-05	4
	2011-11-06 - 2011-11-12	4
	2011-11-13 - 2011-11-19	4
	2011-11-20 - 2011-11-26	6
	2011-11-27 - 2011-12-03	8
	2011-12-04 - 2011-12-10	13
	2011-12-11 - 2011-12-17	16
	2011-12-18 - 2011-12-24	20
	2011-12-25 - 2011-12-31	65
	2012-01-01 - 2012-01-07	46
	2012-01-08 - 2012-01-14	5
	2012-01-15 - 2012-01-21	5
	2012-01-22 - 2012-01-28	5
	2012-01-29 - 2012-02-04	4
	2012-02-05 - 2012-02-11	4
	2012-02-12 - 2012-02-18	3
	2012-02-19 - 2012-02-25	3
	2012-02-26 - 2012-03-03	3
	2012-03-04 - 2012-03-10	3
	2012-03-11 - 2012-03-17	2
	2012-03-18 - 2012-03-24	3
	2012-03-25 - 2012-03-31	2
	2012-04-01 - 2012-04-07	2
	2012-04-08 - 2012-04-14	2
	2012-04-15 - 2012-04-21	2
	2012-04-22 - 2012-04-28	2
	2012-04-29 - 2012-05-05	2
	2012-05-06 - 2012-05-12	2
	2012-05-13 - 2012-05-19	2
	2012-05-20 - 2012-05-26	2
	2012-05-27 - 2012-06-02	2
	2012-06-03 - 2012-06-09	2
	2012-06-10 - 2012-06-16	2
	2012-06-17 - 2012-06-23	2
	2012-06-24 - 2012-06-30	2
	2012-07-01 - 2012-07-07	2
	2012-07-08 - 2012-07-14	2
	2012-07-15 - 2012-07-21	2
	2012-07-22 - 2012-07-28	2
	2012-07-29 - 2012-08-04	2
	2012-08-05 - 2012-08-11	2
	2012-08-12 - 2012-08-18	2
	2012-08-19 - 2012-08-25	2
	2012-08-26 - 2012-09-01	2
	2012-09-02 - 2012-09-08	3
	2012-09-09 - 2012-09-15	2
	2012-09-16 - 2012-09-22	2
	2012-09-23 - 2012-09-29	2
	2012-09-30 - 2012-10-06	2
	2012-10-07 - 2012-10-13	2
	2012-10-14 - 2012-10-20	2
	2012-10-21 - 2012-10-27	2
	2012-10-28 - 2012-11-03	3
	2012-11-04 - 2012-11-10	3
	2012-11-11 - 2012-11-17	4
	2012-11-18 - 2012-11-24	5
	2012-11-25 - 2012-12-01	9
	2012-12-02 - 2012-12-08	11
	2012-12-09 - 2012-12-15	12
	2012-12-16 - 2012-12-22	17
	2012-12-23 - 2012-12-29	27
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Happy New Year everybody</title>

	<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
	<script src="xkcd.js"></script>

	<style>

	@font-face {
	font-family: "xkcd";
	src: url('http://antiyawn.com/uploads/Humor-Sans.ttf');
	}

	body {
	font-family: "xkcd", sans-serif;
	font-size: 16px;
	color: #333;
	text-align: center;
	margin-top: 75px;
	}

	text.title {
	font-size: 20px;
	}

	path {
	fill: none;
	stroke-width: 2.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	}

	path.axis {
	stroke: black;
	}

	path.bgline {
	stroke: white;
	stroke-width: 6px;
	}

	</style>

	</head>
	<body>

	<script>

	// Generate some data.
	d3.csv('data.csv', function(data) {

	var pops = data.map(function(d, i) {
	var value = {
	x: i,
	y: +d['old lang syne']
	}

	return value
	})
	console.log(pops)

	// Build the plot.
	var plot = xkcdplot();
	plot("body");

	// Add the lines.
	plot.plot(pops);

	// Render the image.
	plot.xlim([0,500]).draw();
	});
	</script>

	</body>
	</html>
	function xkcdplot() {

	// Default parameters.
	var width = 700,
	height = 380,
	margin = 20,
	arrowSize = 12,
	arrowAspect = 0.4,
	arrowOffset = 6,
	magnitude = 0.003,
	xlabel = "Weeks from 2004 to 2012",
	ylabel = "Searches for Auld Lang Syne",
	title = "Happy new year",
	xlim,
	ylim;

	// Plot elements.
	var el,
	xscale = d3.scale.linear(),
	yscale = d3.scale.linear();

	// Plotting functions.
	var elements = [];

	// The XKCD object itself.
	var xkcd = function (nm) {
	el = d3.select(nm).append("svg")
	.attr("width", width + 2 * margin)
	.attr("height", height + 2 * margin)
	.append("g")
	.attr("transform", "translate(" + margin + ", "
	+ margin + ")");
	return xkcd;
	};

	// Getters and setters.
	xkcd.xlim = function () {
	if (!arguments.length) return xlim;
	xlim = arguments[0];
	return xkcd;
	};

	// Do the render.
	xkcd.draw = function () {
	// Set the axes limits.
	xscale.domain(xlim).range([0, width]);
	yscale.domain(ylim).range([height, 0]);

	// Compute the zero points where the axes will be drawn.
	var x0 = xscale(0),
	y0 = yscale(0);

	// Draw the axes.
	var axis = d3.svg.line().interpolate(xinterp);
	el.selectAll(".axis").remove();
	el.append("svg:path")
	.attr("class", "x axis")
	.attr("d", axis([[0, y0], [width, y0]]));
	el.append("svg:path")
	.attr("class", "y axis")
	.attr("d", axis([[x0, 0], [x0, height]]));

	// Laboriously draw some arrows at the ends of the axes.
	var aa = arrowAspect * arrowSize,
	o = arrowOffset,
	s = arrowSize;
	el.append("svg:path")
	.attr("class", "x axis arrow")
	.attr("d", axis([[width - s + o, y0 + aa], [width + o, y0], [width - s + o, y0 - aa]]));
	el.append("svg:path")
	.attr("class", "x axis arrow")
	.attr("d", axis([[s - o, y0 + aa], [-o, y0], [s - o, y0 - aa]]));
	el.append("svg:path")
	.attr("class", "y axis arrow")
	.attr("d", axis([[x0 + aa, s - o], [x0, -o], [x0 - aa, s - o]]));
	el.append("svg:path")
	.attr("class", "y axis arrow")
	.attr("d", axis([[x0 + aa, height - s + o], [x0, height + o], [x0 - aa, height - s + o]]));

	for (var i = 0, l = elements.length; i < l; ++i) {
	var e = elements[i];
	e.func(e.data, e.x, e.y, e.opts);
	}

	// Add some axes labels.
	el.append("text").attr("class", "x label")
	.attr("text-anchor", "end")
	.attr("x", width - s)
	.attr("y", y0 + aa)
	.attr("dy", ".75em")
	.text(xlabel);
	el.append("text").attr("class", "y label")
	.attr("text-anchor", "end")
	.attr("x", aa)
	.attr("y", x0)
	.attr("dy", "-.75em")
	.attr("transform", "rotate(-90)")
	.text(ylabel);

	// And a title.
	el.append("text").attr("class", "title")
	.attr("text-anchor", "end")
	.attr("x", width)
	.attr("y", 0)
	.text(title);

	return xkcd;
	};

	// Adding plot elements.
	xkcd.plot = function (data, opts) {
	var x = function (d) { return d.x; },
	y = function (d) { return d.y; },
	cx = function (d) { return xscale(x(d)); },
	cy = function (d) { return yscale(y(d)); },
	xl = d3.extent(data, x),
	yl = d3.extent(data, y);

	// Rescale the axes.
	xlim = xlim \|\| xl;
	xlim[0] = Math.min(xlim[0], xl[0]);
	xlim[1] = Math.max(xlim[1], xl[1]);
	ylim = ylim \|\| yl;
	ylim[0] = Math.min(ylim[0], yl[0]);
	ylim[1] = Math.max(ylim[1], yl[1]);

	// Add the plotting function.
	elements.push({
	data: data,
	func: lineplot,
	x: cx,
	y: cy,
	opts: opts
	});

	return xkcd;
	};

	// Plot styles.
	function lineplot(data, x, y, opts) {
	var line = d3.svg.line().x(x).y(y).interpolate(xinterp),
	bgline = d3.svg.line().x(x).y(y),
	strokeWidth = _get(opts, "stroke-width", 3),
	color = _get(opts, "stroke", "steelblue");
	el.append("svg:path").attr("d", bgline(data))
	.style("stroke", "white")
	.style("stroke-width", 2 * strokeWidth + "px")
	.style("fill", "none")
	.attr("class", "bgline");
	el.append("svg:path").attr("d", line(data))
	.style("stroke", color)
	.style("stroke-width", strokeWidth + "px")
	.style("fill", "none");
	};

	// XKCD-style line interpolation. Roughly based on:
	// jakevdp.github.com/blog/2012/10/07/xkcd-style-plots-in-matplotlib
	function xinterp (points) {
	// Scale the data.
	var f = [xscale(xlim[1]) - xscale(xlim[0]),
	yscale(ylim[1]) - yscale(ylim[0])],
	z = [xscale(xlim[0]),
	yscale(ylim[0])],
	scaled = points.map(function (p) {
	return [(p[0] - z[0]) / f[0], (p[1] - z[1]) / f[1]];
	});

	// Compute the distance along the path using a map-reduce.
	var dists = scaled.map(function (d, i) {
	if (i == 0) return 0.0;
	var dx = d[0] - scaled[i - 1][0],
	dy = d[1] - scaled[i - 1][1];
	return Math.sqrt(dx * dx + dy * dy);
	}),
	dist = dists.reduce(function (curr, d) { return d + curr; }, 0.0);

	// Choose the number of interpolation points based on this distance.
	var N = Math.round(200 * dist);

	// Re-sample the line.
	var resampled = [];
	dists.map(function (d, i) {
	if (i == 0) return;
	var n = Math.max(3, Math.round(d / dist * N)),
	spline = d3.interpolate(scaled[i - 1][1], scaled[i][1]),
	delta = (scaled[i][0] - scaled[i - 1][0]) / (n - 1);
	for (var j = 0, x = scaled[i - 1][0]; j < n; ++j, x += delta)
	resampled.push([x, spline(j / (n - 1))]);
	});

	// Compute the gradients.
	var gradients = resampled.map(function (a, i, d) {
	if (i == 0) return [d[1][0] - d[0][0], d[1][1] - d[0][1]];
	if (i == resampled.length - 1)
	return [d[i][0] - d[i - 1][0], d[i][1] - d[i - 1][1]];
	return [0.5 * (d[i + 1][0] - d[i - 1][0]),
	0.5 * (d[i + 1][1] - d[i - 1][1])];
	});

	// Normalize the gradient vectors to be unit vectors.
	gradients = gradients.map(function (d) {
	var len = Math.sqrt(d[0] * d[0] + d[1] * d[1]);
	return [d[0] / len, d[1] / len];
	});

	// Generate some perturbations.
	var perturbations = smooth(resampled.map(d3.random.normal()), 3);

	// Add in the perturbations and re-scale the re-sampled curve.
	var result = resampled.map(function (d, i) {
	var p = perturbations[i],
	g = gradients[i];
	return [(d[0] + magnitude * g[1] * p) * f[0] + z[0],
	(d[1] - magnitude * g[0] * p) * f[1] + z[1]];
	});

	return result.join("L");
	}

	// Smooth some data with a given window size.
	function smooth(d, w) {
	var result = [];
	for (var i = 0, l = d.length; i < l; ++i) {
	var mn = Math.max(0, i - 5 * w),
	mx = Math.min(d.length - 1, i + 5 * w),
	s = 0.0;
	result[i] = 0.0;
	for (var j = mn; j < mx; ++j) {
	var wd = Math.exp(-0.5 * (i - j) * (i - j) / w / w);
	result[i] += wd * d[j];
	s += wd;
	}
	result[i] /= s;
	}
	return result;
	}

	// Get a value from an object or return a default if that doesn't work.
	function _get(d, k, def) {
	if (typeof d === "undefined") return def;
	if (typeof d[k] === "undefined") return def;
	return d[k];
	}

	return xkcd;

	}