Skip to content

Instantly share code, notes, and snippets.

@dgkeyes

dgkeyes/index.html

Last active January 21, 2016 19:14
Show Gist options
  • Save dgkeyes/db3374a0afcf6b8b69f1 to your computer and use it in GitHub Desktop.
Save dgkeyes/db3374a0afcf6b8b69f1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Oregon's Latino Population by County</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 34px;
margin: 25px;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
rect:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>Oregon's Latino Population by County</h1>
<script type="text/javascript">
var w = 1000;
var h = 1000;
var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("oregon-latino-pop.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.HISP2010, +b.HISP2010);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.HISP2010;
}) ]);
heightScale.domain(data.map(function(d) { return d.COUNTY; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.COUNTY);
})
.attr("width", function(d) {
return widthScale(d.HISP2010);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue")
.append("title")
.text(function(d) {
return d.COUNTY + "'s Latino population in 2010 was " + d.HISP2010;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
oregon-latino-pop.csv
COUNTY TOTAL1990 NONHISP1990 HISP1990 TOTAL2000 NONHISP2000 HISP2000 TOTAL2010 NONHISP2010 HISP2010
Baker 15317 15041 276 16741 16349 392 16134 15606 528
Benton 70811 69076 1735 78153 74508 3645 85579 80112 5467
Clackamas 278850 271721 7129 338391 321647 16744 375992 346854 29138
Clatsop 33301 32653 648 35630 34033 1597 37039 34201 2838
Columbia 37557 36873 684 43560 42467 1093 49351 47364 1987
Coos 60273 58920 1353 62779 60646 2133 63043 59652 3391
Crook 14111 13723 388 19182 18100 1082 20978 19515 1463
Curry 19327 18973 354 21137 20376 761 22364 21163 1201
Deschutes 74958 73432 1526 115367 111063 4304 157733 146015 11718
Douglas 94649 92424 2225 100399 97116 3283 107667 102612 5055
Gilliam 1717 1687 30 1915 1880 35 1871 1783 88
Grant 7853 7701 152 7935 7772 163 7445 7238 207
Harney 7060 6839 221 7609 7293 316 7422 7128 294
Hood River 16903 14151 2752 20411 15304 5107 22346 15757 6589
Jackson 146389 140440 5949 181269 169143 12126 203206 181461 21745
Jefferson 13676 12228 1448 19009 15637 3372 21720 17525 4195
Josephine 62649 60900 1749 75726 72497 3229 82713 77462 5251
Klamath 57702 54718 2984 63775 58814 4961 66380 59465 6915
Lake 7186 6916 270 7422 7018 404 7895 7350 545
Lane 282912 276060 6852 322959 308085 14874 351715 325548 26167
Lincoln 38889 38291 598 44479 42360 2119 46034 42379 3655
Linn 91227 89050 2177 103069 98555 4514 116672 107545 9127
Malheur 26038 20883 5155 31615 23516 8099 31313 21446 9867
Marion 228483 210258 18225 284834 236120 48714 315335 238741 76594
Morrow 7625 6800 825 10995 8309 2686 11173 7676 3497
Multnomah 583887 565497 18390 660486 610879 49607 735334 655196 80138
Polk 49541 46739 2802 62380 56900 5480 75403 66315 9088
Sherman 1918 1890 28 1934 1840 94 1765 1667 98
Tillamook 21570 21196 374 24262 23018 1244 25250 22966 2284
Umatilla 59249 53942 5307 70548 59182 11366 75889 57782 18107
Union 23598 23217 381 24530 23930 600 25748 24746 1002
Wallowa 6911 6798 113 7226 7101 125 7008 6852 156
Wasco 21683 20618 1065 23791 21577 2214 25213 21470 3743
Washington 311554 297153 14401 445342 395607 49735 529710 446440 83270
Wheeler 1396 1384 12 1547 1468 79 1441 1379 62
Yamhill 65551 61422 4129 84992 75975 9017 99193 84601 14592
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment