JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
 <html lang="en"> 
 <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">

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

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        .y1 {
            fill: white;
            stroke: orange;
            stroke-width: 1.5px;
        }

        .y2 {
            fill: white;
            stroke: red;
            stroke-width: 1.5px;
        }

        .y3 {
            fill: white;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

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

        div.tooltip {
            position: absolute;
            text-align: center;
            width: 50px;
            height: 10px;
            padding: 5px;
            font: 10px sans-serif;
            background: whiteSmoke;
            border: solid 1px #aaa;
            pointer-events: none;
            box-shadow: 2px 2px 1px #888;
        }

        .legend1 {
            width:45px;
            height: 5px;
            padding: 0px;
            overflow: auto;
            font: 10px sans-serif;
            background: yellow;
            border: 1px solid #bbb;
            background-color: #cccccc;
            box-shadow: 2px 2px 1px #888;
        }

        .title {
            font: 13px sans-serif;
        }
        
        .legend {
            overflow: auto;
            height: 200px;  
            width: 50px;  
        }
     
        .chart {
            float: left;
        }

    </style>
</head>
<body>
    <div id="chart" class="chart"></div>
    <div id="legend" class="legend"></div>
</body>
    <script type="text/javascript">

//Width and height
var w = 500;
var h = 500;
var padding = 50;

var now =...