JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
The awesome xkcd graph generator by Dan Foreman-Mackey.

More information here: http://dan.iel.fm/xkcd/

Source nicked from http://bl.ocks.org/3914862

-->

CSS

</style>
<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>
<script src="http://dan.iel.fm/xkcd/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;
}

JavaScript

// 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();