JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

svg{
    border: 1px solid;
}
.panel1, .panel2{
    border: 1px solid;
}
.line{
    fill: none;
    stroke: blue;
}
.line2{
    fill: none;
    stroke: green;
}

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


var formatDate = d3.time.format("%b %Y"),
    chart = timeSeriesChart(
        d3.scale.linear())
      .x(function(d) { return d.date; })
      .y(function(d) { return +d.price; })
.y2(function(d){ return +d.price2; });

  d3.selectAll("div")
    .call(chart);

function timeSeriesChart(xScale) {
  var margin = {top: 20, right: 100, bottom: 20, left: 20},
      width = 760,
      height = 350,
      xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0),
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; },
      yValue2 = function(d) { return d[2]; },
      yScale = d3.scale.linear(),
      yScale2 = d3.scale.linear(),
      yAxis = d3.svg.axis().scale(yScale).orient("right"),
      yAxis2 = d3.svg.axis().scale(yScale2).orient("right"),
      line = d3.svg.line().x(X).y(Y),
      line2 = d3.svg.line().x(X).y(Y2),
      zoom,
      zoom2,
      svg,
      isLog = false;

  function chart(selection) {
    
  selection.each(function() {
        
    var data = [];
    
    for(var i = 0; i < 10000; i++){
        data.push({
            date: i,
            price: getRandomInt(10, 15),
            price2: getRandomInt(195, 220)
        });
    }

      
      // Convert data to standard representation greedily;
      // this is needed for nondeterministic accessors.
      data = data.map(function(d, i) {
        return [xValue.call(data, d, i), yValue.call(data, d, i), yValue2.call(data, d, i)];
      });
      
      // Update the x-scale.
      xScale
          .domain(d3.extent(data, function(d) { return d[0]; }))
          .range([0, width - margin.left - margin.right]);
      
      // Update the y-scale.
      yScale
          .domain([0, d3.max(data, function(d) { return d[1]; })])
          .range([(height/2) - margin.top - margin.bottom, 0]);
      
       // Update the y-scale.
      yScale2
         ...