JSFiddle - React, Tailwind, and code Playground

by amfy10

HTML

<pre...

CSS

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

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

.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 type(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}


var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
        .append("g")
            .attr("width", 960)
            .attr("height", 500)
            //.attr("transform", "rotate(180,"+960/2 +"," + 500/2+")");

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

data.forEach(function(d){
  d.x = +d.x;
  d.y = +d.y;
  return d;    
});
var data2 = {}
data2.x = data.map(function(d){return d.x});
data2.y = data.map(function(d){return d.y});

data3 = data2.x.map(function(d,i){
    var d2={}
    d2.x = d
    d2.y = data2.y[i]
    return d2;
})
console.log(data3)

spec1d = nmr1d().datum(data)
spec1d.brush().style("slim").orient("top");
svg.call(spec1d);