JSFiddle - React, Tailwind, and code Playground

by Roydon DSouza

CSS

path {
	    stroke: steelblue;
	    stroke-width: 3;
	    fill: none;
	}
	.axis {
	    shape-rendering: crispEdges;
	}
	.x.axis line {
	    stroke: #000;
	}
	.x.axis .minor {
	    stroke-opacity: .5;
	}
	.x.axis line, .x.axis path {
	    fill: none;
	    stroke: #000;
	}
	.y.axis path {
	    fill: none;
	    stroke: #000;
	}
	.bar {
	    fill: steelblue;
	}

JavaScript

var data = [{
    "time": "01:00:00",
    "total": 1
}, {
    "time": "01:05:30",
    "total": 1
}, {
    "time": "02:10:00",
    "total": 1
}, {
    "time": "03:15:30",
    "total": 1
}, {
    "time": "04:25:30",
    "total": 1
}, {
    "time": "07:55:15",
    "total": 1
}, {
    "time": "12:18:00",
    "total": 1
}, {
    "time": "17:00:00",
    "total": 1
}];

var margin = {
    top: 40,
    right: 40,
    bottom: 40,
    left: 40
},
width = 800,
    height = 500;


var today = new Date();
today.setHours(0, 0, 0, 0);
todayMillis = today.getTime();

data.forEach(function(d) {
    var parts = d.time.split(/:/);
    var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
                           (parseInt(parts[1], 10) * 60 * 1000) + 
                           (parseInt(parts[2], 10) * 1000);
    
    d.time = new Date();
    d.time.setTime(todayMillis + timePeriodMillis);
});

var x = d3.time.scale()
    .domain(d3.extent(data, function(d) { return d.time; }))
    .nice(d3.time.day, 1)
    .rangeRound([0, width - margin.left - margin.right]);

var y = d3.scale.linear()
    .domain([0, 2])
    .range([height - margin.top - margin.bottom, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.hours, 2)
    .tickFormat(d3.time.format('%H:%M'))
    .tickSize(0)
    .tickPadding(8);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .tickPadding(8)
    .tickFormat(function (d) {
    return '';
});

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

svg.selectAll('.chart')
    .data(data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function (d) {
        return x(d.time);
    })
    .attr('y', function (d) {
        return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.total))
    })
 ...