hepplerj · September 19, 2015 22:03
diff --git a/carter.csv b/carter.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>DHRG</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

 <style>

  body {
    font: 10px "Helvetica Neue", Helvetica, sans-serif;
  }

  /* CSS comments */

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

 </style>
 </head>
 <body>

  <h2>Multi-Series Line Chart</h2>

    <div id="chart1"></div>

  <!-- comments  -->


 <script>

 var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

 var parseDate = d3.time.format("%Y").parse;

 var x = d3.time.scale()
        .range([0, width]);

 var y = d3.scale.linear()
        .range([height, 0]);

 var color = d3.scale.category20b();

 var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");

 var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

 var line = d3.svg.line()
            .interpolate("basis")
            .x(function(d) { return x(d.Year); })
            .y(function(d) { return y(d.Immigrants); });

 var svg = d3.select("#chart1")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform","translate(" + margin.left + "," + margin.top + ")");

 d3.csv("carter_immigration_stats.csv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year" && key !== "Total";  }));

  data.forEach(function(d) {
    d.Year = parseDate(d.Year);
  });

  var countries = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {
          date: d.Year,
          Immigrants: +d[name]
        };
      })
    };
  });

  // Set the domain of our X scale to the extent of the years
  x.domain(d3.extent(data, function(d) { d.Year; }));

  // Set the domain of our Y scale to the min and max of the no. of immigrants in
  // the entire dataset.
  y.domain([
    d3.min(countries, function(c) { return d3.min(c.values, function(v) { v.Immigrants; }); }),
    d3.max(countries, function(c) { return d3.max(c.values, function(v) { v.Immigrants; }); })
  ]);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);



  // console.log(countries);

 });

 </script>

 </body>
 </html>
Year	Total	Great Britain	Ireland	Scandinavia	Other Northwestern Europe	Germany	Poland	Other Central Europe	Former Soviet Union and Baltic States	Other Eastern Europe	Greece	Italy	Portugal	Spain	Other Southern Europe	Japan	China
1820	7691	2410	3614	23	452	968	5	0	14	1	0	30	35	139	0		1
1821	5936	3210	1518	24	521	383	1	0	7	0	0	63	18	191	0		0
1822	4418	1221	2267	28	522	148	3	0	10	4	0	35	28	152	0		0
1823	4016	1100	1908	7	528	183	3	0	7	2	0	33	24	220	1		0
1824	4965	1264	2345	20	671	230	4	0	7	2	5	45	13	359	0		0
1825	8543	2095	4888	18	719	450	1	0	10	0	0	75	13	273	1		1
1826	9751	2319	5408	26	968	511	0	0	4	2	4	57	16	436	0		0
1827	16719	4186	9766	28	1829	432	1	0	19	1	0	35	7	414	1		0
1828	24729	5352	12488	60	4700	1851	1	0	7	6	7	34	14	209	0		0
1829	12523	3179	7415	30	1065	597	0	0	1	1	1	23	9	202	0		1
1830	7217	1153	2721	19	1305	1976	2	0	3	2	3	9	3	21	0		0
1831	13039	2475	5772	36	2277	2413	0	0	1	0	0	28	0	37	0		0
1832	34193	5331	12436	334	5695	10194	34	0	52	0	1	3	5	106	2		0
1833	29111	4916	8648	189	5355	6988	1	0	159	1	1	1699	633	516	5		0
1834	57510	10490	24474	66	4468	17686	54	0	15	1	0	105	44	107	0		0
1835	41987	8970	20927	68	3369	8311	54	0	9	0	7	60	29	183	0		8
1836	70465	13106	30578	473	5189	20707	53	0	2	3	28	115	29	180	2		0
1837	71039	12218	28508	399	5769	23740	81	0	19	0	5	36	34	230	0		0
1838	34070	5420	12645	112	3839	11683	41	0	13	0	4	86	24	202	1		0
1839	64148	10271	23963	380	7891	21028	46	0	7	1	0	84	19	428	30		0
1840	80126	2613	39430	207	7978	29704	5	0	0	1	3	37	12	136	0		0
1841	76216	16188	37772	226	6077	15291	15	0	174	6	0	179	7	215	66		2
1842	99945	22005	51342	588	5361	20370	10	0	28	2	1	100	15	122	1		4
1843	49013	8430	19670	1777	4364	14441	17	0	6	5	4	117	32	145	5		3
1844	74745	14353	33490	1336	4343	20731	36	0	13	10	3	141	16	270	3		3
1845	109301	19210	44821	982	9466	34355	6	0	1	3	2	137	14	304	0		6
1846	146315	22180	51752	2030	12303	57561	4	0	248	4	3	151	2	73	4		7
1847	229117	23302	105536	1320	24336	74281	8	0	5	2	0	164	5	158	0		4
1848	218025	35159	112934	1113	9877	58465	0	0	1	3	1	241	67	164	0		0
1849	286501	55132	159398	3481	7634	60235	4	0	44	9	0	209	26	329	0		3
1850	250939	41679	133806	1373	9786	63182	3	0	31	13	2	373	366	325	0		3
(TQ)	57384	9406	30198	216	1684	15714	2	0	0	2	0	58	0	104	0		0
1851	369510	51487	221253	2438	20905	72482	10	0	1	2	0	447	50	435	0		0
1852	362484	40699	159548	4106	11278	145918	110	0	2	3	10	351	68	391	0		0
1853	361576	37576	162649	3396	14205	141946	33	0	3	15	12	555	95	1091	0		42
1854	405542	58647	101606	4222	23070	215009	208	0	2	7	1	1263	72	1433	2		13100
1855	187729	47572	49627	1349	14571	71918	462	0	13	9	0	1052	205	951	0		3526
1856	186083	44658	54349	1330	12403	71028	20	0	9	5	2	1365	128	786	0		4733
1857	216224	58479	54361	2747	6879	91781	124	0	25	11	4	1007	92	714	0		5944
1858	111354	28956	26873	2662	4580	45310	9	0	246	17	0	1240	170	1283	8		5128
1859	110949	26163	35216	1590	3727	41784	106	0	91	10	1	932	46	1283	0		3457
1860	141209	29737	48637	840	5278	54491	82	0	65	4	1	1019	122	932	1		5467
1861	81200	19675	23797	850	3769	31661	48	51	34	5	1	811	47	448	3	1	7518
1862	83710	24639	23351	2550	4386	27529	63	111	79	11	5	566	72	348	0	0	3633
1863	163733	66882	55916	3119	3245	33162	94	85	77	16	4	547	86	500	0	0	7214
1864	185233	53428	63523	2961	5621	57276	165	230	256	11	5	600	240	917	0	0	2975
1865	214048	82465	29772	7258	7992	83424	528	422	183	14	7	924	365	692	2	0	2942
1866	278916	94924	36690	14495	13648	115892	412	93	287	18	10	1382	344	718	3	7	2385
1867	283751	52641	72879	8491	12417	133426	310	692	205	26	10	1624	126	904	0	67	3863
1868	130090	24127	32068	11985	4293	55831	0	192	141	4	0	891	174	384	0	0	5157
1869	315963	84438	40786	43941	10585	131042	184	1499	343	18	8	1489	507	1123	0	63	12874
1870	328626	103677	56996	30742	9152	118225	223	4425	907	6	22	2891	697	663	0	48	15740
1871	265145	85455	57439	22132	7174	82554	535	4887	673	23	11	2816	887	558	1	78	7135
1872	352155	84912	68732	28575	15614	141109	1647	4410	1018	20	12	4190	1306	595	15	17	7788
1873	397541	89500	77344	35481	22892	149671	3338	7112	1634	53	23	8757	1185	541	10	9	20292
1874	262783	62021	53707	19178	15998	87291	1795	8850	4073	62	36	7666	1611	485	10	21	13776
1875	182961	47905	37957	14322	11987	47769	984	7658	7997	27	25	3631	1939	601	159	3	16437
1876	120920	29291	19575	12323	10923	31937	925	6276	4775	38	19	3015	1277	518	28	4	22781
1877	106195	23581	14569	11274	8621	29298	533	5396	6599	32	24	3195	2363	665	45	7	10594
1878	101612	22150	15932	12254	6929	29313	547	5150	3048	29	16	4344	1332	457	111	2	8992
1879	134259	29955	20013	21820	9081	34602	489	5963	4453	29	21	5791	916	457	669	4	9604
1880	348691	73273	71603	65657	15042	84638	2177	17267	5014	35	23	12354	808	389	411	4	5802
1881	528545	81376	72342	81582	26883	210485	5614	27935	5041	102	19	15401	1215	484	66	11	11890
1882	648186	102991	76432	105326	27796	250630	4672	29150	16918	134	126	32159	1436	378	38	5	39579
1883	522587	76606	81486	71994	24271	194786	2011	27625	9909	163	73	31792	1573	262	36	27	8031
1884	453686	65950	63344	52728	18768	179676	4536	36571	12689	388	37	16510	1927	300	262	20	279
1885	353083	57713	51795	40704	13732	124443	3085	27309	17158	941	172	13642	2024	350	15	49	22
1886	329529	62929	49619	46735	11737	84403	3939	28680	17800	670	104	21315	1194	344	60	194	40
1887	482829	93378	68370	67629	17307	106865	6128	40265	30766	2251	313	47622	1360	436	139	229	10
1888	538131	108692	73513	81924	23251	109717	5826	45811	33487	1393	782	51558	1625	526	26	404	26
1889	434790	87992	65557	57504	22010	99538	4922	34174	33916	1145	158	25307	2024	526	17	640	118
1890	445680	69730	53024	50368	20575	92427	11073	56199	35598	723	524	52003	2600	813	23	691	1716
1891	546085	66605	55706	60107	21824	113554	27497	71042	47426	1222	1105	76055	2999	905	38	1136	2836
1892	570876	42215	51383	66295	21731	119168	40536	76937	81511	1331	660	61631	3400	4078	0
1893	429324	35189	43578	58945	17888	78756	16374	57420	42310	625	1072	72145	4816	206	0	1380	472
1894	277052	22520	30231	32400	9514	53989	1941	38638	39278	1027	1356	42977	2190	920	71	1931	1170
1895	250342	28833	46304	26852	7313	32173	790	33401	35907	768	597	35427	1452	501	24	1150	539
1896	329067	24565	40262	33199	7611	31885	691	65103	51445	954	2175	68060	2766	351	0	1110	1441
1897	216397	12752	28421	21089	5323	22533	4165	33031	25816	943	571	59431	1874	448	0	1526	3363
1898	217786	12894	25128	19282	4698	17111	4726	39797	29828	1076	2339	58613	1717	577	0	2230	2071
1899	297349	13456	31673	22192	5150	17476		62491	60982	1738	2333	77419	2054	385	0	2844	1660
1900	424700	12509	35730	31151	5822	18507		114847	90787	6852	3771	100135	4234	355	0	12635	1247
1901	469237	14985	30561	39234	9279	21651		113390	85257	8199	5910	135996	4165	592	18	5269	2459
1902	619068	16898	29138	54038	10322	28304		171989	107347	8234	8104	178375	5307	975	37	14270	1649
1903	814507	33637	35310	77647	17009	40086		206011	136093	12600	14090	230622	9317	2080	5	19968	2209
1904	767933	51448	36142	60096	23321	46380		177156	145141	12756	11343	193296	6715	3996	143	14264	4309
1905	974273	84189	52945	60625	24693	40574		275693	184897	11022	10515	221479	5028	2600	13	10331	2166
1906	1018365	67198	34995	52781	23277	37564		265138	215665	18652	19489	273120	8517	1921	48	13835	1544
1907	1199566	79037	34530	49965	26512	37807		338452	258943	36510	36580	285731	9608	5784	107	30226	961
1908	691901	62824	30556	30175	22177	32309		168509	156711	27345	21489	128503	7307	3899	97	15803	1397
1909	654875	46793	25033	32496	17756	25540		170191	120460	11659	14111	183218	4956	2616	46	3111	1943
1910	926291	68941	29855	48267	23852	31283		258737	186792	25287	25888	215537	8229	3472	151	2720	1968
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>DHRG</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

	<style>

	body {
	font: 10px "Helvetica Neue", Helvetica, sans-serif;
	}

	/* CSS comments */

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>

	<h2>Multi-Series Line Chart</h2>

	<div id="chart1"></div>

	<!-- comments -->


	<script>

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y").parse;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category20b();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.Year); })
	.y(function(d) { return y(d.Immigrants); });

	var svg = d3.select("#chart1")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform","translate(" + margin.left + "," + margin.top + ")");

	d3.csv("carter_immigration_stats.csv", function(error, data) {
	if (error) throw error;

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year" && key !== "Total"; }));

	data.forEach(function(d) {
	d.Year = parseDate(d.Year);
	});

	var countries = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {
	date: d.Year,
	Immigrants: +d[name]
	};
	})
	};
	});

	// Set the domain of our X scale to the extent of the years
	x.domain(d3.extent(data, function(d) { d.Year; }));

	// Set the domain of our Y scale to the min and max of the no. of immigrants in
	// the entire dataset.
	y.domain([
	d3.min(countries, function(c) { return d3.min(c.values, function(v) { v.Immigrants; }); }),
	d3.max(countries, function(c) { return d3.max(c.values, function(v) { v.Immigrants; }); })
	]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);



	// console.log(countries);

	});

	</script>

	</body>
	</html>