JSFiddle - React, Tailwind, and code Playground

by amfy10

HTML

<pre...

CSS

pre#data {display:none;}
svg {
  font: 10px sans-serif;
}

.line {
  stroke: steelblue;
  fill:none;
  clip-path: url(#clip);
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

function zoom() {
  y.domain([y2.domain()[0], y2.domain()[1]/zoomer.scale()]);
  console.log(y.domain()[1]);
  focus.select(".line").attr("d", area);
  focus.select(".y.axis").call(yAxis);
}

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());

  dataResample = resample(x.domain());   
  focus.select(".line").datum(dataResample).attr("d", area);
  focus.select(".x.axis").call(xAxis);
}

function brushedmain() {  
  brush.extent(brushmain.extent()); 
  x.domain(brushmain.empty() ? x2.domain() : brushmain.extent());
    
  brushmain.clear();
  focus.select(".brush").call(brushmain);
  context.select(".brush").call(brush);
  
  dataResample = resample(x.domain());
  focus.select(".line").datum(dataResample).attr("d", area);
  focus.select(".x.axis").call(xAxis);
}

function resample2(domain) {
  
  datalen = data.length*(domain[0] - domain[1])/(x2.domain()[0]-x2.domain()[1]);
  datappix = datalen/width;
  dataResamplestart = data.length*(domain[0] - x2.domain()[0])/(x2.domain()[1]-x2.domain()[0]);
  dataResample = data.slice(dataResamplestart, dataResamplestart+datalen).
                  filter(
  function(d, i) { return i % Math.ceil(datappix) == 0; }
);
    console.log(dataResamplestart);
    return dataResample;
}

function resample(domain) {
  datalen = data.length*(domain[0] - domain[1])/(x2.domain()[0]-x2.domain()[1]);
  datappix = datalen/width;
  dataResamplestart = data.length*(domain[0] - x2.domain()[0])/(x2.domain()[1]-x2.domain()[0]);
  dataResample = simplify(data.slice(dataResamplestart, dataResamplestart+datalen), (domain[0] - domain[1])/width);
    return dataResample;
}

function type(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}


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


var x =...