Skip to content

Instantly share code, notes, and snippets.

@kpq

kpq/README.md

Created September 25, 2013 06:39
Show Gist options
  • Save kpq/6695897 to your computer and use it in GitHub Desktop.
Save kpq/6695897 to your computer and use it in GitHub Desktop.
Download ZIP
Grouped bar charts
Raw
README.md

An example of d3 nesting with bar charts and rangebands. Original layout based on these bar charts of Oscar favorites for the New York Times.

Raw
data.tsv
state value age subsidy
CT 258 25 no
DC 180 25 no
MD 179 25 no
ME 232 25 no
NY 390 25 no
RI 230 25 no
VA 199 25 no
VT 413 25 no
IN 232 25 no
MT 203 25 no
NE 213 25 no
OH 196 25 no
SD 207 25 no
NM 167 25 no
CA 200 25 no
CO 196 25 no
OR 158 25 no
WA 222 25 no
CT 193 25 yes
DC 180 25 yes
MD 179 25 yes
ME 193 25 yes
NY 193 25 yes
RI 193 25 yes
VA 193 25 yes
VT 193 25 yes
IN 193 25 yes
MT 193 25 yes
NE 193 25 yes
OH 193 25 yes
SD 193 25 yes
NM 167 25 yes
CA 193 25 yes
CO 193 25 yes
OR 158 25 yes
WA 193 25 yes
CT 258 40 no
DC 180 40 no
MD 179 40 no
ME 232 40 no
NY 390 40 no
RI 230 40 no
VA 199 40 no
VT 413 40 no
IN 232 40 no
MT 203 40 no
NE 213 40 no
OH 196 40 no
SD 207 40 no
NM 167 40 no
CA 200 40 no
CO 196 40 no
OR 158 40 no
WA 222 40 no
CT 193 40 yes
DC 180 40 yes
MD 179 40 yes
ME 193 40 yes
NY 193 40 yes
RI 193 40 yes
VA 193 40 yes
VT 193 40 yes
IN 193 40 yes
MT 193 40 yes
NE 193 40 yes
OH 193 40 yes
SD 193 40 yes
NM 167 40 yes
CA 193 40 yes
CO 193 40 yes
OR 158 40 yes
WA 193 40 yes
CT 697 60 no
DC 521 60 no
MD 484 60 no
ME 626 60 no
NY 390 60 no
RI 622 60 no
VA 537 60 no
VT 413 60 no
IN 626 60 no
MT 548 60 no
NE 576 60 no
OH 529 60 no
SD 561 60 no
NM 450 60 no
CA 541 60 no
CO 531 60 no
OR 427 60 no
WA 601 60 no
CT 193 60 yes
DC 193 60 yes
MD 193 60 yes
ME 193 60 yes
NY 193 60 yes
RI 193 60 yes
VA 193 60 yes
VT 193 60 yes
IN 193 60 yes
MT 193 60 yes
NE 193 60 yes
OH 193 60 yes
SD 193 60 yes
NM 193 60 yes
CA 193 60 yes
CO 193 60 yes
OR 193 60 yes
WA 193 60 yes
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.network-line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.yes {
fill:#ccc;
}
.no {
fill:orange;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 100},
width = 900 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeBands([0,width])
.domain(["25", "40", "60"]);
var y0 = d3.scale.ordinal()
.rangeBands([0,height], .5);
var x = d3.scale.linear()
.range([0, x0.rangeBand() ])
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 + ")");
d3.tsv("data.tsv", function(error, data) {
data.forEach(function(d) {
d.age = +d.age;
d.value = +d.value;
});
x.domain([0, d3.max(data.map(function(d) { return d.value; }))])
nested = d3.nest()
.key(function(d) { return d.state})
.key(function(d) { return d.age})
.entries(data);
y0
.domain(nested.map(function(d) { return d.key; }))
var agelabels = svg.append("g")
var state = svg.selectAll(".g-state")
.data(nested)
.enter().append("g")
.attr("transform", function(d) { return "translate(0," + y0(d.key) + ")" });
state.append("text")
.text(function(d) { return d.key; })
.attr("dy", 20)
.attr("dx", -margin.left)
var ages = state.append("g")
var ageGroups = ages.selectAll(".g-age-bars")
.data(function(d) { return d.values; })
.enter().append("g")
.attr("class", "g-age-bars")
.attr("transform", function(d) { return "translate(" + x0(d.key) + " ,0)"; });
var barsForAgeGroup = ageGroups.append("g");
var bar = barsForAgeGroup.selectAll(".diff")
.data(function(d) { return d.values; })
.enter()
.append("g")
.attr("class", "diff")
.attr("transform", function(d,i) { return "translate(0," + y0.rangeBand()/2*i + ")" } );
bar.append("rect")
.attr("width", function(d) { return x(d.value)})
.attr("height", y0.rangeBand()/2 - 4)
.attr("class", function(d) { return d.subsidy; })
bar.append("text")
.text(function(d) { return d.value})
.attr("x", function(d) { return x(d.value)})
.attr("dy", y0.rangeBand() / 4)
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment