smckissock · November 7, 2015 14:11
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>Week 3</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 - <span name="year"></span></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>

    <form>
        <p>Choose year: <select class="select" /></p>
    </form>

    <script type="text/javascript">

        d3.csv("OutlaysByAgency1960_2020.csv", function (data) {
            console.log(data);

            for (i = 1962; i < 2021; i++) {
                data.forEach(function (d) {
                    if (+d[i] < 0)
                        d[i] = 0;
                    else
                        d[i] = d[i] / 1000;
                });
            }

            var years = [];
            // It would be better to just read the fields..
            for (i = 1962; i < 2021; i++) {
                if (i < 2015)
                    years.push(i);
                else
                    years.push(i + " estimate");
            }

            var select = d3.select('select').on('change', changeYear);

            d3.select('select')
                .selectAll('option')
                .data(years)
                .enter()
                .append('option')
 			    .text(function (d) {
 				    return d;
 				})
                .attr("value", (function (d, i) {
 				    return i;
 				}));

            select.property("value", '52');
            drawChart(years[52]);

            function drawChart(year) {
                // Show the selected year in the title
                d3.select("span").text(year);

                var
                    width = 1000
                    , height = 600

                    ,topPad = 40
                    ,rightPad = 0
                    ,bottomPad = 0
                    ,leftPad = 10;

                // Function to add columns to numbers 
                var addCommas = d3.format(",d");

                d3.select("svg").remove();
                var svg =
                    d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);

                // Sort descending on selected year
                data.sort(function (a, b) {
                    return +b[year] - +a[year];
                });

                var widthScale = d3.scale.linear()
 				    .domain([0, d3.max(data, function(d) { return +d[year]; }) ]) 
                    .range([0, width - 20]);

                var heightScale = d3.scale.ordinal()
                    .domain(data.map(function (d) { return d['Department or other unit']; }))
                    .rangeRoundBands([topPad, height], 0.1);

                var xAxis = d3.svg.axis()
 				    .scale(widthScale)
 				    .orient("top")
 					.ticks(5);

                var yAxis = d3.svg.axis()
 				    .scale(heightScale)
 					.orient("right");
                    
                svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect")
                    .attr("x", leftPad)
                    .attr("width", function (d) {
                        var num = +d[year];
                        if (num < 0)
                            return 0;
                        else
                            return widthScale(num);
                    })
                    .attr("y", function (d) {
                        return heightScale(d['Department or other unit']);
                    })
                    .attr("height", heightScale.rangeBand())
                    .style("fill", "lightgreen")
                    .append("title")
 					.text(function (d) {
 					    return d[year] + " billion dollars for " + d['Department or other unit'] + " in " + year;
 					});
                
                svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(" + leftPad + "," + (topPad - 5) + ")")
 					.call(xAxis);

                svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(5,0)")
 					.call(yAxis);
            }

            function changeYear() {
                var yearIndex = d3.select('select').property('value');
                drawChart(years[yearIndex]);
            };
        });

    </script>
 </body>
 </html>
diff --git a/OutlaysByAgency1960_2020.csv b/OutlaysByAgency1960_2020.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Week 3</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 - <span name="year"></span></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>

	<form>
	<p>Choose year: <select class="select" /></p>
	</form>

	<script type="text/javascript">

	d3.csv("OutlaysByAgency1960_2020.csv", function (data) {
	console.log(data);

	for (i = 1962; i < 2021; i++) {
	data.forEach(function (d) {
	if (+d[i] < 0)
	d[i] = 0;
	else
	d[i] = d[i] / 1000;
	});
	}

	var years = [];
	// It would be better to just read the fields..
	for (i = 1962; i < 2021; i++) {
	if (i < 2015)
	years.push(i);
	else
	years.push(i + " estimate");
	}

	var select = d3.select('select').on('change', changeYear);

	d3.select('select')
	.selectAll('option')
	.data(years)
	.enter()
	.append('option')
	.text(function (d) {
	return d;
	})
	.attr("value", (function (d, i) {
	return i;
	}));

	select.property("value", '52');
	drawChart(years[52]);

	function drawChart(year) {
	// Show the selected year in the title
	d3.select("span").text(year);

	var
	width = 1000
	, height = 600

	,topPad = 40
	,rightPad = 0
	,bottomPad = 0
	,leftPad = 10;

	// Function to add columns to numbers
	var addCommas = d3.format(",d");

	d3.select("svg").remove();
	var svg =
	d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// Sort descending on selected year
	data.sort(function (a, b) {
	return +b[year] - +a[year];
	});

	var widthScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d) { return +d[year]; }) ])
	.range([0, width - 20]);

	var heightScale = d3.scale.ordinal()
	.domain(data.map(function (d) { return d['Department or other unit']; }))
	.rangeRoundBands([topPad, height], 0.1);

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("top")
	.ticks(5);

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("right");

	svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", leftPad)
	.attr("width", function (d) {
	var num = +d[year];
	if (num < 0)
	return 0;
	else
	return widthScale(num);
	})
	.attr("y", function (d) {
	return heightScale(d['Department or other unit']);
	})
	.attr("height", heightScale.rangeBand())
	.style("fill", "lightgreen")
	.append("title")
	.text(function (d) {
	return d[year] + " billion dollars for " + d['Department or other unit'] + " in " + year;
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + leftPad + "," + (topPad - 5) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(5,0)")
	.call(yAxis);
	}

	function changeYear() {
	var yearIndex = d3.select('select').property('value');
	drawChart(years[yearIndex]);
	};
	});

	</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 estimate	2016 estimate	2017 estimate	2018 estimate	2019 estimate	2020 estimate
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