Skip to content

Instantly share code, notes, and snippets.

@maggie-lee

maggie-lee/index.html

Created May 29, 2013 03:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maggie-lee/5667809 to your computer and use it in GitHub Desktop.
Save maggie-lee/5667809 to your computer and use it in GitHub Desktop.
Download ZIP
Refugees in Georgia
Raw
index.html
<!DOCTYPE html>
<html>
<style>
svg {
font: 12px sans-serif;
background-color: #E5F5E0;
background-opacity: 0.1;
color: #B93873;
}
.title {
font-size: 32px;
}
.subtitle {
font-size: 16px;
color: #B93873;
}
/**************notes */
.note {
font-size: 10px;
}
.foreground path {
fill: none;
stroke: #31A354;
stroke-opacity: .9
stroke-width: 14;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
opacity: 0.5;
}
.axis text {
text-shadow: 0 1px 0 #fff;
}
.laxis line, .laxis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
opacity: 0.5;
}
.laxis text {
text-shadow: 0 1px 0 #fff;
}
/************* sidebar suff */
.sidebar{
position: relative;
font: 12px sans-serif;
overflow: scroll;
}
.rect {
}
.bAxis line, .baxis path{
fill: none;
stroke: #000;
shape-rendering: crispEdges;
opacity: 0.5;
}
/************* explainer div */
div.explanation {
position: relative;
font: 12px sans-serif;
top: -720px;
right: -340px;
width: 350px;
height: 80px;
border: 0px;
border-radius: 0px;
text-align: justify;
}
div.explanationTwo {
position: relative;
font: 12px sans-serif;
top: -680px;
right: -340px;
width: 350px;
height: 80px;
border: 0px;
border-radius: 0px;
text-align: justify;
}
</style>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script>
//light green #E5F5E0
//middle green #A1D99B
//dark green #31A354
// peach #DC9042
//pink #B93873
//start with some variables
var margin = {top: 210, right: 0, bottom: 50, left: 10};
var width = 700 - margin.left - margin.right,
height = 780 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([100, 650], 1),
y = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left").tickValues(""),
laxis = d3.svg.axis().orient("left").tickValues([0,5,10]),
background,
foreground;
var bScale = d3.scale.linear()
.domain([0, 87000])
.range([0, 200]);
var bAxis = d3.svg.axis().orient("top").scale(bScale).tickValues([0, 87000]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform", "translate(" + margin.bottom + "," + margin.top + ")");
//read in some data
d3.csv("refugees.csv", function(error, data) {
data.forEach(function(d, i) {
d.state = d.destination_full,
d.RTOTAL = +d.RTOTAL
})
//now, let's add some calculated fields, to show refugees as a % of total population R/T
data.forEach(function(d) {
d.P2002 = +((d.R2002/d.T2002)*10000),
d.P2003 = +((d.R2003/d.T2003)*10000),
d.P2004 = +((d.R2004/d.T2004)*10000),
d.P2005 = +((d.R2005/d.T2005)*10000),
d.P2006 = +((d.R2006/d.T2006)*10000),
d.P2007 = +((d.R2007/d.T2007)*10000),
d.P2008 = +((d.R2008/d.T2008)*10000),
d.P2009 = +((d.R2009/d.T2009)*10000),
d.P2010 = +((d.R2010/d.T2010)*10000),
d.P2011 = +((d.R2011/d.T2011)*10000),
d.P2012 = +((d.R2012/d.T2012)*10000)
})
console.log(data)
//extract the list of dimensions &
// create a scale for each one of those dimensions
x.domain(dimensions = d3.keys(data[0]).filter(function(d) {
return d.substring(0,1) == "P" && (y[d] = d3.scale.linear()
.domain([0 , 10])
.range([height, 100]));
}));
foreground = svg.append("svg:g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("svg:path")
.attr("class", function (d) {return d.state + " foreground";})
.attr("d", path)
.style("stroke-width", 3)
.attr("stroke-opacity", 0.5)
.on("mouseover", function(d) {
console.log("clicked");
d3.selectAll(".rect").style("fill", "#31A354").style("stroke", "#31A354" ); //sidebar text reset/default to dark green
d3.selectAll(".foreground").style("stroke", "#31A354").attr("stroke-opacity", 0.5) // all paths reset/default to dark green
d3.selectAll("." + d.state).style("stroke", "#B93873").style("color", "#B93873").attr("stroke-opacity", 1)
d3.selectAll("." + d.state + ".rect").style("fill", "#B93873");
}); // then whatever system you click on, all the dots of that same class turn red.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("svg:g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
g.append("svg:g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("svg:text")
.attr("text-anchor", "middle")
.attr("y", height + 20)
.text(function(d) {return d.replace(/P/g, " ");});
g.append("svg:g")
.attr("class", "laxis") // call leftmost axis, laxis. It's the only one with labels.
.each(function(d, i) { if (d == "P2002") {d3.select(this).call(laxis.scale(y[d]));} }) ;
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
console.log("ok");
}
function SortByTotal(x,y) {
return -1*(x.RTOTAL - y.RTOTAL);
}
data.sort(SortByTotal); // descending sort for the sidebar
console.log(data);
var sidebar = svg.append("svg:g")
.attr("class", "sidebar");
sidebar.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", function (d) {return d.state + " rect";})
.attr("x", 50)
.attr("y", function (d, i) {return (i*(700/51))-150; })
.attr("height", 10)
.attr("width", function (d, i) {return bScale(d.RTOTAL);})
.attr("fill", "#31A354")
.attr("stroke-opacity", 0.5)
.on("mouseover", function(d) {
console.log("clicked");
d3.selectAll(".rect").style("fill", "#31A354").style("stroke", "#31A354" ); //sidebar text reset/default to dark green
d3.selectAll(".foreground").style("stroke", "#31A354").attr("stroke-opacity", 0.5) // all paths reset/default to dark green
d3.selectAll("." + d.state).style("stroke", "#B93873").style("color", "#B93873").attr("stroke-opacity", 1)
d3.selectAll("." + d.state + ".rect").style("fill", "#B93873");
});
var labels = sidebar.selectAll("text")
.attr("class", "sidebar")
.data(data)
.enter()
.append("text")
.attr("class", "my_text")
.text(function(d) {return d.state.replace(/_/g, " "); })
.attr("text-anchor", "end")
.attr("x", 45)
.attr("y", function (d, i) {return (i*(700/51))-140; })
.attr("stroke-opacity", 0.5)
.on("mouseover", function(d) {
console.log("clicked");
d3.selectAll(".rect").style("fill", "#31A354").style("stroke", "#31A354" ); //sidebar text reset/default to dark green
d3.selectAll(".foreground").style("stroke", "#31A354").attr("stroke-opacity", 0.5) // all paths reset/default to dark green
d3.selectAll("." + d.state).style("stroke", "#B93873").style("color", "#B93873").attr("stroke-opacity", 1)
d3.selectAll("." + d.state + ".rect").style("fill", "#B93873");
});
svg.append("g")
.attr("transform", "translate(50, -150)")
.attr("class", "baxis")
.call(bAxis);
// explainer div ************
var explanationDiv = d3.select("body").append("div")
.attr("class", "explanation")
.text("The United States sets a cap each year on the number of new refugees it will accept. In the last decade, that's been between 70,000 and 80,000 annually, though in practice that cap is never reached. Clarkston and Stone Mountain, Georgia have each become the home of between 3,700 and 4,000 refugees since 2001. The most common destination is Phoenix, with nearly 18,000 newbies. The 9/11 attacks prompted new security checks that cut arrivals in half in the years immediately following.");
var explanationDivTwo = d3.select("body").append("div")
.attr("class", "explanationTwo")
.text("<-- Minnesota Nice: 14 refugees per 10,000 Minnesota residents moved to the Gopher State in 2004, much more than anywhere else. Overall, California saw the most resettled refugees at nearly 87,000 over a decade. In the same time, only five settled in Wyoming.");
/////************* title ***********
svg.append("text")
.attr("class", "title")
.attr("x", width-55)
.attr("text-anchor", "end")
.attr("y", -180)
.text("Refugees in Georgia");
svg.append("text")
.attr("class", "subtitle")
.style("color", "#B93873")
.attr("x", width-55)
.attr("text-anchor", "end")
.attr("y", 85)
.text("Refugees resettled per 10,000 state population");
svg.append("text")
.attr("class", "subtitle")
.attr("x", -40)
.attr("y", -190)
.text("Total refugees resettled, per state, 2002 - 2012");
//// notes & byline
svg.append("text")
.attr("class", "note")
.attr("x" , 150)
.attr("y", height + 35)
.text("Sources: U.S. Census Bureau, U.S. Department of State Refugee Processing Center");
svg.append("text")
.attr("class", "note")
.attr("x", 150)
.attr("y", height + 45)
.text("Overall population is a midyear estimate; refugee numbers are calendar year totals.");
svg.append("text")
.text("by Maggie Lee")
.attr("x", width-55)
.attr("text-anchor", "end")
.attr("y", -160);
});
//total populationsums from U.S. Census Bureau
//http://www.census.gov/popest/data/intercensal/state/state2010.html
//http://www.census.gov/popest/data/historical/2010s/vintage_2011/state.html
</script>
</body>
</html>
Raw
refugees.csv
destination_full destination R2001 T2001 R2002 T2002 R2003 T2003 R2004 T2004 R2005 T2005 R2006 T2006 R2007 T2007 R2008 T2008 R2009 T2009 R2010 T2010 R2011 T2011 R2012 T2012 RYTD2013 RTOTAL trend
Alabama AL 101 4467634 39 4480089 51 4503491 82 4530729 99 4569805 56 4628981 137 4672840 165 4718206 211 4757938 153 4785298 86 4802740 149 4822023 32 1361 9.05
Alaska AK 49 633714 31 642337 16 648414 56 659286 67 666946 37 675302 17 680300 85 687455 93 698895 107 713985 102 722718 97 731449 24 781 0.4
Arizona AZ 1904 5273477 934 5396255 1084 5510364 2090 5652404 1987 5839077 1439 6029141 2024 6167681 3392 6280362 4543 6343154 3156 6413737 1961 6482505 2686 6553255 912 28112 22.03
Arkansas AR 9 2691571 0 2705927 4 2724816 31 2749686 1 2781097 0 2821761 6 2848650 15 2874554 32 2896843 17 2921606 3 2937979 10 2949131 1 129 0.01
California CA 8594 34479458 4895 34871843 4615 35253159 7332 35574576 7102 35827943 5316 36021202 6875 36250311 9711 36604337 11512 36961229 8034 37349363 4165 37691912 6230 38041430 1870 86251 142.96
Colorado CO 844 4425687 480 4490406 574 4528732 807 4575013 861 4631888 843 4720423 957 4803868 1331 4889730 1944 4972195 1925 5049071 1469 5116796 1612 5187582 579 14226 0.12
Connecticut CT 820 3432835 493 3458749 214 3484336 428 3496094 578 3506956 254 3517460 486 3527270 390 3545579 408 3561807 514 3577073 375 3580709 509 3590347 187 5656 0.01
Delaware DE 69 795699 36 806169 42 818003 5 830803 17 845150 1 859268 22 871749 1 883874 6 891730 12 899769 8 907135 0 917092 1 220 0.07
D_of_C DC 76 574504 31 573158 116 568502 67 567754 43 567136 69 570681 25 574404 38 580236 54 592228 40 604453 17 617996 12 632323 3 591 0.65
Florida FL 3167 16356966 1970 16689370 1088 17004085 3313 17415318 4955 17842038 2154 18166990 3019 18367842 3773 18527305 4196 18652644 4384 18843326 2342 19057542 2900 19317568 992 38253 -12.5
Georgia GA 2085 8377038 1036 8508256 1221 8622793 2169 8769252 1885 8925922 1354 9155813 1567 9349988 2679 9504843 3355 9620846 3279 9712587 2423 9815210 2791 9919945 858 26702 0.46
Hawaii HI 11 1225948 4 1239613 15 1251154 28 1273569 23 1292729 3 1309731 14 1315675 12 1332213 9 1346717 0 1363621 1 1374810 0 1392313 4 124 0
Idaho ID 600 1319962 302 1340372 246 1363380 456 1391802 545 1428241 518 1468669 742 1505105 1167 1534320 1266 1554439 969 1571450 753 1584985 788 1595728 264 8616 -9.52
Illinois IL 2180 12488445 1005 12525556 1006 12556006 1395 12589773 1594 12609903 1145 12643955 1801 12695866 2687 12747038 2809 12796778 2371 12843166 1715 12869257 2515 12875255 783 23006 1.87
Indiana IN 424 6127760 203 6155967 322 6196638 497 6233007 482 6278616 376 6332669 1514 6379599 1589 6424806 1235 6459325 1301 6490621 1095 6516922 1385 6537334 547 10970 0.63
Iowa IA 934 2931997 437 2934234 285 2941999 442 2953635 352 2964454 356 2982644 435 2999212 658 3016734 958 3032870 275 3049883 307 3062309 494 3074186 201 6134 0.07
Kansas KS 107 2702162 55 2713535 95 2723004 155 2734373 155 2745299 135 2762931 171 2783785 356 2808076 370 2832704 323 2859169 273 2871238 427 2885905 144 2766 0.12
Kentucky KY 889 4068132 384 4089875 318 4117170 715 4146101 796 4182742 656 4219239 975 4256672 1235 4289878 1871 4317074 2079 4346266 1161 4369356 1621 4380415 540 13240 3.94
Louisiana LA 268 4477875 106 4497267 112 4521042 307 4552238 189 4576628 147 4302665 164 4375581 205 4435586 335 4491648 363 4544228 237 4574836 187 4601893 65 2685 0.11
Maine ME 201 1285692 96 1295960 141 1306513 182 1313688 141 1318787 150 1323619 108 1327040 75 1330509 332 1329590 248 1327567 171 1328188 292 1329192 110 2247 0.6
Maryland MD 1030 5374691 415 5440389 938 5496269 920 5546935 751 5592379 617 5627367 705 5653408 910 5684965 930 5730388 1265 5785982 1171 5828289 1216 5884563 364 11232 1.94
Massachusetts MA 1584 6397634 782 6417206 962 6422565 1491 6412281 1301 6403290 772 6410084 782 6431559 1254 6468967 1898 6517613 1822 6557254 1400 6587536 1885 6646144 520 16453 1.35
Michigan MI 1940 9991120 537 10015710 538 10041152 1047 10055315 864 10051137 531 10036081 1584 10001284 3586 9946889 3460 9901591 3446 9877574 2163 9876187 4585 9883360 1354 25635 2.53
Minnesota MN 2593 4982796 854 5018935 2251 5053572 7155 5087713 5026 5119598 4903 5163555 2680 5207203 1120 5247018 1147 5281203 2182 5310584 1734 5344861 2115 5379139 706 34466 -0.63
Mississippi MS 24 2852994 4 2858681 2 2868312 4 2889010 5 2905943 0 2904978 1 2928350 11 2947806 26 2958774 3 2970036 3 2978512 7 2984926 0 90 0
Missouri MO 1906 5641142 807 5674825 485 5709403 1035 5747741 879 5790300 559 5842704 758 5887612 1139 5923916 1507 5961088 1083 5996231 901 6010688 1224 6021988 416 12699 40.32
Montana MT 8 906961 14 911667 24 919630 7 930009 5 940102 0 952692 3 964706 4 976415 3 983982 0 990898 0 998199 1 1005141 0 69 0
Nebraska NE 539 1719836 223 1728292 232 1738643 482 1749370 256 1761497 319 1772693 438 1783440 703 1796378 900 1812683 780 1830429 740 1842641 799 1855525 330 6741 -21.13
Nevada NV 309 2098399 180 2173791 202 2248850 336 2346222 385 2432143 196 2522658 322 2601072 521 2653630 653 2684665 467 2704642 383 2723322 458 2758931 223 4635 0.5
New_Hampshire NH 428 1255517 279 1269089 261 1279840 633 1290121 266 1298492 210 1308389 252 1312540 610 1315906 670 1316102 434 1316759 484 1318194 371 1320718 85 4983 0.83
New_Jersey NJ 938 8492671 390 8552643 671 8601402 680 8634561 728 8651974 500 8661679 586 8677885 765 8711090 1210 8755602 752 8801624 254 8821155 337 8864590 155 7966 0.78
New_Mexico NM 163 1831690 94 1855309 41 1877574 70 1903808 89 1932274 82 1962137 150 1990070 192 2010662 165 2036802 197 2065932 136 2082224 248 2085538 75 1702 0.02
New_York NY 4908 19082838 2586 19137800 2430 19175939 3145 19171567 2517 19132610 2249 19104631 2765 19132335 3928 19212436 5003 19307066 4168 19392283 3421 19465197 3754 19570261 1265 42139 10.65
North_Carolina NC 854 8210122 1387 8326201 687 8422501 1161 8553152 1410 8705407 1120 8917270 1788 9118037 2371 9309449 2548 9449566 2360 9561558 1899 9656401 2376 9752073 754 20715 0.34
North_Dakota ND 276 639062 60 638168 110 638817 232 644705 244 646089 154 649422 214 652822 463 657569 503 664968 441 674499 402 683932 487 699628 173 3759 0.2
Ohio OH 1070 11387404 616 11407889 711 11434788 1550 11452251 1590 11463320 2050 11481213 1403 11500468 1423 11515391 1822 11528896 1815 11536182 1619 11544951 2655 11544225 850 19174 2.34
Oklahoma OK 116 3467100 48 3489080 80 3504892 92 3525233 142 3548597 90 3594090 154 3634349 231 3668976 175 3717572 219 3761702 240 3791508 300 3814820 109 1996 0.09
Oregon OR 1119 3467937 1074 3513424 987 3547376 1298 3569463 1102 3613202 848 3670883 641 3722417 708 3768748 668 3808600 1162 3838957 697 3871859 740 3899353 329 11373 -1.55
Pennsylvania PA 1999 12298970 1048 12331031 1382 12374658 1488 12410722 1537 12449990 1180 12510809 1222 12563937 1874 12612285 2580 12666858 2520 12709630 2922 12742886 2795 12763536 727 23274 -0.92
Rhode_Island RI 246 1057142 46 1065995 163 1071342 332 1074579 244 1067916 130 1063096 140 1057315 135 1055003 221 1053646 204 1052886 155 1051302 152 1050292 56 2224 0.02
South_Carolina SC 81 4064995 115 4107795 107 4150297 158 4210921 88 4270150 95 4357847 90 4444110 127 4528996 120 4589872 159 4636312 114 4679230 148 4723723 64 1466 0.08
South_Dakota SD 254 757972 127 760020 168 763729 338 770396 222 775493 158 783033 227 791623 418 799124 515 807067 582 816463 461 824082 704 833354 169 4343 4.77
Tennessee TN 763 5750789 378 5795918 532 5847812 934 5910809 864 5991057 651 6088766 1008 6175727 1013 6247411 1592 6306019 1564 6356897 1169 6403353 1363 6456243 456 12287 1.84
Texas TX 2976 21319622 1402 21690325 1817 22030931 3603 22394023 3093 22778123 2774 23359580 4296 23831983 5805 24309039 8826 24801761 7710 25257114 5294 25674681 6679 26059203 2244 56519 5.95
Utah UT 772 2283715 300 2324815 468 2360137 770 2401580 767 2457719 611 2525507 898 2597746 1012 2663029 1402 2723421 1021 2776469 801 2817222 1102 2855287 433 10357 0.12
Vermont VT 217 612223 93 615442 82 617858 276 619920 196 621215 126 622892 130 623481 391 624151 347 624817 251 625960 363 626431 423 626011 80 2975 0.31
Virginia VA 1425 7198362 610 7286873 907 7366977 1441 7475575 1387 7577105 942 7673725 1054 7751000 1663 7833496 1888 7925937 1514 8024617 1202 8096604 1371 8185867 502 15906 2.22
Washington WA 3465 5985722 3049 6052349 3174 6104115 2735 6178645 2887 6257305 2345 6370753 2041 6461587 2324 6562231 2971 6667426 2829 6744496 1964 6830038 2339 6897012 673 32796 0.05
West_Virginia WV 11 1801481 1 1805414 2 1812295 0 1816438 3 1820492 0 1827912 0 1834052 5 1840310 24 1847775 12 1853973 15 1855364 17 1855413 8 98 0
Wisconsin WI 461 5406835 214 5445162 242 5479203 2414 5514026 1170 5546166 330 5577655 353 5610775 457 5640996 629 5669264 846 5691047 687 5711767 934 5726398 306 9043 -3.52
Wyoming WY 0 494657 4 500017 1 503453 0 509106 0 514157 0 522667 0 534876 0 546043 0 559851 0 564460 0 568158 0 576412 0 5 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment