Skip to content

Instantly share code, notes, and snippets.

@gencay
Last active September 19, 2019 15:37
Embed
What would you like to do?
State Under 5 Years 5 to 13 Years 14 to 17 Years 18 to 24 Years 25 to 44 Years 45 to 64 Years 65 Years and Over
AL 310504 552339 259034 450818 1231572 1215966 641667
AK 52083 85640 42153 74257 198724 183159 50277
AZ 515910 828669 362642 601943 1804762 1523681 862573
AR 202070 343207 157204 264160 754420 727124 407205
CA 2704659 4499890 2159981 3853788 10604510 8819342 4114496
CO 358280 587154 261701 466194 1464939 1290094 511094
CT 211637 403658 196918 325110 916955 968967 478007
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var yBegin;
var innerColumns = {
"column1" : ["Under 5 Years","5 to 13 Years","14 to 17 Years"],
"column2" : ["18 to 24 Years"],
"column3" : ["25 to 44 Years"],
"column4" : ["45 to 64 Years", "65 Years and Over"]
}
d3.csv("data.csv", function(error, data) {
var columnHeaders = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var yColumn = new Array();
d.columnDetails = columnHeaders.map(function(name) {
for (ic in innerColumns) {
if($.inArray(name, innerColumns[ic]) >= 0){
if (!yColumn[ic]){
yColumn[ic] = 0;
}
yBegin = yColumn[ic];
yColumn[ic] += +d[name];
return {name: name, column: ic, yBegin: yBegin, yEnd: +d[name] + yBegin,};
}
}
});
d.total = d3.max(d.columnDetails, function(d) {
return d.yEnd;
});
});
x0.domain(data.map(function(d) { return d.State; }));
x1.domain(d3.keys(innerColumns)).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) {
return d.total;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".7em")
.style("text-anchor", "end")
.text("");
var project_stackedbar = svg.selectAll(".project_stackedbar")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
project_stackedbar.selectAll("rect")
.data(function(d) { return d.columnDetails; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) {
return x1(d.column);
})
.attr("y", function(d) {
return y(d.yEnd);
})
.attr("height", function(d) {
return y(d.yBegin) - y(d.yEnd);
})
.style("fill", function(d) { return color(d.name); });
var legend = svg.selectAll(".legend")
.data(columnHeaders.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
</script>
@sangeetha321
Copy link

How to implement horizontal stacked group bar?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment