JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<p id="myplot"></p>

CSS

.line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
}
.area {
    fill: #969696;
}
.zeroline {
    stroke: #ccc;
}

JavaScript

function timeSeriesChart() {
    var margin = {
        top: 20,
        right: 20,
        bottom: 40,
        left: 80
    },
        width = 600,
        height = 200,
        xValue = function (d) {
            return d[0];
        },
        yValue = function (d) {
            return d[1];
        },
        xScale = d3.time.scale(),
        yScale = d3.scale.linear(),
        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickSize(6, 0)
        //.ticks(12)
        .tickFormat(function (t) {
            return Math.round(t);
        }),
        yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .tickSize(10, 0)
            .tickFormat(d3.format(".4s"))
            .ticks(5),
        yAxisLabel = "",
        xAxisLabel = "",
        showArea = false,
        area = d3.svg.area()
            .x(X)
            .interpolate("linear"),
        line = d3.svg.line().x(X).y(Y);

    function chart(selection) {
        selection.each(function (data) {

            // Convert data to standard representation greedily;
            // this is needed for nondeterministic accessors.
            data = data.map(function (d, i) {
                return [xValue.call(data, d, i), yValue.call(data, d, i)];
            });

            // Update the x-scale.
            xScale.domain(d3.extent(data, function (d) {
                return d[0];
            }))
                .range([0, width - margin.left - margin.right]);

            // Update the y-scale.
            yScale.domain(d3.extent(data, function (d) {
                return d[1];
            }))
                .range([height - margin.top - margin.bottom, 0]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter().append("svg").append("g");
            if (showArea) {
          ...