Skip to content

Instantly share code, notes, and snippets.

@dgkeyes

dgkeyes/index.html

Last active August 28, 2015 20:21
Show Gist options
  • Save dgkeyes/cfd0f9292eb5a02f0ed6 to your computer and use it in GitHub Desktop.
Save dgkeyes/cfd0f9292eb5a02f0ed6 to your computer and use it in GitHub Desktop.
Download ZIP
Oregon Latino Population Test
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 782.4 128.4" style="enable-background:new 0 0 782.4 128.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#153A63;}
.st1{fill:#231F20;}
.st2{fill:#FAA540;}
</style>
<g>
<path class="st0" d="M48.5,99h-6.7V66.7l6.7-3.6V99z M60.5,55.5l-6.7,4.3V99h6.7V55.5z M72.5,47.1l-6.7,5V99h6.7V47.1z M84.5,37.2
l-6.7,5.9V99h6.7V37.2z M96.4,29.3l-6.7,5.6v63.5l6.7,0.7V29.3z M108.4,37l-6.7-5.6v67.7h6.7V37z M120.4,40.7l-6.7-2.1V99h6.7V40.7
z M132.4,45.3l-6.7-3V99h6.7V45.3z M144.3,55.7l-6.7-7.3V99h6.7V55.7z M156.3,63.1l-6.7-4.3V99h6.7V63.1z M168.3,66.5l-6.7-2.4v35
h6.7V66.5z M180.3,71.2l-6.7-2.5v30.4h6.7V71.2z M192.3,76.3l-6.7-3V99h6.7V76.3z M204.2,80.8l-6.7-2.5V99h6.7V80.8z M216.2,83.9
l-6.7-1.8V99h6.7V83.9z"/>
<g>
<path class="st1" d="M259.6,53.1c-2.7-2.7-4-6-4-9.9c0-4,1.3-7.3,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.3,1.3,9.9,4c2.7,2.7,4,6,4,9.9
c0,4-1.3,7.3-4,9.9c-2.7,2.7-6,4-9.9,4C265.6,57.1,262.2,55.8,259.6,53.1z M269.5,51.9c2.5,0,4.5-0.8,6-2.5
c1.5-1.7,2.3-3.7,2.3-6.2s-0.8-4.5-2.3-6.2c-1.5-1.7-3.6-2.5-6.1-2.5c-2.5,0-4.5,0.8-6,2.5c-1.5,1.7-2.3,3.7-2.3,6.2
s0.8,4.5,2.3,6.2C265,51.1,267.1,51.9,269.5,51.9z"/>
<path class="st1" d="M304.8,45l6.9,12.1h-6.4l-6.7-11.5h-5.1v11.5H288V29.3h12.1c6.5,0,9.7,2.7,9.7,8
C309.9,41.3,308.2,43.9,304.8,45z M293.6,40.4h7.8c2.2,0,3.4-1.1,3.5-3.1c-0.1-1.8-1.2-2.8-3.4-2.9h-7.9V40.4z"/>
<path class="st1" d="M315.7,57.1V29.3l20.5,0v5.2h-14.9v5.9h11.2v5.2h-11.2v6.3h14.8v5.2H315.7z"/>
<path class="st1" d="M343.4,53.1c-2.7-2.7-4-6-4-10c0-3.9,1.3-7.2,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.4,1.2,10.2,3.7l-3.7,4.1
c-1.9-1.5-4.1-2.2-6.5-2.2c-2.5,0-4.5,0.8-6,2.3c-1.5,1.5-2.3,3.5-2.3,5.9c0,2.6,0.8,4.6,2.3,6.2c1.5,1.5,3.6,2.3,6.1,2.3
c2,0,3.5-0.4,4.6-1.2v-4.8l-3.7,0v-5.2h9.3v13c-2.8,2.5-6.2,3.7-10.2,3.7C349.4,57.1,346.1,55.8,343.4,53.1z"/>
<path class="st1" d="M372,53.1c-2.7-2.7-4-6-4-9.9c0-4,1.3-7.3,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.3,1.3,9.9,4c2.7,2.7,4,6,4,9.9
c0,4-1.3,7.3-4,9.9c-2.7,2.7-6,4-9.9,4C378,57.1,374.7,55.8,372,53.1z M382,51.9c2.5,0,4.5-0.8,6-2.5c1.5-1.7,2.3-3.7,2.3-6.2
s-0.8-4.5-2.3-6.2c-1.5-1.7-3.6-2.5-6.1-2.5c-2.5,0-4.5,0.8-6,2.5c-1.5,1.7-2.3,3.7-2.3,6.2s0.8,4.5,2.3,6.2
C377.5,51.1,379.5,51.9,382,51.9z"/>
<path class="st1" d="M400.1,57.1V29.3h1.9l17.4,17.4V29.3h5.6v27.8h-2l-17.3-17.3v17.3H400.1z"/>
<path class="st1" d="M443.8,57.1V29.3h12.1c6.5,0,9.7,2.7,9.7,8c0,5.5-3.2,8.3-9.7,8.3h-6.6v11.5H443.8z M449.3,40.4h7.8
c2.2,0,3.4-1.1,3.5-3.1c-0.1-1.8-1.2-2.8-3.4-2.9h-7.9V40.4z"/>
<path class="st1" d="M487.2,45l6.9,12.1h-6.4l-6.7-11.5H476v11.5h-5.6V29.3h12.1c6.5,0,9.7,2.7,9.7,8
C492.4,41.3,490.7,43.9,487.2,45z M476,40.4h7.8c2.2,0,3.4-1.1,3.5-3.1c-0.1-1.8-1.2-2.8-3.4-2.9H476V40.4z"/>
<path class="st1" d="M500.3,53.1c-2.7-2.7-4-6-4-9.9c0-4,1.3-7.3,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.3,1.3,9.9,4c2.7,2.7,4,6,4,9.9
c0,4-1.3,7.3-4,9.9c-2.7,2.7-6,4-9.9,4C506.3,57.1,503,55.8,500.3,53.1z M510.2,51.9c2.5,0,4.5-0.8,6-2.5c1.5-1.7,2.3-3.7,2.3-6.2
s-0.8-4.5-2.3-6.2c-1.5-1.7-3.6-2.5-6.1-2.5c-2.5,0-4.5,0.8-6,2.5c-1.5,1.7-2.3,3.7-2.3,6.2s0.8,4.5,2.3,6.2
C505.7,51.1,507.8,51.9,510.2,51.9z"/>
<path class="st1" d="M532,53.1c-2.7-2.7-4-6-4-10c0-3.9,1.3-7.2,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.4,1.2,10.2,3.7l-3.7,4.1
c-1.9-1.5-4.1-2.2-6.5-2.2c-2.5,0-4.5,0.8-6,2.3c-1.5,1.5-2.3,3.5-2.3,5.9c0,2.6,0.8,4.6,2.3,6.2c1.5,1.5,3.6,2.3,6.1,2.3
c2,0,3.5-0.4,4.6-1.2v-4.8l-3.7,0v-5.2h9.3v13c-2.8,2.5-6.2,3.7-10.2,3.7C537.9,57.1,534.6,55.8,532,53.1z"/>
<path class="st1" d="M574.8,45l6.9,12.1h-6.4l-6.7-11.5h-5.1v11.5H558V29.3h12.1c6.5,0,9.7,2.7,9.7,8
C579.9,41.3,578.2,43.9,574.8,45z M563.6,40.4h7.8c2.2,0,3.4-1.1,3.5-3.1c-0.1-1.8-1.2-2.8-3.4-2.9h-7.9V40.4z"/>
<path class="st1" d="M584.5,57.1l11.1-27.8h5.6l11.1,27.8l-5.9,0l-1.7-4.3h-12.6l-1.7,4.3H584.5z M598.5,36.7l-4.2,10.6h8.4
L598.5,36.7z"/>
<path class="st1" d="M616.4,57.1V29.3h1.9L630.4,43l12.1-13.7h1.9v27.8h-5.6l0-16.1l-8.4,9.3L622,41v16.1H616.4z"/>
</g>
<path class="st1" d="M255.6,99V71.2l20.5,0v5.2h-14.9v5.9h11.2v5.2h-11.2v6.3H276V99H255.6z"/>
<path class="st1" d="M285.4,71.1l7.9,20.4l8.1-20.4h5.9L296.1,99h-5.6l-11.2-27.8H285.4z"/>
<path class="st1" d="M304.9,99L316,71.1h5.6L332.7,99l-5.9,0l-1.7-4.3h-12.6l-1.7,4.3H304.9z M318.9,78.6l-4.2,10.6h8.4L318.9,78.6
z"/>
<path class="st1" d="M342.5,71.1v22.6h14.8V99h-20.4V71.1H342.5z"/>
<path class="st1" d="M366.4,71.1v16.1c0,2.1,0.6,3.7,1.9,4.6s2.8,1.5,4.6,1.5s3.4-0.5,4.6-1.5s1.9-2.5,1.9-4.6V71.1h5.6v17.6
c0,2.8-1.1,5.3-3.4,7.2c-2.3,2-5.2,3-8.6,3c-3.5,0-6.3-1-8.6-3c-2.3-2-3.4-4.4-3.4-7.2V71.1H366.4z"/>
<path class="st1" d="M387.6,99l11.1-27.8h5.6L415.4,99l-5.9,0l-1.7-4.3h-12.6l-1.7,4.3H387.6z M401.7,78.6l-4.2,10.6h8.4
L401.7,78.6z"/>
<path class="st1" d="M438.5,71.1v5.2h-9.3V99h-5.6V76.3h-9.3v-5.2H438.5z"/>
<path class="st1" d="M444.8,95c-2.7-2.7-4-6-4-9.9c0-4,1.3-7.3,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.3,1.3,9.9,4c2.7,2.7,4,6,4,9.9
c0,4-1.3,7.3-4,9.9c-2.7,2.7-6,4-9.9,4C450.8,99,447.5,97.7,444.8,95z M454.7,93.8c2.5,0,4.5-0.8,6-2.5c1.5-1.7,2.3-3.7,2.3-6.2
s-0.8-4.5-2.3-6.2c-1.5-1.7-3.6-2.5-6.1-2.5c-2.5,0-4.5,0.8-6,2.5c-1.5,1.7-2.3,3.7-2.3,6.2s0.8,4.5,2.3,6.2S452.3,93.8,454.7,93.8
z"/>
<path class="st1" d="M490,86.8l6.9,12.1h-6.4l-6.7-11.5h-5.1V99h-5.6V71.1h12.1c6.5,0,9.7,2.7,9.7,8
C495.1,83.2,493.4,85.7,490,86.8z M478.8,82.3h7.8c2.2,0,3.4-1.1,3.5-3.1c-0.1-1.8-1.2-2.8-3.4-2.9h-7.9V82.3z"/>
<path class="st1" d="M515.9,72.1c1.4,0.6,2.8,1.5,4,2.8l-3.7,3.7c-1.2-1.5-3-2.2-5.2-2.2c-2.2,0-3.7,0.5-4.3,1.6
c-0.6,1.1-0.6,2,0,2.7c0.6,0.7,2,1.3,4.3,1.7c2.4,0.3,4.5,1,6.4,2.3s2.9,3.4,2.9,6.2c0,2.2-1,4.1-3.1,5.8c-2,1.6-4.4,2.4-7.2,2.4
c-2.6,0-4.7-0.4-6.5-1.1c-1.7-0.7-3.2-1.7-4.5-3l3.7-3.7c1.2,1.5,3.3,2.4,6.3,2.6c2.5,0,4-0.5,4.6-1.6c0.6-1.1,0.6-2.1,0-3.2
c-0.6-1-2.2-1.7-4.6-1.9c-2.2-0.2-4.3-0.9-6.1-2c-1.9-1.1-2.8-3-2.8-5.8c0-2.5,1.1-4.4,3.2-5.9c2.1-1.5,4.3-2.2,6.5-2.2
C512.5,71.1,514.5,71.5,515.9,72.1z"/>
<path class="st1" d="M535,99V71.1h1.9l17.4,17.4V71.1h5.6V99h-2l-17.3-17.3V99H535z"/>
<path class="st1" d="M565.6,99V71.2l20.5,0v5.2h-14.9v5.9h11.2v5.2h-11.2v6.3H586V99H565.6z"/>
<path class="st1" d="M614.4,71.1v5.2h-9.3V99h-5.6V76.3h-9.3v-5.2H614.4z"/>
<path class="st1" d="M636.5,78.6L630.9,99h-5.6l-7.4-27.8h5.9l4.8,18.9l5-18.9h5.8l4.8,18.9l4.8-18.9h5.9L647.6,99H642L636.5,78.6z
"/>
<path class="st1" d="M661.3,95c-2.7-2.7-4-6-4-9.9c0-4,1.3-7.3,4-9.9c2.7-2.7,6-4,9.9-4c4,0,7.3,1.3,9.9,4c2.7,2.7,4,6,4,9.9
c0,4-1.3,7.3-4,9.9c-2.7,2.7-6,4-9.9,4C667.3,99,664,97.7,661.3,95z M671.3,93.8c2.5,0,4.5-0.8,6-2.5c1.5-1.7,2.3-3.7,2.3-6.2
s-0.8-4.5-2.3-6.2c-1.5-1.7-3.6-2.5-6.1-2.5c-2.5,0-4.5,0.8-6,2.5c-1.5,1.7-2.3,3.7-2.3,6.2s0.8,4.5,2.3,6.2
C666.8,93,668.8,93.8,671.3,93.8z"/>
<path class="st1" d="M706.4,86.8l6.9,12.1H707l-6.7-11.5h-5.1V99h-5.6V71.1h12.1c6.5,0,9.7,2.7,9.7,8
C711.5,83.2,709.8,85.7,706.4,86.8z M695.2,82.3h7.8c2.2,0,3.4-1.1,3.5-3.1c-0.1-1.8-1.2-2.8-3.4-2.9h-7.9V82.3z"/>
<path class="st1" d="M717.2,71.1h5.6v11.1l9.3-11.1h6.3l-10.9,13L740.6,99h-7.2l-10.6-12v12h-5.6V71.1z"/>
<rect x="234.5" y="29.3" class="st2" width="2.1" height="69.7"/>
</g>
</svg>
<p>Not much to see here; try looking in the console!</p>
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("oregon-latino-pop.csv", function(data) {
//Now CSV contents have been transformed into
//an array of JSON objects.
//Log 'data' to the console, for verification.
console.log(data);
});
</script>
</body>
</html>
Raw
oregon-latino-pop.csv
COUNTY 1990 TOTAL POPULATION 1990 NON-HISPANIC POPULATION 1990 HISPANIC POPULATION 2000 TOTAL POPULATION 2000 NON-HISPANIC POPULATION 2000 HISPANIC POPULATION 2010 TOTAL POPULATION 2010 NON-HISPANIC POPULATION 2010 HISPANIC POPULATION
Baker County 15317 15041 276 16741 16349 392 16134 15606 528
Benton County 70811 69076 1735 78153 74508 3645 85579 80112 5467
Clackamas County 278850 271721 7129 338391 321647 16744 375992 346854 29138
Clatsop County 33301 32653 648 35630 34033 1597 37039 34201 2838
Columbia County 37557 36873 684 43560 42467 1093 49351 47364 1987
Coos County 60273 58920 1353 62779 60646 2133 63043 59652 3391
Crook County 14111 13723 388 19182 18100 1082 20978 19515 1463
Curry County 19327 18973 354 21137 20376 761 22364 21163 1201
Deschutes County 74958 73432 1526 115367 111063 4304 157733 146015 11718
Douglas County 94649 92424 2225 100399 97116 3283 107667 102612 5055
Gilliam County 1717 1687 30 1915 1880 35 1871 1783 88
Grant County 7853 7701 152 7935 7772 163 7445 7238 207
Harney County 7060 6839 221 7609 7293 316 7422 7128 294
Hood River County 16903 14151 2752 20411 15304 5107 22346 15757 6589
Jackson County 146389 140440 5949 181269 169143 12126 203206 181461 21745
Jefferson County 13676 12228 1448 19009 15637 3372 21720 17525 4195
Josephine County 62649 60900 1749 75726 72497 3229 82713 77462 5251
Klamath County 57702 54718 2984 63775 58814 4961 66380 59465 6915
Lake County 7186 6916 270 7422 7018 404 7895 7350 545
Lane County 282912 276060 6852 322959 308085 14874 351715 325548 26167
Lincoln County 38889 38291 598 44479 42360 2119 46034 42379 3655
Linn County 91227 89050 2177 103069 98555 4514 116672 107545 9127
Malheur County 26038 20883 5155 31615 23516 8099 31313 21446 9867
Marion County 228483 210258 18225 284834 236120 48714 315335 238741 76594
Morrow County 7625 6800 825 10995 8309 2686 11173 7676 3497
Multnomah County 583887 565497 18390 660486 610879 49607 735334 655196 80138
Polk County 49541 46739 2802 62380 56900 5480 75403 66315 9088
Sherman County 1918 1890 28 1934 1840 94 1765 1667 98
Tillamook County 21570 21196 374 24262 23018 1244 25250 22966 2284
Umatilla County 59249 53942 5307 70548 59182 11366 75889 57782 18107
Union County 23598 23217 381 24530 23930 600 25748 24746 1002
Wallowa County 6911 6798 113 7226 7101 125 7008 6852 156
Wasco County 21683 20618 1065 23791 21577 2214 25213 21470 3743
Washington County 311554 297153 14401 445342 395607 49735 529710 446440 83270
Wheeler County 1396 1384 12 1547 1468 79 1441 1379 62
Yamhill County 65551 61422 4129 84992 75975 9017 99193 84601 14592
Total 2842321 2729614 112707 3421399 3146085 275314 3831074 3381012 450062
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment