| license: mit |
This is stacked bar chart done by D3.
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
The data source comes from data.gov
| Age_Group | Male | Female | |
|---|---|---|---|
| Under 5 years | 0.064 | 0.059 | |
| 5 to 9 years | 0.066 | 0.062 | |
| 10 to 14 years | 0.067 | 0.062 | |
| 15 to 19 years | 0.069 | 0.064 | |
| 20 to 24 years | 0.073 | 0.067 | |
| 25 to 29 years | 0.071 | 0.067 | |
| 30 to 34 years | 0.069 | 0.066 | |
| 35 to 39 years | 0.065 | 0.063 | |
| 40 to 44 years | 0.064 | 0.063 | |
| 45 to 49 years | 0.065 | 0.064 | |
| 50 to 54 years | 0.069 | 0.07 | |
| 55 to 59 years | 0.066 | 0.068 | |
| 60 to 64 years | 0.058 | 0.062 | |
| 65 to 69 years | 0.048 | 0.052 | |
| 70 to 74 years | 0.034 | 0.038 | |
| 75 to 79 years | 0.023 | 0.028 | |
| 80 to 84 years | 0.015 | 0.021 | |
| 85 years and over | 0.013 | 0.025 |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { | |
| background-color: lightgrey; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| position: center; | |
| } | |
| .rect:hover { | |
| fill: yellow; | |
| } | |
| .tooltip { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| position: absolute; | |
| display: none; | |
| width: auto; | |
| height: auto; | |
| background: none repeat scroll 0 0 red; | |
| border: 0 none; | |
| border-radius: 8px 8px 8px 8px; | |
| box-shadow: -3px 3px 15px #888888; | |
| color: blue; | |
| font: 12px sans-serif; | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| </style> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| </body> | |
| <script> | |
| var margin = {top: 30, right: 30, bottom: 50, left: 30}; | |
| var width = 960 - margin.left - margin.right; | |
| var height = 500 - margin.top - margin.bottom; | |
| var g = d3.select("svg") | |
| //.append("svg") | |
| //.attr("width", width) | |
| //.attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var x0 = d3.scaleBand() | |
| .rangeRound([0, width]) | |
| .paddingInner(0.2); | |
| var x1 = d3.scaleBand() | |
| .padding(0.1); | |
| var y = d3.scaleLinear() | |
| .rangeRound([height, 0]); | |
| var z = d3.scaleOrdinal() | |
| .range(["cornflowerblue", "orangered"]); | |
| d3.csv("age_by_gender.csv",function(d, i, columns) { | |
| for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]]; | |
| return d; | |
| }, | |
| function(error, data) { | |
| if (error) throw error; | |
| var keys = data.columns.slice(1); | |
| x0.domain(data.map(function(d) { return d.Age_Group; })); | |
| x1.domain(keys).rangeRound([0, x0.bandwidth()]); | |
| y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice(); | |
| g.append("g") | |
| .selectAll("g") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("transform", function(d) { return "translate(" + x0(d.Age_Group) + ",0)"; }) | |
| .selectAll("rect") | |
| .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); }) | |
| .enter().append("rect").attr("class", "rect") | |
| .attr("x", function(d) { return x1(d.key); }) | |
| .attr("y", function(d) { return y(d.value); }) | |
| .attr("width", x1.bandwidth()) | |
| .attr("height", function(d) { return height - y(d.value); }) | |
| .attr("fill", function(d) { return z(d.key); }) | |
| .on("mouseover", function() { tooltip.style("display", null); }) | |
| .on("mousemove", function(d) { | |
| var xPosition = d3.mouse(this)[0] + 5; | |
| var yPosition = d3.mouse(this)[1] - 5; | |
| tooltip | |
| .attr("transform", "translate(" + xPosition + "," + yPosition + ")") | |
| .style("display", "inline") | |
| .select("text").text(d.value); | |
| }) | |
| .on("mouseout", function() { tooltip.style("display", "none"); }); | |
| g.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x0)) | |
| .selectAll("text") | |
| .style("text-anchor", "end") | |
| .attr("dx", "-.1em") | |
| .attr("transform", "rotate(-45)" ); | |
| g.append("g") | |
| .attr("class", "axis") | |
| .call(d3.axisLeft(y).ticks(null, ".0%")) | |
| .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") | |
| .text("Percentage"); | |
| 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 = d3.select("body").append("svg") | |
| .attr("class", "tooltip") | |
| .style("display", "none"); | |
| tooltip.append("rect") | |
| .attr("width", 60) | |
| .attr("height", 20) | |
| .attr("fill", "red") | |
| .style("opacity", 0.5); | |
| tooltip.append("g:text") | |
| .attr("x", 30) | |
| .attr("y", "1.2em") | |
| .style("text-anchor", "middle") | |
| .attr("font-size", "12px") | |
| .attr("font-weight", "bold"); | |
| </script> | |
