JSFiddle - React, Tailwind, and code Playground

by George

CSS

body {
  font: 10px sans-serif;
}


.axis path {
    fill: #E0E0E0;
    stroke: #bbb;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #000;
}

.axis line {    
    stroke-width: 1;
}

.axis .axis-label {
    font-size: 10px;
}

.line {
    stroke-width: 2;
}

.x.axis line, .x.axis path,
.y.axis line, .y.axis path {
   fill: none;
   stroke: gray;
   shape-rendering: crispEdges;
   stroke-width: 1;
}

JavaScript

var data =  [
    //VERD
    [{'x':15000,'y':0}, {'x':15000,'y':130},{'x':40000,'y':130},{'x':40000,'y':0},
    {'x':60000,'y':0},{'x':60000,'y':130},{'x':70000,'y':130},{'x':70000,'y':0},],

    // GRIS PARADA
    [{'x':40000,'y':0}, {'x':40000,'y':130}, {'x':60000,'y':130},{'x':60000,'y':0}],

    //TARONJA TRABAJO
    [{'x':16000,'y':40},{'x':16000,'y':80}, {'x':37000,'y':80}, {'x':37000,'y':40}],

    //BLAU RALENTI
    [{'x':17000,'y':0},{'x':17000,'y':40},{'x':35000,'y':40},{'x':35000,'y':0} ],

    //LINEA VELOCITAT
   [{'x':10000,'y':0},{'x':12000,'y':80}, {'x':15000,'y':70}, {'x':17000,'y':80},{'x':19000,'y':100},
     {'x':20000,'y':55}, {'x':27000,'y':85}, {'x':33000,'y':65}, {'x':37000,'y':25}, {'x':40000,'y':65}, {'x':45000,'y':77},
     {'x':50000,'y':47}, {'x':55000,'y':88}, {'x':59000,'y':25}, {'x':66000,'y':0}],

     //LINEA TEMPERATURA
  [{'x':10000,'y':0},{'x':12000,'y':20}, {'x':15000,'y':15}, {'x':17000,'y':18},{'x':19000,'y':17},
     {'x':20000,'y':15}, {'x':27000,'y':19}, {'x':33000,'y':12}, {'x':37000,'y':21}, {'x':40000,'y':23}, {'x':45000,'y':15},
     {'x':50000,'y':18}, {'x':55000,'y':19}, {'x':59000,'y':21}, {'x':66000,'y':20}]
];

var colors = [
    '#B4EEB4',
    'gray',
    'orange',
    'blue',
    'red',
    'pink'
]


var margin = {top: 5, right: 30, bottom: 35, left: 50},
    width = 960 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, 24])
    .range([0, width]);


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

var xGrid = d3.svg.axis()
    .scale(x)
    .ticks(24)
    .tickSize(-height)
    .tickPadding(10)    
    .tickSubdivide(true)    
    .orient("bottom")
    .tickFormat('');
var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(24)
    .tickSize(5)
    .tickPadding(10)    
    .tickSubdivide(true)    
    .orient("bottom");

var yGrid = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickPadding(10)
    .tickSize(-width)
   ...