JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<pre...

CSS

body {
  font: 10px sans-serif;
}

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

.x.axis path, .x.axis1 path , .x.axis2 path {
  display: none;
}

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

.legend-box {
  cursor: pointer;  
}

#mouse-tracker {
  stroke: #E6E7E8;
  stroke-width: 1px;
}

.hover-line { 
  stroke: #E6E7E8;
  fill: none;
  stroke-width: 1px;
  left: 10px;
  shape-rendering: crispEdges;
  opacity: 1e-6;
}

.hover-text {
  stroke: none;
  font-size: 28px;
  font-weight: bold;
  fill: #000000;
}

.tooltip {
  font-weight: normal;
}

.brush .extent {
  stroke: #FFF;
  shape-rendering: crispEdges;
}

pre {display:none;}

JavaScript

var margin = {top: 20, right: 200, bottom: 100, left: 50},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    margin3 = {top: 20, right: 200, bottom: 100, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom,
    height3 = 1000 - margin3.top - margin3.bottom;

var parseDate = d3.time.format("%d-%b-%Y").parse;
var bisectDate = d3.bisector(function(d) { return d.date; }).left;

var circleR = 3;

var xScale = d3.time.scale()
    .range([0, width]),

    xScale2 = d3.time.scale()
    .range([0, width]); // Duplicate xScale for brushing ref later

var yScale = d3.scale.linear()
    .range([height, 0]),

    yScale2 = d3.scale.linear()
    .range([height3, 0]);

// 40 Custom DDV colors 
var color = d3.scale.ordinal().range(["#48A36D",  "#DFB95C",  "#AA81C5", "#DC647E", "#E2705C", "#80CCB3", "#7FC9BD", "#7FC7C6", "#7EC4CF", "#7FBBCF", "#7FB1CF", "#80A8CE", "#809ECE", "#8897CE", "#8F90CD", "#9788CD", "#9E81CC","#64B98C" , "#B681BE", "#C280B7", "#CE80B0", "#D3779F", "#D76D8F","#72C39B" , "#E05A6D", "#E16167", "#E26962", "#80CEAA", "#E37756", "#E38457", "#E39158", "#E29D58", "#E2AA59", "#E0B15B", "#56AE7C", "#DDC05E", "#DBC75F", "#E3CF6D", "#EAD67C", "#F2DE8A"]);  


var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom"),

    xAxis2 = d3.svg.axis() // xAxis for brush slider
    .scale(xScale2)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left"),

    yAxis2 = d3.svg.axis()
    .scale(yScale2)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.rating); })
    .defined(function(d) { return d.rating; });  // Hiding line value defaults of 0 for missing data

var maxY; // Defined later to update yAxis

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
   ...