Skip to content

Instantly share code, notes, and snippets.

@ElaineYu

ElaineYu/.block

Last active July 12, 2017 18:03
Show Gist options
  • Save ElaineYu/fbf520d54079bdc81c17aa9b5f9e3f47 to your computer and use it in GitHub Desktop.
Save ElaineYu/fbf520d54079bdc81c17aa9b5f9e3f47 to your computer and use it in GitHub Desktop.
Download ZIP
Metis Simple Stacked Bar Chart with Labels
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.bartext {
font-size: 12px;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var margin = {top: 10, right: 20, bottom: 20, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var g = d3.select("svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("us-unemployment-2017.csv", function(data) {
console.log('Original data', data);
data.sort(function(a, b) { return b.Rate - a.Rate; });
x.domain(data.map(function(d) { return d.StateCode; }));
y.domain([0, d3.max(data, function(d) { return d.Rate; })]).nice();
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"))
var bars = g.selectAll(".bar")
.data(data)
// exit
bars.exit().remove();
// enter
// Add things that don't depend on data change
var enter = bars.enter().append('g');
enter.append("rect") // inherit the data
.attr("class", "bar")
.attr("x", function(d) { return x(d.StateCode); })
.attr("y", function(d) { return y(d.Rate); })
.attr("width", x.bandwidth()) // width of the rectangle
.attr("height", function(d) { return height - y(d.Rate); })
.attr('fill', 'blue')
enter.append('text') // bound on the parent
.attr("class", "bartext")
// enter + update
// What's left on the screen once you've removed the extraneous.
// Merge what is displayed -- what's added and what's remaining.
// Add things that should be re-rendered with data change.
bars = enter.merge(bars)
bars.select('text')
// include x and y values to position the text
.attr('x', function(d) { return x(d.StateCode)})
.attr('y', function(d) { return y(d.Rate)} )
.text(function(d){ return d.Rate})
// Grouping with D3 nest
var groupedByRegion = d3.nest().key(function(d) {return d.Region}).entries(data);
console.log('groupedByRegion', groupedByRegion);
var groupedBySubRegion = d3.nest().key(function(d) {return d.Subregion}).entries(data);
var groupedByState = d3.nest().key(function(d) {return d.StateName}).entries(data);
console.log('groupedByState', groupedByState)
// Statistics
var averageUnemploymentByRegion = d3.nest().key(function(d) {return d.Region}).rollup(function(v) { return d3.mean(v, function(d) { return parseInt(d.Rate);}); }).entries(data);
var averageUnemploymentbySubregion = d3.nest().key(function(d) {return d.Subregion}).rollup(function(v) { return d3.mean(v, function(d) { return parseInt(d.Rate);}); }).entries(data);
console.log('averageUnemploymentByRegion', averageUnemploymentByRegion);
console.log('averageUnemploymentbySubregion', averageUnemploymentbySubregion);
});
</script>
</body>
Raw
us-unemployment-2017.csv
StateName StateCode Region Subregion Rate Rank
Alabama AL South East South Central 5.4 47
Alaska AK West Pacific 6.6 50
Arizona AZ West Mountain 5 41
Arkansas AR South West South Central 3.5 13
California CA West Pacific 4.8 37
Colorado CO West Mountain 2.3 1
Connecticut CT Northeast New England 4.9 39
Delaware DE South South Atlantic 4.6 30
Florida FL South South Atlantic 4.5 29
Georgia GA South South Atlantic 5 41
Hawaii HI West Pacific 2.7 2
Idaho ID West Mountain 3.4 12
Illinois IL Midwest East North Central 4.7 32
Indiana IN Midwest East North Central 3.6 14
Iowa IA Midwest West North Central 3.1 8
Kansas KS Midwest West North Central 3.7 15
Kentucky KY South East South Central 5.1 46
Louisiana LA South West South Central 5.8 48
Maine ME Northeast New England 3 6
Maryland MD South South Atlantic 4.3 23
Massachusetts MA Northeast New England 3.9 20
Michigan MI Midwest East North Central 4.7 32
Minnesota MN Midwest West North Central 3.8 17
Mississippi MS South East South Central 5 41
Missouri MO Midwest West North Central 3.9 20
Montana MT West Mountain 3.8 17
Nebraska NE Midwest West North Central 3 6
Nevada NV West Mountain 4.7 32
New Hampshire NH Northeast New England 2.8 4
New Jersey NJ Northeast Middle Atlantic 4.1 22
New Mexico NM West Mountain 6.7 51
New York NY Northeast Middle Atlantic 4.3 23
North Carolina NC South South Atlantic 4.7 32
North Dakota ND Midwest West North Central 2.7 2
Ohio OH Midwest East North Central 5 41
Oklahoma OK South West South Central 4.3 23
Oregon OR West Pacific 3.7 15
Pennsylvania PA Northeast Middle Atlantic 4.9 39
Rhode Island RI Northeast New England 4.3 23
South Carolina SC South South Atlantic 4.3 23
South Dakota SD Midwest West North Central 2.8 4
Tennessee TN South East South Central 4.7 32
Texas TX South West South Central 5 41
Utah UT West Mountain 3.1 8
Vermont VT Northeast New England 3.1 8
Virginia VA South South Atlantic 3.8 17
Washington WA West Pacific 4.6 30
West Virginia WV South South Atlantic 4.8 37
Wisconsin WI Midwest East North Central 3.2 11
Wyoming WY West Mountain 4.3 23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment