JSFiddle - React, Tailwind, and code Playground

CSS

body{
    width:400px;
    height:300px;
    border: 1px solid black;
}
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

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

JavaScript

var w = 400;
    var h = 300;
//sample data
    var data = [
        {x:1.428, y:0.5, energy:0.458},
        {x:1.428, y:1.191, energy:	0.616},
        {x:1.428, y:1.882, energy:	0.795},
        {x:1.428, y:	2.573, energy:	0.642},
        {x:1.428, y:	3.264, energy:	0.536},
        {x:1.428, y:	3.955, energy:	0.498},
        {x:1.428, y:	4.646, energy:	0.494},
        {x:1.428, y:	5.337, energy:	0.517},
        {x:2.119, y:	0.5, energy:	0.274},
        {x:2.119, y:	1.191, energy:	0.522},
        {x:2.119, y:	1.882, energy:	0.511},
        {x:2.119, y:	2.573, energy:	0.488},
        {x:2.119, y:	3.264, energy:	0.473},
        {x:2.119, y:	3.955, energy:	0.468},
        {x:2.119, y:	4.646, energy:	0.472},
        {x:2.119, y:	5.337, energy:	0.487},
        {x:2.81, y:	0.5, energy:	0.333},
        {x:2.81, y:	1.191, energy:	0.326},
        {x:2.81, y:	1.882, energy:	0.183},
        {x:2.81, y:	2.573, energy:	0.308},
        {x:2.81, y:	3.264, energy:	0.4},
        {x:2.81, y:	3.955, energy:	0.43},
        {x:2.81, y:	4.646, energy:	0.437},
        {x:2.81, y:5.337, energy:	0.434},
        {x:3.501, y:	0.5, energy:	0.338},
        {x:3.501, y:	1.191, energy:	0.298},
        {x:3.501, y:	1.882, energy:	0.249},
        {x:3.501, y:	2.573, energy:	0.304},
        {x:3.501, y:	3.264, energy:	0.376},
        {x:3.501, y:	3.955, energy:	0.407},
        {x:3.501, y:	4.646, energy:	0.405},
        {x:3.501, y:	5.337, energy:	0.376},
        {x:4.192, y:	0.5, energy:	0.325},
        {x:4.192, y:	1.191, energy:	0.307},
        {x:4.192, y:	1.882, energy:	0.338},
        {x:4.192, y:	2.573, energy:	0.359},
        {x:4.192, y:	3.264, energy:	0.387},
        {x:4.192, y:	3.955, energy:	0.402},
        {x:4.192, y:	4.646, energy:	0.391},
        {x:4.192, y:	5.337, energy:	0.344},
        {x:4.883, y:	0.5, energy:	0.271},
        {x:4.883, y:	1.191, energy:	0.244},
        {x:4.883, y:	1.882, energy:	0.316},
        {x:4.883, y:	2.573, energy:	0.371},
        {x:4.883, y:	3.264,...