BenHeubl/data.csv

## data.csv

          
            year
            males_with_age_of_26
            total_inner_london
            percentage

            
              2001
              36392
              1419967
              2.5628764612

            
              2002
              36962
              1430147
              2.5844925954

            
              2003
              37564
              1444894
              2.5997753257

            
              2004
              38338
              1467884
              2.6117692466

            
              2005
              39015
              1489451
              2.6193998184

            
              2006
              39428
              1503320
              2.6227344812

            
              2007
              39876
              1520751
              2.622122017

            
              2008
              40399
              1542631
              2.6188279769

            
              2009
              41132
              1571515
              2.617342955

            
              2010
              41748
              1596261
              2.615381188

            
              2011
              42252
              1619882
              2.6083379574

            
              2012
              41725
              1643731
              2.5384565009

            
              2013
              40700
              1671178
              2.4354191177

            
              2014
              42273
              1690568
              2.5005295665

            
              2015
              43055
              1709646
              2.5183635701

            
              2016
              44011
              1728215
              2.5466142823

            
              2017
              44006
              1746117
              2.5202455397

            
              2018
              42974
              1763316
              2.437128419

            
              2019
              42571
              1779752
              2.3919723533

            
              2020
              42692
              1795375
              2.3778893886

            
              2021
              41999
              1810214
              2.3200871055

            
              2022
              42296
              1824322
              2.3184287058

            
              2023
              42247
              1837686
              2.2989017678

            
              2024
              41702
              1850327
              2.2537570552

            
              2025
              41475
              1862356
              2.2270303021

            
              2026
              40933
              1873946
              2.1843111851

            
              2027
              40367
              1885233
              2.1412441718

            
              2028
              39880
              1896271
              2.1030740687

            
              2029
              40346
              1907194
              2.1154447027

            
              2030
              40953
              1918114
              2.1350629948

            
              2031
              41454
              1928981
              2.1490141826

            
              2032
              42427
              1939729
              2.1872602301

            
              2033
              43058
              1950380
              2.207649769

            
              2034
              43958
              1960931
              2.2416962512

            
              2035
              43812
              1971309
              2.2225002615

            
              2036
              44214
              1981449
              2.2314168676

            
              2037
              44687
              1991317
              2.2440721352

            
              2038
              44929
              2000724
              2.2456568508

            
              2039
              44473
              2009735
              2.2128650129

            
              2040
              44438
              2018392
              2.2016627768

            
              2041
              44516
              2026749
              2.1964344207

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Dot Plot with Date Scale and Axis</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

			body {
				background-color: #fbf3e3;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font: bold 37px "Century Schoolbook", Georgia, Times, serif;
	color: #be1258;
	line-height: 90%;
	margin: .2em 0 .4em 0;
	letter-spacing: -2px;
			}

			p {
				color: #39677f;
        font-size: 10px;
        margin: 5px;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-size: 11px;

			}

			svg {
				background-color: #fbf3e3;
			}

			circle:hover {
				fill: #39677f;
				stroke: #6cacc4;

			}

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

			.axis text {
				font-family: sans-serif;
				font-size: 9px;
			}

		</style>
	</head>
	<body>

		<h1>The long-term projection for male 26 year olds for Inner London</h1>

		<p>This is GLA's 2014 round of projection for inner London's male 26 year olds. I picked it as i was interested in how my current age group was and will be present in the years to come

		2014 round population projections. Source: <a href="http://data.london.gov.uk/dataset/2014-round-population-projections">data.london.gov.uk</a>, 2014</p>


		<script type="text/javascript">


			var w = 900;
			var h = 600;
			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left


			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");


			var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);

			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);


			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

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


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


			d3.csv("data.csv", function(data) {

				xScale.domain([
					d3.min(data, function(d) {
						return dateFormat.parse(d.year);
					}),
					d3.max(data, function(d) {
						return dateFormat.parse(d.year);
					})
				]);

				yScale.domain([
					d3.max(data, function(d) {
						return +d.percentage;
					}),
					2
				]);

				var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

				circles.attr("cx", function(d) {
						return xScale(dateFormat.parse(d.year));
					})
					.attr("cy", function(d) {
						return yScale(d.percentage);
					})
					.attr("r", 0)
					.attr("fill", "#be1258")
					.attr("stroke", "#e8a3ba")
					.append("title")
					.text(function(d) {
						return "For " + d.year + "'s 26 year old males: There were " + d.males_with_age_of_26 + " for a total inner london population of" + d.total_inner_london + ". This makes " + d.percentage + " % of people for inner London.";
					});

					circles.sort(function(a, b) {
						return d3.ascending(+a.year, +b.year);
					})
					.transition()
					.delay(function(d, i) {
						return i * 200;
					})
					.duration(7000)
					.attr("r", 18);

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
					.call(yAxis);

			});


		</script>
		<p>Hover over the circles and see the details for each year recorded/projected!</p>

	</body>
</html>
year	males_with_age_of_26	total_inner_london	percentage
2001	36392	1419967	2.5628764612
2002	36962	1430147	2.5844925954
2003	37564	1444894	2.5997753257
2004	38338	1467884	2.6117692466
2005	39015	1489451	2.6193998184
2006	39428	1503320	2.6227344812
2007	39876	1520751	2.622122017
2008	40399	1542631	2.6188279769
2009	41132	1571515	2.617342955
2010	41748	1596261	2.615381188
2011	42252	1619882	2.6083379574
2012	41725	1643731	2.5384565009
2013	40700	1671178	2.4354191177
2014	42273	1690568	2.5005295665
2015	43055	1709646	2.5183635701
2016	44011	1728215	2.5466142823
2017	44006	1746117	2.5202455397
2018	42974	1763316	2.437128419
2019	42571	1779752	2.3919723533
2020	42692	1795375	2.3778893886
2021	41999	1810214	2.3200871055
2022	42296	1824322	2.3184287058
2023	42247	1837686	2.2989017678
2024	41702	1850327	2.2537570552
2025	41475	1862356	2.2270303021
2026	40933	1873946	2.1843111851
2027	40367	1885233	2.1412441718
2028	39880	1896271	2.1030740687
2029	40346	1907194	2.1154447027
2030	40953	1918114	2.1350629948
2031	41454	1928981	2.1490141826
2032	42427	1939729	2.1872602301
2033	43058	1950380	2.207649769
2034	43958	1960931	2.2416962512
2035	43812	1971309	2.2225002615
2036	44214	1981449	2.2314168676
2037	44687	1991317	2.2440721352
2038	44929	2000724	2.2456568508
2039	44473	2009735	2.2128650129
2040	44438	2018392	2.2016627768
2041	44516	2026749	2.1964344207
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Dot Plot with Date Scale and Axis</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	background-color: #fbf3e3;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font: bold 37px "Century Schoolbook", Georgia, Times, serif;
	color: #be1258;
	line-height: 90%;
	margin: .2em 0 .4em 0;
	letter-spacing: -2px;
	}

	p {
	color: #39677f;
	font-size: 10px;
	margin: 5px;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;

	}

	svg {
	background-color: #fbf3e3;
	}

	circle:hover {
	fill: #39677f;
	stroke: #6cacc4;

	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 9px;
	}

	</style>
	</head>
	<body>

	<h1>The long-term projection for male 26 year olds for Inner London</h1>

	<p>This is GLA's 2014 round of projection for inner London's male 26 year olds. I picked it as i was interested in how my current age group was and will be present in the years to come

	2014 round population projections. Source: <a href="http://data.london.gov.uk/dataset/2014-round-population-projections">data.london.gov.uk</a>, 2014</p>


	<script type="text/javascript">


	var w = 900;
	var h = 600;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left



	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");



	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);



	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

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



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



	d3.csv("data.csv", function(data) {

	xScale.domain([
	d3.min(data, function(d) {
	return dateFormat.parse(d.year);
	}),
	d3.max(data, function(d) {
	return dateFormat.parse(d.year);
	})
	]);

	yScale.domain([
	d3.max(data, function(d) {
	return +d.percentage;
	}),
	2
	]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.attr("cy", function(d) {
	return yScale(d.percentage);
	})
	.attr("r", 0)
	.attr("fill", "#be1258")
	.attr("stroke", "#e8a3ba")
	.append("title")
	.text(function(d) {
	return "For " + d.year + "'s 26 year old males: There were " + d.males_with_age_of_26 + " for a total inner london population of" + d.total_inner_london + ". This makes " + d.percentage + " % of people for inner London.";
	});

	circles.sort(function(a, b) {
	return d3.ascending(+a.year, +b.year);
	})
	.transition()
	.delay(function(d, i) {
	return i * 200;
	})
	.duration(7000)
	.attr("r", 18);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
	.call(yAxis);

	});


	</script>
	<p>Hover over the circles and see the details for each year recorded/projected!</p>

	</body>
	</html>