Built with blockbuilder.org
Created
June 22, 2020 11:47
-
-
Save vikkya/39a1444e34c02ab06144bd3d21fc36a0 to your computer and use it in GitHub Desktop.
time series bar chart (horizontal)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ { | |
"time": "17:00:00", | |
"time_2": "19:00:00", | |
"total": "H" | |
}] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
</style> | |
</head> | |
<body> | |
<div id="viz"></div> | |
<script> | |
var margin = { | |
top: 10, | |
right: 10, | |
bottom: 10, | |
left: 10 | |
}, | |
width = 130 - margin.left - margin.right, | |
height = 30 - margin.top - margin.bottom; | |
var today = new Date(); | |
today.setHours(0, 0, 0, 0); | |
todayMillis = today.getTime(); | |
var svg = d3.select("#viz").append("svg").attr("viewBox", `0 0 ${(width + margin.left + margin.right)} ${(height + margin.top + margin.bottom)}`) | |
.attr("width", "100%") | |
.attr("height", "100%"); | |
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.json("data.json", function(err, data){ | |
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 parts_2 = d.time_2.split(/:/); | |
var timePeriodMillis_2 = (parseInt(parts_2[0], 10) * 60 * 60 * 1000) + | |
(parseInt(parts_2[1], 10) * 60 * 1000) + | |
(parseInt(parts_2[2], 10) * 1000); | |
d.time_2 = new Date(); | |
d.time_2.setTime(todayMillis + timePeriodMillis_2); | |
}); | |
var x = d3.scaleTime() | |
.range([0, width]); | |
var y = d3.scaleBand().rangeRound([height, 0]).padding(0.5); | |
var xAxis = d3.axisBottom() | |
.scale(x) | |
var yAxis = d3.axisLeft() | |
.scale(y) | |
var max_date = d3.extent([d3.max(data, function(d){return d.time}), d3.max(data, function(d){return d.time_2})]) | |
console.log(max_date) | |
x.domain([today, max_date[1]]) | |
y.domain(data.map(function(d){ return d.total})) | |
g.selectAll('.chart_1') | |
.data(data) | |
.enter().append('rect') | |
.attr('class', 'bar') | |
.attr("fill", "#cccccc") | |
.attr('y', function (d) { | |
return y(d.total) | |
}) | |
.attr('width', "100%") | |
.attr('height', y.bandwidth()); | |
g.selectAll('.chart') | |
.data(data) | |
.enter().append('rect') | |
.attr('class', 'bar') | |
.attr('y', function (d) { | |
return y(d.total) | |
}) | |
.attr('width', function (d) { | |
return x(d.time) | |
}) | |
.attr('height', y.bandwidth()); | |
g.selectAll('.lines') | |
.data(data) | |
.enter().append('line') | |
.attr('class', 'line_1') | |
.attr("stroke", "red") | |
.attr("x1", function(d){ return x(d.time_2)}) | |
.attr('y1', function(d){ return y(d.total) + y.bandwidth()}) | |
.attr("x2", function(d){ return x(d.time_2)}) | |
.attr('y2', function(d){ return y(d.total) - 10}); | |
}) | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment