Skip to content

Instantly share code, notes, and snippets.

@brendansudol

brendansudol/index.html

Last active October 24, 2016 00:42
Show Gist options
  • Save brendansudol/3171398 to your computer and use it in GitHub Desktop.
Save brendansudol/3171398 to your computer and use it in GitHub Desktop.
Download ZIP
bar chart constancy
Raw
index.html
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css"></style>
</head>
<body>
<p id="chart">
<p id="menu"><b>Top States by Age Bracket, 2008</b><br>Age: <select></select>
<script>
var margin = {top: 20, right: 40, bottom: 10, left: 40},
width = 700,
height = 250 - margin.top - margin.bottom;
var format = d3.format(".1%"),
states,
age;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], .1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.tickSize(-height - margin.bottom)
.tickFormat(format);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis");
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("class", "domain")
.attr("y2", height);
var menu = d3.select("#menu select")
.on("change", change);
d3.csv("states-age.csv", function(data) {
states = data;
var ages = d3.keys(states[0]).filter(function(key) {
return key != "State" && key != "Total";
});
states.forEach(function(state) {
ages.forEach(function(age) {
state[age] = state[age] / state.Total;
});
});
menu.selectAll("option")
.data(ages)
.enter().append("option")
.text(function(d) { return d; });
menu.property("value", "18 to 24 Years");
redraw();
});
var altKey;
d3.select(window)
.on("keydown", function() { altKey = d3.event.altKey; })
.on("keyup", function() { altKey = false; });
function change() {
clearTimeout(timeout);
d3.transition()
.duration(altKey ? 7500 : 750)
.each(redraw);
}
function redraw() {
var age1 = menu.property("value"),
top = states.sort(function(a, b) { return b[age1] - a[age1]; }).slice(0, 10);
y.domain(top.map(function(d) { return d.State; }));
var bar = svg.selectAll(".bar")
.data(top, function(d) { return d.State; });
var barEnter = bar.enter().insert("g", ".axis")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + (y(d.State) + height) + ")"; })
.style("fill-opacity", 0);
barEnter.append("rect")
.attr("width", age && function(d) { return x(d[age]); })
.attr("height", y.rangeBand());
barEnter.append("text")
.attr("class", "label")
.attr("x", -3)
.attr("y", y.rangeBand() / 2)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return d.State; });
barEnter.append("text")
.attr("class", "value")
.attr("x", age && function(d) { return x(d[age]) - 3; })
.attr("y", y.rangeBand() / 2)
.attr("dy", ".35em")
.attr("text-anchor", "end");
x.domain([0, top[0][age = age1]]);
var barUpdate = d3.transition(bar)
.attr("transform", function(d) { return "translate(0," + (d.y0 = y(d.State)) + ")"; })
.style("fill-opacity", 1);
barUpdate.select("rect")
.attr("width", function(d) { return x(d[age]); });
barUpdate.select(".value")
.attr("x", function(d) { return x(d[age]) - 3; })
.text(function(d) { return format(d[age]); });
var barExit = d3.transition(bar.exit())
.attr("transform", function(d) { return "translate(0," + (d.y0 + height) + ")"; })
.style("fill-opacity", 0)
.remove();
barExit.select("rect")
.attr("width", function(d) { return x(d[age]); });
barExit.select(".value")
.attr("x", function(d) { return x(d[age]) - 3; })
.text(function(d) { return format(d[age]); });
d3.transition(svg).select(".x.axis")
.call(xAxis);
}
var timeout = setTimeout(function() {
menu.property("value", "65 Years and Over").node().focus();
change();
}, 5000);
</script>
</body>
</html>
Raw
states-age.csv
State Total Under 5 Years 5 to 13 Years 14 to 17 Years 18 to 24 Years 16 Years and Over 18 Years and Over 15 to 44 Years 45 to 64 Years 65 Years and Over 85 Years and Over
AL 4661900 310504 552339 259034 450818 3671200 3540023 1878306 1215966 641667 85079
AK 686293 52083 85640 42153 74257 528405 506417 305207 183159 50277 4844
AZ 6500180 515910 828669 362642 601943 4975709 4792959 2680368 1523681 862573 122985
AR 2855390 202070 343207 157204 264160 2233398 2152909 1137988 727124 407205 58675
CA 36756666 2704659 4499890 2159981 3853788 28492781 27392136 16091480 8819342 4114496 612463
CO 4939456 358280 587154 261701 466194 3865113 3732321 2129158 1290094 511094 67286
CT 3501252 211637 403658 196918 325110 2788471 2689039 1390702 968967 478007 79111
DE 873092 59319 99496 47414 84464 690990 666863 350565 230528 121688 16118
DC 591833 36352 50439 25225 75569 492806 479817 288300 140043 70648 11144
FL 18328340 1140516 1938695 925060 1607297 14796088 14324069 7090172 4746856 3187797 521366
GA 9685744 740521 1250460 557860 919876 7417769 7136903 4187887 2389018 981024 122419
HI 1288198 87207 134025 64011 124834 1035429 1002955 529382 331817 190067 31681
ID 1523816 121746 201192 89702 147606 1156761 1111176 621672 375173 182150 25501
IL 12901563 894368 1558919 725973 1311479 10088978 9722303 5455020 3239173 1575308 238921
IN 6376792 443089 780199 361393 605863 4974895 4792111 2603160 1647881 813839 118650
IA 3002555 201321 345409 165883 306398 2374594 2289942 1182767 788485 444554 78699
KS 2802134 202529 342134 155822 293114 2180905 2101649 1139193 713663 366706 62319
KY 4269245 284601 493536 229927 381394 3378568 3261181 1735205 1134283 565867 74759
LA 4410796 310716 542341 254916 471275 3432616 3302823 1826987 1128771 540314 72250
ME 1316456 71459 133656 69752 112682 1077777 1041589 497847 397911 199187 28719
MD 5633597 371787 651923 316873 543470 4455297 4293014 2340626 1513754 679565 91884
MA 6497967 383568 701752 341713 665879 5245355 5070934 2707831 1751508 871098 143097
MI 10003422 625526 1179503 585169 974480 7913100 7613224 4047073 2706100 1304322 186744
MN 5220393 358471 606802 289371 507289 4113132 3965749 2142434 1391878 650519 106854
MS 2938618 220813 371502 174405 305964 2259986 2171898 1202339 730133 371598 52235
MO 5911605 399450 690476 331543 560463 4659430 4490136 2381522 1554812 805235 121678
MT 967440 61114 106088 53156 95232 774664 747082 372043 278241 137312 20246
NE 1783432 132092 215265 99638 186657 1387409 1336437 719367 451756 240847 41008
NV 2600167 199175 325650 142976 212379 2004027 1932366 1089478 653357 296717 31930
NH 1315809 75297 144235 73826 119114 1060287 1022451 520357 388250 169978 24480
NJ 8682661 557421 1011656 478505 769321 6877132 6635079 3510101 2335168 1150941 175310
NM 1984356 148323 241326 112801 203097 1539499 1481906 805851 501604 260051 35849
NY 19490297 1208495 2141490 1058031 1999120 15624059 15082281 8158231 5120254 2607672 397954
NC 9222414 652823 1097890 492964 883397 7228860 6978737 3831668 2380685 1139052 148054
ND 641481 41896 67358 33794 82629 515794 498433 263162 166615 94276 17772
OH 11485910 743750 1340492 646135 1081734 9085157 8755533 4590870 3083815 1570837 228649
OK 3642361 266547 438926 200562 369916 2839156 2736326 1479166 918688 490637 69824
OR 3790060 243483 424167 199925 338162 3025474 2922485 1534279 1036269 503998 76229
PA 12448279 737462 1345341 679201 1203944 10033800 9686275 4877273 3414001 1910571 310242
RI 1050788 60934 111408 56198 114502 850951 822248 434905 282321 147646 26001
SC 4479800 303024 517803 245400 438147 3539603 3413573 1818126 1186019 596295 76604
SD 804194 58566 94438 45305 82869 629010 605885 313905 210178 116100 20645
TN 6214888 416334 725948 336312 550612 4907628 4736294 2524606 1646623 819626 106162
TX 24326974 2027307 3277946 1420518 2454721 18315472 17601203 10540819 5656528 2472223 332872
UT 2736424 268916 413034 167685 329585 1972123 1886789 1228432 538978 246202 32898
VT 621270 32635 62538 33757 61679 509882 492340 242818 188593 86649 12364
VA 7769089 522672 887525 413004 768475 6155777 5945888 3284355 2033550 940577 121693
WA 6549224 433119 750274 357782 610378 5191341 5008049 2733393 1762811 783877 114860
WV 1814468 105435 189649 91074 157989 1475218 1428310 697910 514505 285067 38502
WI 5627967 362277 640286 311849 553914 4472917 4313555 2278148 1522038 750146 117154
WY 532668 38253 60890 29314 53980 419262 404211 213580 147279 65614 8985
Raw
style.css
html {
min-width: 1040px;
}
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 1em auto 4em auto;
width: 960px;
}
h1 {
font-size: 64px;
font-weight: 300;
letter-spacing: -2px;
margin: .3em 0 .1em 0;
}
h2 {
margin-top: 2em;
}
h1, h2 {
text-rendering: optimizeLegibility;
}
h2 a {
color: #ccc;
margin-left: -20px;
position: absolute;
width: 740px;
}
footer {
font-size: small;
margin-top: 8em;
}
header aside {
margin-top: 88px;
}
header aside,
footer aside {
color: #636363;
text-align: right;
}
aside {
font-size: small;
margin-left: 780px;
position: absolute;
width: 180px;
}
.attribution {
font-size: small;
margin-bottom: 2em;
}
body > p, li > p {
line-height: 1.5em;
}
body > p {
width: 720px;
}
body > blockquote {
width: 640px;
}
li {
width: 680px;
}
a {
color: steelblue;
}
a:not(:hover) {
text-decoration: none;
}
pre, code, textarea {
font-family: "Menlo", monospace;
}
code {
line-height: 1em;
}
textarea {
font-size: 100%;
}
body > pre {
border-left: solid 2px #ccc;
padding-left: 18px;
margin: 2em 0 2em -20px;
}
.html .value,
.javascript .string,
.javascript .regexp {
color: #756bb1;
}
.html .tag,
.css .tag,
.javascript .keyword {
color: #3182bd;
}
.comment {
color: #636363;
}
.html .doctype,
.javascript .number {
color: #31a354;
}
.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
color: #e6550d;
}
svg {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
sup, sub {
line-height: 0;
}
q:before,
blockquote:before {
content: "“";
}
q:after,
blockquote:after {
content: "”";
}
blockquote:before {
position: absolute;
left: 2em;
}
blockquote:after {
position: absolute;
}
svg {
font: 10px sans-serif;
}
.bar rect {
fill: steelblue;
}
.bar:hover rect {
fill: brown;
}
.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
stroke: none;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment