XKCD-style plots in d3

<!DOCTYPE HTML>
<html>
<head>
    <title>XKCD plots in d3</title>

<style>

@font-face {
    font-family: "xkcd";
    src: url('https://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>

// 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;
        }

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

// Add the lines.
        plot.plot(data);
        plot.plot(data2, {stroke: "red"});

// Render the image.
        plot.xlim([-1.5, 7.5]).draw();

</script>

</body>
</html>

https://d3js.org/d3.v2.min.js?2.10.0