As someone new to d3.js, I attempted to create a column graph with a datetime x-axis. Unfortunately, I seem to have made a mistake in my code. Any help in identifying and rectifying the error would be greatly appreciated. Thank you in advance for any assistance.
var data = [{
"time": "01:00:00",
"total": 1
}, {
"time": "01:05:30",
"total": 2
}, {
"time": "02:10:00",
"total": 1
}, {
"time": "03:15:30",
"total": 3
}, {
"time": "04:25:30",
"total": 1
}, {
"time": "07:55:15",
"total": 4
}, {
"time": "12:18:00",
"total": 1
}, {
"time": "17:00:00",
"total": 5
}];
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
},
width = 800,
height = 500;
var today = new Date();
today.setHours(0, 0, 0, 0);
var 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().range([height - margin.top, margin.bottom]).domain([0,
d3.max(data, function (d) {
return d.y;
})
]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(d3.time.hour, 2)
.tickFormat(d3.time.format('%H:%M'))
.tickSize(5)
.tickPadding(8);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickPadding(8)
.tickSize(5)
.tickSubdivide(true);
var svg = d3.select('#plot_container').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 y(d.total);
})
.attr('width', 0)
.attr('height', function (d) {
return ((height - margin.bottom) - y(d.y));
})
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (margin.left) + ',0)')
.call(yAxis);