D3 Examples - XKCD-style plots in d3

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
<head>
    <title>XKCD plots in d3</title>
​
    <script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
    <script src="xkcd.js"></script>
​
<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>
​
    <script>
​
        // 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;
        }
​
        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)};
            });
​
        // 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>
​
    