D3.js (or similar) overlapping diagram?
Using D3.js Is it possible to overlay one panel on top of another?
I need two independent columns to indicate the start and end times (x-axis) relative to the counter (y-axis). I want the BOTH columns to overlap (similar start times, for example x1 = 8: 45am, x2 = 10:05 and same end times y1 = 90, y2 = 108), both columns will have opacity around 0. 5, so each column can be seen in the total time / count range.
A similar example using Highcharts:
http://jsfiddle.net/gopinaghr/q8Udk/
// This page provides an example in highcharts
{ I need same for D3}
I need to create a diagram where
- Column width depends on (end_time - start_time)
- The start of column x depends on the start time
- Column height depends on y value
- Columns require less than 1 opacity.
source to share
d3.js
requires you to explicitly place your bars in coordinates, so you can place your bars anywhere:
// create a group for your overlapped bars
var g = svg.selectAll(".bars")
.data(data)
.enter().append("g")
// place the first bar
g.append("rect")
.attr("class", "bar1")
.attr("x", function(d) {
return x(d.letter) + 10; // center it
})
.attr("width", x.rangeBand() - 20) // make it slimmer
.attr("y", function(d) {
return y(d.col1);
})
.attr("height", function(d) {
return height - y(d.col1);
});
// place the second bar on top of it
g.append("rect")
.attr("class", "bar2")
.attr("x", function(d) {
return x(d.letter);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.col2);
})
.attr("height", function(d) {
return height - y(d.col2);
});
Here's a quick example .
edits
To add on time, you have to make a number of changes.
Set up the time format to parse the date / time of your file:
// say date/times are local 20160622 15:00
var timeFormatter = d3.time.format("%Y%m%d %H:%M")
Adjust the time scale for the axis:
// x scale showing 1 day - 06/22/2015
var x = d3.time.scale()
.range([0,width])
.domain([timeFormatter.parse("20150621 00:00"), timeFormatter.parse("20150622 00:00")])
And when you draw a rectangle, the width will be the number of pixels from endTime to startTime:
g.append("rect")
.attr("class", "bar1")
.attr("x", function(d) {
return x(d.startTime1); // start at startTime
})
.attr("width", function(d,i){
return x(d.endTime1) - x(d.startTime1); // pixel width from end to start
})
.attr("y", function(d) {
return y(d.col1);
})
.attr("height", function(d) {
return height - y(d.col1);
});
An example is here .
source to share