JSFiddle - React, Tailwind, and code Playground

by Jammerwoch

HTML

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

CSS

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

        function xkcdplot() {

            // Default parameters.
            var width = 600,
                height = 300,
                margin = 20,
                arrowSize = 12,
                arrowAspect = 0.4,
                arrowOffset = 6,
                magnitude = 0.003,
                xlabel = "Time of Day",
                ylabel = "Awesomeness",
                title = "The most important graph ever made",
                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 + ")");
             ...