Based on D3 Stacked Bar Chart by Mike Bostock https://bl.ocks.org/mbostock/3886208
Tooltip code based on D3 Stacked Bar Chart with Tooltips by Michael Stanaland http://bl.ocks.org/mstanaland/6100713
-
-
Save dantheo999/c224b710c5768a3409cbd7bb29c541cf to your computer and use it in GitHub Desktop.
D3js v4 Stacked Bar Chart - with Tooltip Hover
This file contains hidden or 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
| Age | Replies | Posts | |
|---|---|---|---|
| 24 hrs | 63 | 11 | |
| 1-7 days | 300 | 153 | |
| 7-14 days | 365 | 186 | |
| 14-30 days | 900 | 667 | |
| 1-3 months | 13577 | 2678 | |
| 3-6 months | 256 | 450 | |
| 6-12 months | 0 | 53 | |
| 1-2 yrs | 0 | 0 | |
| 2-3 yrs | 0 | 0 | |
| 3-5 yrs | 0 | 0 | |
| >5 yrs | 0 | 0 |
This file contains hidden or 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> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| #main { | |
| width: 960px; | |
| } | |
| .axis .domain { | |
| display: none; | |
| } | |
| </style> | |
| <div id="main"> | |
| <svg width="960" height="500"></svg> | |
| </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| // create the svg | |
| var svg = d3.select("svg"), | |
| margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom, | |
| g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // set x scale | |
| var x = d3.scaleBand() | |
| .rangeRound([0, width]) | |
| .paddingInner(0.05) | |
| .align(0.1); | |
| // set y scale | |
| var y = d3.scaleLinear() | |
| .rangeRound([height, 0]); | |
| // set the colors | |
| var z = d3.scaleOrdinal() | |
| .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
| // load the csv and create the chart | |
| d3.csv("age-groups.csv", function(d, i, columns) { | |
| for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; | |
| d.total = t; | |
| return d; | |
| }, function(error, data) { | |
| if (error) throw error; | |
| var keys = data.columns.slice(1); | |
| //data.sort(function(a, b) { return b.total - a.total; }); | |
| x.domain(data.map(function(d) { return d.Age; })); | |
| y.domain([0, d3.max(data, function(d) { return d.total; })]).nice(); | |
| z.domain(keys); | |
| g.append("g") | |
| .selectAll("g") | |
| .data(d3.stack().keys(keys)(data)) | |
| .enter().append("g") | |
| .attr("fill", function(d) { return z(d.key); }) | |
| .selectAll("rect") | |
| .data(function(d) { return d; }) | |
| .enter().append("rect") | |
| .attr("x", function(d) { return x(d.data.Age); }) | |
| .attr("y", function(d) { return y(d[1]); }) | |
| .attr("height", function(d) { return y(d[0]) - y(d[1]); }) | |
| .attr("width", x.bandwidth()) | |
| .on("mouseover", function() { tooltip.style("display", null); }) | |
| .on("mouseout", function() { tooltip.style("display", "none"); }) | |
| .on("mousemove", function(d) { | |
| console.log(d); | |
| var xPosition = d3.mouse(this)[0] - 5; | |
| var yPosition = d3.mouse(this)[1] - 5; | |
| tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); | |
| tooltip.select("text").text(d[1]-d[0]); | |
| }); | |
| g.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| g.append("g") | |
| .attr("class", "axis") | |
| .call(d3.axisLeft(y).ticks(null, "s")) | |
| .append("text") | |
| .attr("x", 2) | |
| .attr("y", y(y.ticks().pop()) + 0.5) | |
| .attr("dy", "0.32em") | |
| .attr("fill", "#000") | |
| .attr("font-weight", "bold") | |
| .attr("text-anchor", "start"); | |
| var legend = g.append("g") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", 10) | |
| .attr("text-anchor", "end") | |
| .selectAll("g") | |
| .data(keys.slice().reverse()) | |
| .enter().append("g") | |
| .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
| legend.append("rect") | |
| .attr("x", width - 19) | |
| .attr("width", 19) | |
| .attr("height", 19) | |
| .attr("fill", z); | |
| legend.append("text") | |
| .attr("x", width - 24) | |
| .attr("y", 9.5) | |
| .attr("dy", "0.32em") | |
| .text(function(d) { return d; }); | |
| }); | |
| // Prep the tooltip bits, initial display is hidden | |
| var tooltip = svg.append("g") | |
| .attr("class", "tooltip") | |
| .style("display", "none"); | |
| tooltip.append("rect") | |
| .attr("width", 60) | |
| .attr("height", 20) | |
| .attr("fill", "white") | |
| .style("opacity", 0.5); | |
| tooltip.append("text") | |
| .attr("x", 30) | |
| .attr("dy", "1.2em") | |
| .style("text-anchor", "middle") | |
| .attr("font-size", "12px") | |
| .attr("font-weight", "bold"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment