JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bl.ocks.org/d/3883195/data.tsv"></script>
<div id="chart1"></div>
<!-- Need to load this TSV file in order to see the below code working. -->
<!-- http://bl.ocks.org/d/3883195/data.tsv -->

CSS

body {
  font: 10px sans-serif;
}

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

.area {
  fill: steelblue;
}

.area1 {
  fill: black;
}

JavaScript

var margin = {
        top : 20,
        right : 20,
        bottom : 30,
        left : 50
    }, width = 700 - margin.left - margin.right, height = 400 - margin.top
            - margin.bottom;

    var yHeight = height / 2;
    var parseDate = d3.time.format("%d-%b-%y").parse;

    var svg = d3.select("#chart1").append("svg").attr("width",
            width + margin.left + margin.right).attr("height",
            height + margin.top + margin.bottom).append("g").attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");
        
    d3.tsv("data.tsv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
        d.close = +d.close;
        });
        
    var x = d3.time.scale().range([ 0, width ]);
    
    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    x.domain(d3.extent(data, function(d) {
        return d.date;
    }));
    
    svg.append("g").attr("class", "x axis").attr("transform",
            "translate(0," + yHeight + ")").call(xAxis);    
    
    var y = d3.scale.linear().range([ yHeight, 0 ]);

    var yAxis = d3.svg.axis().scale(y).orient("left");
        
    y.domain([ 0, d3.max(data, function(d) {
        return d.close;
    }) ]);
    
    var area = d3.svg.area().x(function(d) {
        return x(d.date);
    }).y0(yHeight).y1(function(d) {
        return y(d.close);
    });

    svg.append("path").datum(data).attr("transform",
            "translate(" + 0 + "," + yHeight + ")").attr("top", height).attr("class", "area").attr("d", area);


    svg.append("g").attr("class", "y axis").call(yAxis).append("text")
    .attr("transform", "rotate(-90)").attr("y", 6).attr("dy",
            ".71em").style("text-anchor", "end").text("Test");    
    
    var y1 = d3.scale.linear().range([ yHeight , height ]);

    var y1Axis = d3.svg.axis().scale(y1).orient("left");

    y1.domain([ 0, d3.max(data, function(d) {
        return d.close;
    }) ]);        
    
    var area1...