Skip to content

Instantly share code, notes, and snippets.

@sivakarasala

sivakarasala/index.html

Forked from DimsumPanda/index.html
Created February 7, 2018 22:25
Show Gist options
  • Save sivakarasala/2603f5386fdb57d08f3b334dc0ccd583 to your computer and use it in GitHub Desktop.
Save sivakarasala/2603f5386fdb57d08f3b334dc0ccd583 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked Bar Charts D3 v4
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.axis path {
/*display: none;*/
}
</style>
<body>
<div id="stackedbars">
<h1>Segments</h1>
<svg id="stacked" width="600" height="500"></svg></div>
</body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("#stacked"),
margin = {top: 20, right: 180, 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 + ")");
// var margin = {top: 20, right: 150, bottom: 50, left: 40},
// width = 600 - margin.left - marginStacked.right,
// height = 500 - margin.top - marginStacked.bottom;
//
//
// var svg = d3.select("#stacked").append("svg")
// .attr("width", widthStacked + marginStacked.left + marginStacked.right)
// .attr("height", heightStacked + marginStacked.top + marginStacked.bottom)
// .append("g")
// .attr("transform", "translate(" + marginStacked.left + "," + marginStacked.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.3)
.align(0.3);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory20);
// .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var stack = d3.stack();
d3.csv("segments_table2.csv", type, function(error, data) {
if (error) throw error;
data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.ethnicity; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(data.columns.slice(1));
g.selectAll(".serie")
.data(stack.keys(data.columns.slice(1))(data))
.enter().append("g")
.attr("class", "serie")
.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.ethnicity); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks(10).pop()))
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000")
.text("Population");
var legend = g.selectAll(".legend")
.data(data.columns.slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
.style("font", "10px sans-serif");
legend.append("rect")
.attr("x", width + 18)
.attr("width", 18)
.attr("height", 18)
.attr("fill", z);
legend.append("text")
.attr("x", width + 44)
.attr("y", 9)
.attr("dy", ".35em")
.attr("text-anchor", "start")
.text(function(d) { return d; });
});
function type(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}
</script>
</body>
</html>
Raw
segments_table2.csv
ethnicity F Under 25 F Over 75 F 25 to 50 F 50 to 75 M Under 25 M Over 75 M 25 to 50 M 50 to 75
Asian 327 296 332 309 306 330 307 323
Black 294 302 330 305 295 363 322 292
Hispanic 315 351 307 323 312 324 297 306
White 311 298 303 306 308 286 282 338
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment