JSFiddle - React, Tailwind, and code Playground

by jarandaf

CSS

svg {
    background: grey;
}

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

.x.axis path {
  display: none;
}

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

JavaScript

var data = [
    {x: 45, variance: 53.4, min: 55, max: 60},
    {x: 46, variance: 52.2, min: 51, max: 60},
    {x: 47, variance: 52.7, min: 52, max: 60},
    {x: 48, variance: 53.1, min: 53, max: 60},
    {x: 49, variance: 49.0, min: 54, max: 60},
    {x: 50, variance: 50.4, min: 55, max: 60},
    {x: 51, variance: 51.1, min: 56, max: 60},
    {x: 52, variance: 52.3, min: 51, max: 60},
    {x: 53, variance: 54.6, min: 52, max: 60},
    {x: 54, variance: 55.1, min: 53, max: 60},
    {x: 55, variance: 51.5, min: 53, max: 60},
    {x: 56, variance: 53.6, min: 54, max: 60},
    {x: 57, variance: 52.3, min: 55, max: 60}
];

var prepareData = function(data){
    var result = [];
    data.forEach(function(d, i) {
        var x1,y1,x2,y2;
        // 0-length line
        if (i == data.length - 1) {
            x1 = x2 = d.x;
            y1 = y2 = d.variance; 
        } else {
            x1 = d.x;
            x2 = data[i+1].x;
            y1 = d.variance;
            y2 = data[i+1].variance;
        }
        result.push({points: [{x: x1, y: y1}, {x: x2, y: y2}], variance: d.variance, min: d.min, max: d.max});
    });
    return result;
}
                     
data = prepareData(data);

var margin = {
    top: 20,
    left: 20,
    right: 20,
    bottom: 20
}
var width = 500 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

xExtents = d3.extent(data.map(function(d) { return d.points.map(function(d) { return d.x; }); }))

var x = d3.scale.linear()
    .domain([d3.min(xExtents[0]), d3.max(xExtents[1])])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 100])
    .range([height, 0]);

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var lines = svg.selectAll('.line')
   ...