Skip to content

Instantly share code, notes, and snippets.

@smckissock
Last active November 7, 2015 16:24
Show Gist options
  • Save smckissock/484448e9300045b57a95 to your computer and use it in GitHub Desktop.
Save smckissock/484448e9300045b57a95 to your computer and use it in GitHub Desktop.
Scatterplot with transitions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Week 5</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
h1 {
font-family: sans-serif;
color: Black;
font-size: 24px;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
font-family: sans-serif;
}
rect:hover {
fill: darkgreen;
}
.axis path,
.axis line {
fill: none;
stroke: gray;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>United States Government Outlays: 1960 - 2020</h1>
<p>Source: "Table 4.1—Outlays by Agency: 1962–2020" <a href=https://www.whitehouse.gov/omb/budget/Historicals>OMB.gov</a> In billions of dollars</p>
<script type="text/javascript">
d3.csv("OutlaysByAgency1960_2020.csv", function (data) {
//console.log(data);
var years = [];
for (i = 1962; i < 2021; i++) {
data.forEach(function (d) {
if (+d[i] < 0)
d[i] = 0;
else
d[i] = d[i] / 1000;
});
years.push(i);
}
var departments = [];
data.forEach(function (d) {
departments.push(d['Department or other unit']);
});
console.log(departments);
drawChart();
function drawChart() {
var w = 1000,
h = 500
var margin = {top: 10, right: 50, bottom: 50, left: 100};
var width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var circleData = [];
years.forEach(function (year) {
data.forEach(function (d) {
circleData.push(new Array(d['Department or other unit'], +year, d[year]));
});
});
var colorScale = d3.scale.category20c();
var xScale = d3.scale.linear()
.domain([1960, 2020])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, d3.max(circleData,
function (d) {
return +d[2];
})
])
.range([margin.top + height, margin.top]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function (d) {
return d; // default has commas - don't want the for years get rid of the commas in years
})
.ticks(10);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + margin.top) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var circles = svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
circles
.attr("cx", function (d) { return xScale(d[1]); })
.attr("cy", function (d, i) { return yScale(d[2]); })
.attr("r", 0)
.attr("fill", function (d) {
return colorScale(departments.indexOf(d[0]));
})
.transition()
.delay(function (d, i) {
return ((departments.indexOf(d[0]) * 150) + (d[1] - 1960) * 20);
})
.duration(1000)
.attr("r", 5)
circles
.append("title")
.text(function (d) {
return 'In ' + d[1] + ', outlays for ' + d[0] + ' were ' + d[2];
});
}
});
</script>
</body>
</html>
Department or other unit 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 TQ 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 201 2020
Legislative Branch 196 192 199 212 234 252 269 289 353 395 499 553 638 739 788 226 990 1064 1099 1224 1214 1367 1437 1577 1607 1662 1810 1848 2216 2231 2245 2629 2394 2537 2609 2263 2348 2572 2592 2871 2959 3187 3396 3890 3984 4101 4294 4408 4704 5839 4582 4440 4316 4164 4899 4794 4969 5007 5065 5113
Judicial Branch 57 62 66 75 80 88 94 110 133 145 173 188 207 284 325 85 393 437 481 567 641 710 787 866 966 1071 1180 1342 1499 1646 1997 2308 2628 2677 2903 3059 3259 3459 3789 4057 4381 4828 5127 5389 5547 5823 6006 6347 6645 7181 7296 7227 7063 6893 7567 7724 7852 8012 8135 8225
Department of Agriculture 6437 7414 7569 6940 5633 5952 7430 8446 8412 8673 11021 10167 10302 15518 17682 5009 23287 30179 31698 34721 41541 45623 52317 41928 55435 58599 49507 43930 48256 45858 53990 56320 63019 60615 56550 54218 52393 53800 62690 75071 68071 68622 72737 71560 85308 93533 84427 90795 114440 129459 139397 139717 155895 141808 147536 147863 153151 152653 148559 146030
Department of Commerce 215 354 702 736 485 477 582 607 778 783 850 934 992 1077 1484 396 2010 4720 3538 3129 2296 2054 1925 1894 2139 2083 2127 2278 2570 3734 2585 2566 2797 2915 3401 3702 3782 4036 5020 7788 5003 5312 5665 5829 6147 6372 6475 7721 10718 13236 9930 10273 9140 7895 9971 10441 9321 11907 13722 17032
Department of Defense--Military Programs 50111 51147 52585 48780 56629 70069 80355 80771 80123 77497 77645 75033 77864 84852 87917 21807 95147 102259 113605 130912 153861 180693 204356 220863 245109 265440 273919 281889 294829 289694 261860 286574 278510 268577 259487 253196 258262 255793 261196 281028 290185 331845 388686 437034 474354 499344 528578 594662 636775 666715 678074 650867 607800 577898 567702 586478 575087 563150 561075 568339
Department of Education 816 985 973 1152 2416 3596 4072 3990 4594 5099 5537 5709 5747 7331 7897 2035 8717 9828 12167 14612 16973 14707 14433 15424 16596 17577 16670 18145 21468 22972 25196 25832 30109 24557 31205 29727 30009 31294 31285 33476 35523 46373 57145 62780 72858 93368 66372 65963 53389 93743 65484 57249 40910 59610 103288 68506 73669 80852 88426 94971
Department of Energy 2755 2700 2726 2579 2343 2253 2474 2393 2393 2200 2299 2304 2233 3230 3841 1048 5049 6412 7441 7260 11756 11656 10590 10990 10586 11025 10692 11165 11386 12083 12472 15515 16933 17830 17608 16195 14458 14414 15879 14971 16319 17669 19379 19892 21271 19649 20116 21400 23683 30778 31371 32484 24731 23638 30140 28303 28348 27611 28359 29398
Department of Health and Human Services 3529 4110 4610 4700 5715 9639 13074 15411 17397 20391 25309 25578 28062 33751 40261 10530 46493 51752 57820 68255 80821 88408 95008 102374 114270 122940 131410 140035 152689 175515 198095 231550 253821 278887 303060 319788 339514 350341 359429 382311 425885 465326 504922 542982 581390 614274 671982 700442 796267 854059 891247 848056 886291 936012 1012950 1092946 1110867 1131418 1215288 1270995
Department of Homeland Security 566 642 747 774 705 782 973 1055 1089 1011 1340 1833 1661 2099 2455 648 2755 3217 3415 4296 3943 3847 4689 5060 5007 5383 5383 6180 5671 7219 6654 7577 9653 10708 9376 9692 10533 10617 13321 13159 14980 17570 31970 26575 38697 69025 39156 40676 51719 44457 45741 47422 57217 43263 45685 46155 46443 45993 43099 41140
Department of Housing and Urban Development 826 -609 73 492 2482 3093 3727 713 2432 2796 3600 3580 4781 7512 7026 1361 5808 7650 9220 12735 14880 15232 15814 16663 28720 14139 15484 18938 19680 20167 22751 24470 25181 25845 29044 25236 27527 30181 32693 30781 33865 31788 37410 44984 42453 42435 45561 49088 61019 60141 57004 49600 56577 38527 42390 43896 43574 42981 41983 40642
Department of the Interior 606 730 755 745 866 863 973 1073 1087 1345 1609 1780 1854 2221 2433 855 3220 3874 4168 4472 4456 3944 4552 4936 4804 4774 5037 5138 5194 5814 6082 6531 6879 7064 7479 6776 6763 7222 7783 7998 7743 9739 9193 8606 9292 9037 10469 9817 11775 13164 13519 12891 9607 11279 13008 14707 15111 16006 15986 15936
Department of Justice 236 256 275 327 305 336 359 423 537 801 1053 1460 1728 1985 2140 548 2220 2248 2353 2438 2438 2325 2493 2816 3182 3336 3807 4656 5275 5886 7670 9208 9485 9369 10149 11049 13076 14045 16181 16846 18443 21178 20790 29601 22361 23324 23349 26545 27711 29556 30519 31159 29745 28620 36087 32463 35333 33900 34387 36419
Department of Labor 3914 3523 3454 3121 3239 3562 4180 4161 4976 8456 10426 9561 9964 18578 26524 6109 23225 23694 23448 30542 30911 31479 38683 25348 24738 24934 24208 22662 23442 26087 34790 47889 45452 37819 32808 33163 31088 30580 32995 31873 39707 64686 69563 56687 46949 43138 47544 58838 138157 173053 131975 104588 80307 56774 52797 56921 57997 56094 59006 60458
Department of State 457 572 455 552 629 655 645 631 661 680 747 807 955 1075 1393 407 1449 1658 1987 2382 2347 2684 2793 2982 3303 3590 3572 4217 4576 4796 5149 5927 6385 6784 6263 5730 6029 5396 6554 6687 7487 9327 9343 10915 12748 12953 13737 17493 21427 23802 24354 26947 25972 27483 30521 30189 30567 28935 28770 28528
Department of Transportation 3854 4145 4736 5201 5145 5242 5555 5724 6136 7039 7244 7834 7724 9144 11709 2902 11978 12791 14642 18166 20922 17931 18239 20507 22510 24885 22851 23698 23828 25642 27237 29098 30958 33563 35132 35144 36072 35554 37672 41555 49231 56252 50764 54879 56596 60139 61697 64944 73004 77750 77302 75149 76322 76174 80208 83932 90187 94047 95293 96815
Department of the Treasury 8474 9553 10289 10791 11761 12737 14290 16473 19070 20452 21539 30201 35369 41843 43407 10272 48061 54010 63830 75451 91691 109418 115366 139911 163688 178076 178684 200406 229334 253915 274606 291005 296825 305550 346875 362862 377491 389005 385045 390524 388268 371187 368256 375844 410240 464675 490589 548797 701775 444338 538707 464714 399068 446897 506375 580379 676958 761724 844885 921121
Department of Veterans Affairs 5608 5501 5662 5710 5962 6691 7018 7670 8652 9758 10713 11970 13339 16577 18416 3959 18020 18965 19891 21137 22907 23941 24827 25580 26322 26523 26932 29253 30014 28976 31191 33872 35461 37377 37748 36896 39253 41724 43125 47044 45012 50868 56921 59554 69815 69777 72792 84749 95457 108274 126918 124124 138464 149074 160797 179869 180868 177875 192701 201047
Corps of Engineers--Civil Works 944 1065 1091 1171 1245 1273 1252 1222 1168 1337 1490 1676 1664 2031 2112 581 2271 2564 2898 3218 3139 2962 2918 3036 2998 2806 2757 3028 3256 3324 3341 3565 3354 3483 3745 3627 3598 3775 3934 4229 4640 4727 4682 4728 4719 6944 3918 5075 6842 9876 10138 7777 6299 6535 7463 7595 6731 6561 6340 6208
Other Defense Civil Programs 956 1077 1287 1465 1681 1937 2206 2557 2974 3510 4002 4505 5216 6319 7358 1958 8251 9203 10315 11961 13788 14997 16004 16536 15809 17483 17962 19039 20230 21690 23238 24746 25957 26969 27972 28947 30279 31204 31987 32801 34131 35136 39874 41726 43481 44435 47112 45785 57276 54032 54775 77313 56811 57370 59725 63757 61460 59701 65946 67366
Environmental Protection Agency 70 87 117 134 158 190 249 303 384 701 763 1114 2030 2531 3118 1108 4365 4072 4800 5603 5242 5081 4312 4076 4490 4867 4904 4871 4906 5108 5769 5950 5930 5855 6351 6046 6164 6269 6733 7223 7367 7451 8041 8328 7913 8321 8259 7939 8070 11007 10772 12796 9484 9399 8325 8627 9745 9268 8528 8796
Executive Office of the President 12 13 15 16 16 19 21 24 29 38 47 50 67 93 80 16 74 75 81 96 96 95 94 96 111 108 110 122 124 158 193 186 194 231 215 202 221 237 417 283 246 451 386 3349 7686 5379 2956 1173 743 582 484 405 380 375 401 472 861 718 532 515
General Services Administration 382 425 520 612 561 629 482 526 530 546 655 795 929 341 -13 30 70 213 211 573 795 550 528 463 364 713 462 -95 -444 -170 445 457 721 332 679 560 882 826 -413 74 -309 -684 589 -451 20 24 27 343 319 861 1889 1753 -368 -767 -1178 -641 -76 -471 87 125
International Assistance Programs 3171 3169 3226 3248 3260 3375 2814 2803 2655 2888 2980 2317 3029 3665 3742 1329 3616 5123 3757 7747 8127 7922 7878 10835 11858 11040 10406 7252 4291 10085 11723 11107 11524 10497 11128 9665 10075 8886 10070 12087 11804 13289 13449 13639 15024 13917 12752 11359 14797 20041 20583 20009 19672 18740 24006 25866 24746 23435 22982 23213
National Aeronautics and Space Administration 1257 2552 4171 5092 5933 5425 4722 4251 3752 3382 3423 3312 3255 3269 3671 953 4002 4164 4380 4959 5537 6155 6853 7055 7251 7403 7591 9092 11036 12429 13878 13961 14305 13694 13378 13881 14360 14194 13636 13428 14092 14405 14610 15152 15602 15125 15861 17833 19168 18906 17618 17190 16975 17095 18097 18732 18915 19210 19488 19688
National Science Foundation 183 206 310 309 368 415 449 490 464 522 567 585 647 662 733 207 753 803 870 912 976 1099 1055 1193 1309 1536 1547 1644 1736 1821 2064 2230 2429 2605 2814 2988 3093 3143 3246 3448 3662 4155 4690 5092 5403 5510 5488 5785 5958 6719 7146 7255 7417 7053 7082 7487 8605 7717 7820 7743
Office of Personnel Management 1017 1175 1304 1454 1726 1934 2154 2284 2652 3167 3776 4607 5708 7062 8323 2354 9633 10962 12663 15056 18096 19983 21278 22590 23727 23955 26966 29191 29073 31949 34808 35596 36794 38596 41276 42870 45404 46297 47519 48655 50894 52540 54135 56547 59500 62400 58431 64393 72302 69915 74090 79457 83867 87917 94672 97185 96363 99491 103363 107224
Small Business Administration 230 142 133 243 210 151 284 110 253 333 452 1317 753 666 624 94 758 2820 1699 2026 2032 773 661 510 680 557 -65 -54 85 692 613 546 785 779 677 873 333 -77 57 -421 -570 493 1558 4075 2502 905 1175 528 2246 6128 6163 2936 477 194 -571 990 855 1065 1096 1104
Social Security Administration (On-Budget) 0 0 0 0 0 94 94 414 458 465 538 567 2750 5279 5576 1290 6014 6595 6228 7087 7862 8520 29854 17651 16793 19316 16524 18113 18709 17276 19008 24943 28143 31164 31037 30694 34309 37542 40021 45121 40007 45816 46333 49008 54556 53252 54917 58602 78657 70758 155316 188241 109849 81184 88581 99495 100012 100319 109943 115529
Social Security Administration (Off-Budget) 14365 15788 16620 17460 20694 21631 23760 26885 29812 35408 39620 48565 55373 64159 73384 19763 84344 93120 103316 117872 138914 155120 150731 171167 183434 190684 202422 214489 227473 244998 266395 281418 298349 313881 330370 343869 358372 370068 379212 396169 421257 442010 461400 481200 506779 532491 566846 599197 648892 683420 628878 632903 757542 824587 865200 908104 957655 1013971 1073869 1137271
Other Independent Agencies (On-Budget) 2283 1615 1178 1815 2494 3683 4290 2918 4263 5223 5082 5497 7076 8595 8490 3297 9433 9022 10324 13953 11802 9184 8644 8846 7051 8871 10475 19020 30727 68704 76870 14405 -17321 3356 -5996 2743 -2813 10878 6189 8803 11386 16705 14579 10103 16766 14003 12913 47221 47631 -7525 17457 30021 28180 9087 20265 19973 19055 19168 21214 24530
Other Independent Agencies (Off-Budget) 0 0 0 0 0 0 0 0 0 0 355 157 773 1112 1085 -726 -173 -496 -891 -431 89 -553 322 360 142 42 943 1712 -310 1626 1317 659 1441 1103 -1969 -180 -49 217 1021 2029 2302 -651 -5245 -4130 -1791 -1075 5093 2417 304 4700 808 2670 -1913 -2531 -558 -1608 1913 1327 280 282
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment