Skip to content

Instantly share code, notes, and snippets.

@vikkya

vikkya/.block

Created January 4, 2021 12:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vikkya/ae8d15760e7931ab66898a35d6fac324 to your computer and use it in GitHub Desktop.
Save vikkya/ae8d15760e7931ab66898a35d6fac324 to your computer and use it in GitHub Desktop.
Download ZIP
time series bar chart (horizontal) w/ circle and line
Raw
.block
license: mit
Raw
data.json
[ {
"time": "17:00:00",
"time_2": "19:00:00",
"total": "H"
}]
Raw
index.html
<!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 = 10 - 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('circle')
.attr('class', 'bar')
.attr("fill", "blue")
.attr('cy', function (d) {
return y(d.total)
})
.attr("cx", function(d){ return x(d.time)})
.attr("r", 2.5)
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