Horizontal stacked bar: one tick not displaying - d3.js

Question

Please can somebody tell me why the bar in top right corner is more elevated than all the others? When I use larger data-set it actually creates a stacked bar with multiple parts that seems not to be part of the chart and there is no right y axis tick value for it.
var dataset = [
{
"stopId": "165",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:53:00",
"stopId": "165",
"passengers": 12
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:23:00",
"stopId": "165",
"passengers": 22
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:53:00",
"stopId": "165",
"passengers": 6
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:23:00",
"stopId": "165",
"passengers": 14
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:51:00",
"stopId": "165",
"passengers": 13
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:24:00",
"stopId": "165",
"passengers": 21
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:54:00",
"stopId": "165",
"passengers": 28
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:24:00",
"stopId": "165",
"passengers": 28
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:54:00",
"stopId": "165",
"passengers": 4
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:23:00",
"stopId": "165",
"passengers": 18
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:55:00",
"stopId": "165",
"passengers": 5
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:10:00",
"stopId": "165",
"passengers": 27
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:25:00",
"stopId": "165",
"passengers": 6
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:38:00",
"stopId": "165",
"passengers": 18
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:55:00",
"stopId": "165",
"passengers": 26
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:10:00",
"stopId": "165",
"passengers": 29
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:25:00",
"stopId": "165",
"passengers": 24
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:40:00",
"stopId": "165",
"passengers": 29
}
],
"name": "Passengers"
},
{
"stopId": "65",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:54:00",
"stopId": "65",
"passengers": 20
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:24:00",
"stopId": "65",
"passengers": 22
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:54:00",
"stopId": "65",
"passengers": 8
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:24:00",
"stopId": "65",
"passengers": 27
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:52:00",
"stopId": "65",
"passengers": 26
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:25:00",
"stopId": "65",
"passengers": 24
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:55:00",
"stopId": "65",
"passengers": 25
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:25:00",
"stopId": "65",
"passengers": 28
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:55:00",
"stopId": "65",
"passengers": 7
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:24:00",
"stopId": "65",
"passengers": 23
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:56:00",
"stopId": "65",
"passengers": 18
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:11:00",
"stopId": "65",
"passengers": 4
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:26:00",
"stopId": "65",
"passengers": 29
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:39:00",
"stopId": "65",
"passengers": 19
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:56:00",
"stopId": "65",
"passengers": 28
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:11:00",
"stopId": "65",
"passengers": 21
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:26:00",
"stopId": "65",
"passengers": 26
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:41:00",
"stopId": "65",
"passengers": 19
}
],
"name": "Passengers"
},
{
"stopId": "63",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:55:00",
"stopId": "63",
"passengers": 10
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:25:00",
"stopId": "63",
"passengers": 9
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:55:00",
"stopId": "63",
"passengers": 21
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:25:00",
"stopId": "63",
"passengers": 28
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:53:00",
"stopId": "63",
"passengers": 8
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:26:00",
"stopId": "63",
"passengers": 13
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:56:00",
"stopId": "63",
"passengers": 29
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:26:00",
"stopId": "63",
"passengers": 28
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:56:00",
"stopId": "63",
"passengers": 14
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:25:00",
"stopId": "63",
"passengers": 30
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:57:00",
"stopId": "63",
"passengers": 21
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:12:00",
"stopId": "63",
"passengers": 10
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:27:00",
"stopId": "63",
"passengers": 16
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:40:00",
"stopId": "63",
"passengers": 24
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:57:00",
"stopId": "63",
"passengers": 3
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:12:00",
"stopId": "63",
"passengers": 15
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:27:00",
"stopId": "63",
"passengers": 23
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:42:00",
"stopId": "63",
"passengers": 21
}
],
"name": "Passengers"
},
{
"stopId": "47",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:56:00",
"stopId": "47",
"passengers": 13
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:26:00",
"stopId": "47",
"passengers": 7
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:56:00",
"stopId": "47",
"passengers": 21
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:26:00",
"stopId": "47",
"passengers": 22
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:54:00",
"stopId": "47",
"passengers": 28
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:27:00",
"stopId": "47",
"passengers": 30
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:57:00",
"stopId": "47",
"passengers": 20
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:27:00",
"stopId": "47",
"passengers": 17
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:57:00",
"stopId": "47",
"passengers": 14
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:26:00",
"stopId": "47",
"passengers": 11
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:58:00",
"stopId": "47",
"passengers": 28
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:13:00",
"stopId": "47",
"passengers": 7
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:28:00",
"stopId": "47",
"passengers": 24
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:41:00",
"stopId": "47",
"passengers": 29
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:58:00",
"stopId": "47",
"passengers": 19
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:13:00",
"stopId": "47",
"passengers": 23
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:28:00",
"stopId": "47",
"passengers": 19
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:43:00",
"stopId": "47",
"passengers": 12
}
],
"name": "Passengers"
},
{
"stopId": "185",
"data": [
{
"yValue": "101000026",
"xValue": 5,
"time": "15:27:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:59:00",
"stopId": "185",
"passengers": 11
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:14:00",
"stopId": "185",
"passengers": 24
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:29:00",
"stopId": "185",
"passengers": 16
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:42:00",
"stopId": "185",
"passengers": 22
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:59:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:14:00",
"stopId": "185",
"passengers": 27
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:29:00",
"stopId": "185",
"passengers": 29
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:44:00",
"stopId": "185",
"passengers": 24
},
{
"yValue": "101000035",
"xValue": 5,
"time": "17:59:00",
"stopId": "185",
"passengers": 19
},
{
"yValue": "101000036",
"xValue": 5,
"time": "18:14:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000037",
"xValue": 5,
"time": "18:29:00",
"stopId": "185",
"passengers": 6
},
{
"yValue": "101000038",
"xValue": 5,
"time": "18:44:00",
"stopId": "185",
"passengers": 24
},
{
"yValue": "101000039",
"xValue": 5,
"time": "18:59:00",
"stopId": "185",
"passengers": 26
},
{
"yValue": "101000040",
"xValue": 5,
"time": "19:29:00",
"stopId": "185",
"passengers": 21
},
{
"yValue": "101000041",
"xValue": 5,
"time": "19:59:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000042",
"xValue": 5,
"time": "20:25:00",
"stopId": "185",
"passengers": 20
},
{
"yValue": "101000043",
"xValue": 5,
"time": "21:25:00",
"stopId": "185",
"passengers": 29
}
],
"name": "Passengers"
}
];
var margins = {
top: 12,
left: 100,
right: 50,
bottom: 34
};
var numberOfRecords = 0;
var dataset = dataset.map(function(d) {
numberOfRecords = 0;
return d.data.map(function(o, i) {
numberOfRecords++;
return {
y: o.xValue,
x: o.yValue,
name: d.name,
stopId: o.stopId,
passengers: o.passengers,
time: o.time
};
});
});
d3.select(window).on("resize", throttle);
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(group) {
return group.map(function(d) {
// Invert the x and y values, and y0 becomes x0
return {
x: d.y,
y: d.x,
x0: d.y0,
name: d.name,
stopId: d.stopId,
passengers: d.passengers,
time: d.time
};
});
});
var yValuesTripId = dataset[0].map(function(d) {
return d.y;
});
var yValuesFirstStopTimes = dataset[0].map(function(d) {
// return (d.time.slice(0, -3) + (Math.floor(Math.random() * (20000 - 1 + 1)) + 1));
return removeSecondsFromHHMMSS(d.time);
});
var yValuesLastStopTimes = dataset[dataset.length - 1].map(function(d) {
// return (d.time.slice(0, -3) + (Math.floor(Math.random() * (20000 - 1 + 1)) + 1));
return removeSecondsFromHHMMSS(d.time);
});
var xMax = d3.max(dataset, function(group) {
return d3.max(group, function(d) {
return d.x + d.x0;
});
});
var tooltip = d3.select("#chartDiv")
.append('div')
.attr('id', 'tooltip')
.attr('class', 'hidden');
const chartArea = $("#chartDiv");
var width = chartArea.innerWidth() - margins.left - margins.right;
var barHeight = 10;
var height = (numberOfRecords * 15) - margins.top - margins.bottom;
var svg, xScale, yScaleLeft, yScaleRight, rects;
draw(width, height);
function draw(width, height) {
svg = d3.select("#chartDiv")
.append('svg')
.attr('width', width + margins.left + margins.right)
.attr('height', height + margins.top + margins.bottom)
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
xScale = d3.scale.linear()
.domain([0, xMax])
.range([0, width - margins.right]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(0);
yScaleLeft = d3.scale.ordinal()
.domain(yValuesTripId)
.rangeRoundBands([0, height], .1);
var yAxisLeft = d3.svg.axis()
.scale(yScaleLeft)
.orient('left')
.tickFormat(function(d, i) {
return yValuesFirstStopTimes[i];
});
yScaleRight = d3.scale.ordinal()
.domain(yValuesTripId)
.rangeRoundBands([0, height], .1);
var yAxisRight = d3.svg.axis()
.scale(yScaleRight)
.orient('right')
.tickPadding(-25)
.tickFormat(function(d, i) {
return yValuesLastStopTimes[i];
});
var groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g');
rects = groups.selectAll('rect')
.data(function(d) {
return d;
})
.enter()
.append('rect')
.attr('x', function(d) {
return xScale(d.x0);
})
.attr('y', function(d, i) {
return yScaleLeft(d.y);
})
.attr('height', function(d) {
return barHeight;
})
.attr('width', function(d) {
return xScale(d.x);
})
.attr('fill', function(d) {
return getColor(d.passengers);
})
.attr('stroke', 'white')
.on('mouseover', function(d) {
var xPos = d3.event.pageX - 310;
var yPos = d3.event.pageY - 110;
d3.select('#tooltip')
.style("left", xPos + "px")
.style("top", yPos + "px")
.style('width', '250px')
.text("Trip " + d.y + '|Passengers:' + d.passengers + '|Stop ' + d.stopId + '|time ' + removeSecondsFromHHMMSS(d.time));
d3.select('#tooltip').classed('hidden', false);
})
.on('mouseout', function() {
d3.select('#tooltip').classed('hidden', true);
});
svg.append('g')
.attr('class', 'axis')
.attr('id','busOccupancyChartXAxis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.call(yAxisLeft);
svg.append("text")
.attr("x", 0 - margins.left)
.attr("y", 0)
.text("Departure Time");
const newWidth = width - 20;
svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + newWidth + ",0)")
.call(yAxisRight);
svg.append("text")
.attr("x", width - margins.right + 10)
.attr("y", 0)
.text("Arrival Time");
}
function redraw() {
width = chartArea.innerWidth() - margins.left - margins.right;
d3.select('svg').remove();
d3.select('#legend').remove();
draw(width, height);
}
var throttleTimer;
function throttle() {
window.clearTimeout(throttleTimer);
throttleTimer = window.setTimeout(function() {
redraw();
}, 200);
}
function getColor(numberOfPassengers) {
cellColor = "";
if (numberOfPassengers < 10) {
cellColor = "#585858";
} else if (numberOfPassengers < 20) {
cellColor = "#FFCC00";
} else if (numberOfPassengers < 25) {
cellColor = "#FF3300";
} else {
cellColor = "#A00000";
}
return cellColor;
}
function removeSecondsFromHHMMSS (time) {
return time.slice(0, -3)
}
#chartDiv #xaxis .domain {
fill: none;
stroke: #000;
}
#chartDiv #xaxis text,
#yaxis text {
font-size: 12px;
}
#chartDiv .axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
display: none;
}
#chartDiv .axis text {
font-family: sans-serif;
font-size: 11px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>

Answer 1

If you inspect the DOM, you're gonna see that this rectangle is actually a bunch of rectangles, all in the same position. They are there, sitting on the top, because they have no y attribute.
The problem is not your code: the problem is actually your data. For each bus stop, you have a yValue starting at 101000017...
"yValue": "101000017"
... and ending at 101000034:
"yValue": "101000034"
Which are used for the ordinal scale. So, each bus stop should have the same y values, since they use the same ordinal scale.
However, for the last group, the yValues starts at 101000026 and ends at 101000043. When you use those values with the y scale, the last ones (from 101000034 on) return undefined and the rectangles end up in the top corner.
Solution: audit your data.
In the following snippet, I just changed the yValues of the last group to match the other groups.
Here is the working code:
var dataset = [
{
"stopId": "165",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:53:00",
"stopId": "165",
"passengers": 12
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:23:00",
"stopId": "165",
"passengers": 22
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:53:00",
"stopId": "165",
"passengers": 6
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:23:00",
"stopId": "165",
"passengers": 14
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:51:00",
"stopId": "165",
"passengers": 13
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:24:00",
"stopId": "165",
"passengers": 21
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:54:00",
"stopId": "165",
"passengers": 28
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:24:00",
"stopId": "165",
"passengers": 28
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:54:00",
"stopId": "165",
"passengers": 4
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:23:00",
"stopId": "165",
"passengers": 18
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:55:00",
"stopId": "165",
"passengers": 5
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:10:00",
"stopId": "165",
"passengers": 27
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:25:00",
"stopId": "165",
"passengers": 6
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:38:00",
"stopId": "165",
"passengers": 18
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:55:00",
"stopId": "165",
"passengers": 26
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:10:00",
"stopId": "165",
"passengers": 29
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:25:00",
"stopId": "165",
"passengers": 24
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:40:00",
"stopId": "165",
"passengers": 29
}
],
"name": "Passengers"
},
{
"stopId": "65",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:54:00",
"stopId": "65",
"passengers": 20
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:24:00",
"stopId": "65",
"passengers": 22
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:54:00",
"stopId": "65",
"passengers": 8
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:24:00",
"stopId": "65",
"passengers": 27
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:52:00",
"stopId": "65",
"passengers": 26
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:25:00",
"stopId": "65",
"passengers": 24
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:55:00",
"stopId": "65",
"passengers": 25
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:25:00",
"stopId": "65",
"passengers": 28
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:55:00",
"stopId": "65",
"passengers": 7
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:24:00",
"stopId": "65",
"passengers": 23
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:56:00",
"stopId": "65",
"passengers": 18
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:11:00",
"stopId": "65",
"passengers": 4
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:26:00",
"stopId": "65",
"passengers": 29
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:39:00",
"stopId": "65",
"passengers": 19
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:56:00",
"stopId": "65",
"passengers": 28
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:11:00",
"stopId": "65",
"passengers": 21
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:26:00",
"stopId": "65",
"passengers": 26
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:41:00",
"stopId": "65",
"passengers": 19
}
],
"name": "Passengers"
},
{
"stopId": "63",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:55:00",
"stopId": "63",
"passengers": 10
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:25:00",
"stopId": "63",
"passengers": 9
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:55:00",
"stopId": "63",
"passengers": 21
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:25:00",
"stopId": "63",
"passengers": 28
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:53:00",
"stopId": "63",
"passengers": 8
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:26:00",
"stopId": "63",
"passengers": 13
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:56:00",
"stopId": "63",
"passengers": 29
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:26:00",
"stopId": "63",
"passengers": 28
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:56:00",
"stopId": "63",
"passengers": 14
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:25:00",
"stopId": "63",
"passengers": 30
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:57:00",
"stopId": "63",
"passengers": 21
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:12:00",
"stopId": "63",
"passengers": 10
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:27:00",
"stopId": "63",
"passengers": 16
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:40:00",
"stopId": "63",
"passengers": 24
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:57:00",
"stopId": "63",
"passengers": 3
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:12:00",
"stopId": "63",
"passengers": 15
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:27:00",
"stopId": "63",
"passengers": 23
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:42:00",
"stopId": "63",
"passengers": 21
}
],
"name": "Passengers"
},
{
"stopId": "47",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "10:56:00",
"stopId": "47",
"passengers": 13
},
{
"yValue": "101000018",
"xValue": 5,
"time": "11:26:00",
"stopId": "47",
"passengers": 7
},
{
"yValue": "101000019",
"xValue": 5,
"time": "11:56:00",
"stopId": "47",
"passengers": 21
},
{
"yValue": "101000020",
"xValue": 5,
"time": "12:26:00",
"stopId": "47",
"passengers": 22
},
{
"yValue": "101000021",
"xValue": 5,
"time": "12:54:00",
"stopId": "47",
"passengers": 28
},
{
"yValue": "101000022",
"xValue": 5,
"time": "13:27:00",
"stopId": "47",
"passengers": 30
},
{
"yValue": "101000023",
"xValue": 5,
"time": "13:57:00",
"stopId": "47",
"passengers": 20
},
{
"yValue": "101000024",
"xValue": 5,
"time": "14:27:00",
"stopId": "47",
"passengers": 17
},
{
"yValue": "101000025",
"xValue": 5,
"time": "14:57:00",
"stopId": "47",
"passengers": 14
},
{
"yValue": "101000026",
"xValue": 5,
"time": "15:26:00",
"stopId": "47",
"passengers": 11
},
{
"yValue": "101000027",
"xValue": 5,
"time": "15:58:00",
"stopId": "47",
"passengers": 28
},
{
"yValue": "101000028",
"xValue": 5,
"time": "16:13:00",
"stopId": "47",
"passengers": 7
},
{
"yValue": "101000029",
"xValue": 5,
"time": "16:28:00",
"stopId": "47",
"passengers": 24
},
{
"yValue": "101000030",
"xValue": 5,
"time": "16:41:00",
"stopId": "47",
"passengers": 29
},
{
"yValue": "101000031",
"xValue": 5,
"time": "16:58:00",
"stopId": "47",
"passengers": 19
},
{
"yValue": "101000032",
"xValue": 5,
"time": "17:13:00",
"stopId": "47",
"passengers": 23
},
{
"yValue": "101000033",
"xValue": 5,
"time": "17:28:00",
"stopId": "47",
"passengers": 19
},
{
"yValue": "101000034",
"xValue": 5,
"time": "17:43:00",
"stopId": "47",
"passengers": 12
}
],
"name": "Passengers"
},
{
"stopId": "185",
"data": [
{
"yValue": "101000017",
"xValue": 5,
"time": "15:27:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000018",
"xValue": 5,
"time": "15:59:00",
"stopId": "185",
"passengers": 11
},
{
"yValue": "101000019",
"xValue": 5,
"time": "16:14:00",
"stopId": "185",
"passengers": 24
},
{
"yValue": "101000020",
"xValue": 5,
"time": "16:29:00",
"stopId": "185",
"passengers": 16
},
{
"yValue": "101000021",
"xValue": 5,
"time": "16:42:00",
"stopId": "185",
"passengers": 22
},
{
"yValue": "101000022",
"xValue": 5,
"time": "16:59:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000023",
"xValue": 5,
"time": "17:14:00",
"stopId": "185",
"passengers": 27
},
{
"yValue": "101000024",
"xValue": 5,
"time": "17:29:00",
"stopId": "185",
"passengers": 29
},
{
"yValue": "101000025",
"xValue": 5,
"time": "17:44:00",
"stopId": "185",
"passengers": 24
},
{
"yValue": "101000026",
"xValue": 5,
"time": "17:59:00",
"stopId": "185",
"passengers": 19
},
{
"yValue": "101000027",
"xValue": 5,
"time": "18:14:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000028",
"xValue": 5,
"time": "18:29:00",
"stopId": "185",
"passengers": 6
},
{
"yValue": "101000029",
"xValue": 5,
"time": "18:44:00",
"stopId": "185",
"passengers": 24
},
{
"yValue": "101000030",
"xValue": 5,
"time": "18:59:00",
"stopId": "185",
"passengers": 26
},
{
"yValue": "101000031",
"xValue": 5,
"time": "19:29:00",
"stopId": "185",
"passengers": 21
},
{
"yValue": "101000032",
"xValue": 5,
"time": "19:59:00",
"stopId": "185",
"passengers": 23
},
{
"yValue": "101000033",
"xValue": 5,
"time": "20:25:00",
"stopId": "185",
"passengers": 20
},
{
"yValue": "101000034",
"xValue": 5,
"time": "21:25:00",
"stopId": "185",
"passengers": 29
}
],
"name": "Passengers"
}
];
var margins = {
top: 12,
left: 100,
right: 50,
bottom: 34
};
var numberOfRecords = 0;
var dataset = dataset.map(function(d) {
numberOfRecords = 0;
return d.data.map(function(o, i) {
numberOfRecords++;
return {
y: o.xValue,
x: o.yValue,
name: d.name,
stopId: o.stopId,
passengers: o.passengers,
time: o.time
};
});
});
d3.select(window).on("resize", throttle);
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(group) {
return group.map(function(d) {
// Invert the x and y values, and y0 becomes x0
return {
x: d.y,
y: d.x,
x0: d.y0,
name: d.name,
stopId: d.stopId,
passengers: d.passengers,
time: d.time
};
});
});
var yValuesTripId = dataset[0].map(function(d) {
return d.y;
});
var yValuesFirstStopTimes = dataset[0].map(function(d) {
// return (d.time.slice(0, -3) + (Math.floor(Math.random() * (20000 - 1 + 1)) + 1));
return removeSecondsFromHHMMSS(d.time);
});
var yValuesLastStopTimes = dataset[dataset.length - 1].map(function(d) {
// return (d.time.slice(0, -3) + (Math.floor(Math.random() * (20000 - 1 + 1)) + 1));
return removeSecondsFromHHMMSS(d.time);
});
var xMax = d3.max(dataset, function(group) {
return d3.max(group, function(d) {
return d.x + d.x0;
});
});
var tooltip = d3.select("#chartDiv")
.append('div')
.attr('id', 'tooltip')
.attr('class', 'hidden');
const chartArea = $("#chartDiv");
var width = chartArea.innerWidth() - margins.left - margins.right;
var barHeight = 10;
var height = (numberOfRecords * 15) - margins.top - margins.bottom;
var svg, xScale, yScaleLeft, yScaleRight, rects;
draw(width, height);
function draw(width, height) {
svg = d3.select("#chartDiv")
.append('svg')
.attr('width', width + margins.left + margins.right)
.attr('height', height + margins.top + margins.bottom)
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
xScale = d3.scale.linear()
.domain([0, xMax])
.range([0, width - margins.right]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(0);
yScaleLeft = d3.scale.ordinal()
.domain(yValuesTripId)
.rangeRoundBands([0, height], .1);
var yAxisLeft = d3.svg.axis()
.scale(yScaleLeft)
.orient('left')
.tickFormat(function(d, i) {
return yValuesFirstStopTimes[i];
});
yScaleRight = d3.scale.ordinal()
.domain(yValuesTripId)
.rangeRoundBands([0, height], .1);
var yAxisRight = d3.svg.axis()
.scale(yScaleRight)
.orient('right')
.tickPadding(-25)
.tickFormat(function(d, i) {
return yValuesLastStopTimes[i];
});
var groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g');
rects = groups.selectAll('rect')
.data(function(d) {
return d;
})
.enter()
.append('rect')
.attr('x', function(d) {
return xScale(d.x0);
})
.attr('y', function(d, i) {
return yScaleLeft(d.y);
})
.attr('height', function(d) {
return barHeight;
})
.attr('width', function(d) {
return xScale(d.x);
})
.attr('fill', function(d) {
return getColor(d.passengers);
})
.attr('stroke', 'white')
.on('mouseover', function(d) {
var xPos = d3.event.pageX - 310;
var yPos = d3.event.pageY - 110;
d3.select('#tooltip')
.style("left", xPos + "px")
.style("top", yPos + "px")
.style('width', '250px')
.text("Trip " + d.y + '|Passengers:' + d.passengers + '|Stop ' + d.stopId + '|time ' + removeSecondsFromHHMMSS(d.time));
d3.select('#tooltip').classed('hidden', false);
})
.on('mouseout', function() {
d3.select('#tooltip').classed('hidden', true);
});
svg.append('g')
.attr('class', 'axis')
.attr('id','busOccupancyChartXAxis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.call(yAxisLeft);
svg.append("text")
.attr("x", 0 - margins.left)
.attr("y", 0)
.text("Departure Time");
const newWidth = width - 20;
svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + newWidth + ",0)")
.call(yAxisRight);
svg.append("text")
.attr("x", width - margins.right + 10)
.attr("y", 0)
.text("Arrival Time");
}
function redraw() {
width = chartArea.innerWidth() - margins.left - margins.right;
d3.select('svg').remove();
d3.select('#legend').remove();
draw(width, height);
}
var throttleTimer;
function throttle() {
window.clearTimeout(throttleTimer);
throttleTimer = window.setTimeout(function() {
redraw();
}, 200);
}
function getColor(numberOfPassengers) {
cellColor = "";
if (numberOfPassengers < 10) {
cellColor = "#585858";
} else if (numberOfPassengers < 20) {
cellColor = "#FFCC00";
} else if (numberOfPassengers < 25) {
cellColor = "#FF3300";
} else {
cellColor = "#A00000";
}
return cellColor;
}
function removeSecondsFromHHMMSS (time) {
return time.slice(0, -3)
}
#chartDiv #xaxis .domain {
fill: none;
stroke: #000;
}
#chartDiv #xaxis text,
#yaxis text {
font-size: 12px;
}
#chartDiv .axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
display: none;
}
#chartDiv .axis text {
font-family: sans-serif;
font-size: 11px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>