JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

body {
            font-size: 10px;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            fill: #8C8C8C;
            text-align: center;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #C4C4C4;
            /* shape-rendering: crispEdges; */
        }

        .line {
            stroke: #000;
            stroke-width: 1.5px;
            fill: none;
        }

        .lineDots {
            fill: #21825C;
        }

JavaScript

///////////////////////////////////////////////////
    /////////////// Create the data ///////////////////
    ///////////////////////////////////////////////////

    //Completely random dataset
    var dataset = [
        { date: "2016-01-01", number: 100},
        { date: "2016-01-02", number: 90},
        { date: "2016-01-03", number: 300},
        { date: "2016-01-04", number: 600},
        { date: "2016-01-05", number: 400},
        { date: "2016-01-06", number: 200},
        { date: "2016-01-07", number: 100}
      
    ]

    //Parse the date
    var parseDate = d3.time.format("%Y-%m-%d").parse;
    dataset.forEach( function(d) {
        d.date = parseDate(d.date);
    });

    ///////////////////////////////////////////////////
    //////////////// Set the Scales ///////////////////
    ///////////////////////////////////////////////////

    //Set the dimensions of the chart
    var margin = {top: 30, right: 30, bottom: 30, left: 50},
            width = 900 - margin.left - margin.right,
            height = 400 - margin.top - margin.bottom;

    //Set the x and y scale ranges
    var xScale = d3.time.scale()
            .domain(d3.extent(dataset, function(d) { return d.date; }))
            .range([0, width]);

    var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d.number; }) * 1.1])
            .range([height, 0]);

    //Define the axes
    var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(6);

    var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(5);

    //Initiate the line function
    var lineFunction = 
    d3.svg
    .line()
    .interpolate("monotone")
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.number); });

    //Initiate the area line function
    var areaFunction = d3.svg.area()
            .interpolate("monotone")
            .x(function(d) { return...