JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="page-header">
</div>
<div class="panel panel-default">
  <div id="curValue">100.0</div>
  <div id="lastUpdated">Last Updated: Today</div>
  <div id="chart"></div>
</div>

<pre id="data"...

CSS

body {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
}

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

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}

.overlay {
  background-color: blue;
}

tspan {
  background-color: green;
  fill: red;
  font-weight: bold
}

.area {							
    fill: url(#area-gradient);					
    stroke-width: 0px;			
}

JavaScript

function doAll() {
  var margin = {
      top: 20,
      right: 50,
      bottom: 30,
      left: 50
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  var parseDate = d3.timeFormat("%d-%b-%y").parse,
    bisectDate = d3.bisector(function(d) {
      return d.index_date;
    }).left,
    formatValue = d3.format(",.2f"),
    formatCurrency = function(d) {
      return "$" + formatValue(d);
    };

  var x = d3.scaleTime()
    .range([0, width]);

  var y = d3.scaleLinear()
    .range([height, 0]);

  var xAxis = d3.axisBottom()
    .scale(x);

  var yAxis = d3.axisLeft()
    .scale(y);

  // Define the area fill
  var area = d3.area()
    .x(function(d) { return x(d.index_date); })
    .y0(height)
    .y1(function(d) { return y(d.value); });
    
  var line = d3.line()
    .x(function(d) {
      return x(d.index_date);
    })
    .y(function(d) {
      return y(d.value);
    });

  var svg = d3.select("body").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 + ")");

  var data = d3.csvParse(d3.select("pre#data").text());

  data.forEach(function(d) {
    d.index_date = new Date(parseInt(d.index_date));
    d.value = +d.value;
  });

  data.sort(function(a, b) {
    return a.index_date - b.index_date;
  });

  x.domain([data[0].index_date, data[data.length - 1].index_date]);
  y.domain(d3.extent(data, function(d) {
    return d.value;
  }));

  svg.append("linearGradient")
        .attr("id", "area-gradient")
        //.attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", 0).attr("y1", 0)
        .attr("x2", 0).attr("y2", 1)
    .selectAll("stop")
        .data([
            {offset: "0%", color: "navy"},
            {offset: "75%", color: "rgba(0,0,128,0.75)"},
            {offset: "90%", color: "rgba(0,0,128,0.25)"},
            {offset: "100%",...