IconicImagery · August 29, 2015 14:18
diff --git a/DW EARTH Time Journeys_000s_LE.csv b/DW EARTH Time Journeys_000s_LE.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Doctor Who Earth-Based Time Travel Adventures</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		
 		<style type="text/css">
 			
 			body {
                background-color: #E0E1DD;
            }
            
            svg {
 				background-color: #c8c8c8;
 			}
            
            rect {
                fill: #AC98DB;
            }
        
            h1 {
                font-family: sans-serif;
                font-size: 18px;
                position: relative;
                left: 10px;
                color: #333333;
            }
     
            h2 {
                font-family: sans-serif;
                font-size: 14px;
                position: relative;
                left: 10px;
                color: #333333;
            }
            
           p {
                font-family: sans-serif;
                font-size: 12px;
                position: relative;
                left: 10px;
                color: #333333;
            }
            rect:hover {
                fill: #A5D867;
                transition: fill 0.5s;
            }
 			

 		</style>
 		
 	</head>
 	
 	
 	<body>

 		<script type="text/javascript">	
            
              
            var body = d3.select('body');

                body.append('h1')
                    .text('(DW1) Hartnell through (DW11) Smith')
      
                body.append('h2')
                    .text('Time Jumps between 100 and 1000 years - By Episode.')
                
                body.append('p')
                    .text('The premise of Doctor Who is that he is a Time Lord, capable of ridiculously epic travels throughout time and space - even if it is billions of years into the past or future and/or numerous time jumps in a single episode / story arc. This dataset represents a fraction of his Earth-based Time Travel. The Time Jumps are the Sum of DateTo and DateFrom per the episode Date references themselves as scripted) ... the glory of Science Fiction!')
                
                 body.append('p')
                    .text('The source file includes data originally crowd-sourced by Doctor Who fans for the Guardian Data Blog and verified and/or adjusted by me: http://www.theguardian.com/news/datablog/2010/aug/20/doctor-who-time-travel-information-is-beautiful from 2010.')
                
                
      
 //Create the SVG
                
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", 400)
 						.attr("height", 300);

 //Load in contents of CSV file 

 			d3.csv("DW EARTH Time Journeys_000s_LE.csv", function(data) {
                
                	//Now CSV contents have been transformed into
 				//an array of JSON objects.

 				//Log 'data' to the console, for verification.
 					console.log(data);
                
                
 //Load in contents of CSV file 
                
 				data.sort(function(a, b) {
 					return d3.descending(a.TimeJumpYrs, b.TimeJumpYrs);

 					//If your numeric values aren't sorting properly,
 					//try commenting out the line above, and instead using:
 					//
 					//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
 					//
 					//Data coming in from the CSV is saved as strings (text),
 					//so the + signs here force JavaScript to treat those
 					//strings instead as numeric values, thereby fixing the
 					//sort order (hopefully!).
 				});

 				var rects = svg.selectAll("rect")
 								.data(data)
 								.enter()
 								.append("rect");

 				rects.attr("x", 0)
 					.attr("y", function(d, i) {
 						return i * 25;
 					})
 					.attr("width", function(d) {
 						return d.TimeJumpYrs * 0.5;
 					})
 					.attr("height", 15)
 					.append("title")
 					.text(function(d) {
 						return d.EpTitle + "'s Time Jump in Years for The Doctor is " + d.TimeJumpYrs;
 					});
                
            
 			});



 		</script>

 	</body>
 </html>
Season	DWactor	Generation	Episode	EpType	EpTitle	DateFrom	DateTo	TimeJumpYrs	Place	Locale
1	Hartnell	Classic	10	Regular	The Dalek Invasion of Earth	1963	2164	201	England	London
1	Hartnell	Classic	16	Regular	The Chase	1872	1996	124	Africa	Ghana
2	Troughton	Classic	48	Regular	The Seeds Of Death	1969	2190	221	England	London
3	Pertwee	Classic	60	Regular	Day of the Daleks	1972	2100	128	England	Northamtopnshire
3	Pertwee	Classic	71	Regular	Invasion of The Dinosaurs	1200	1974	774	England	London
5	Davison	Classic	128	Regular	The King's Demons	1215	1982	767	England	Cambridgeshire
5	Davison	Classic	131	Regular	The Awakening	1643	1983	340	England	Dorset
6	Colin Baker	Classic	137	Regular	Attack of the Cybermen	1985	2530	545	England	London
7	McCoy	Classic	150	Regular	Silver Nemesis	1638	1988	350	England	Windsor
7	McCoy	Classic	153	Regular	Ghost Light	1883	1983	100	England	Perivale Ealing Middlesex
9	Eccleston	NEW	157	Regular	Rose	1883	2005	122	England	London
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Doctor Who Earth-Based Time Travel Adventures</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>

	<style type="text/css">

	body {
	background-color: #E0E1DD;
	}

	svg {
	background-color: #c8c8c8;
	}

	rect {
	fill: #AC98DB;
	}

	h1 {
	font-family: sans-serif;
	font-size: 18px;
	position: relative;
	left: 10px;
	color: #333333;
	}

	h2 {
	font-family: sans-serif;
	font-size: 14px;
	position: relative;
	left: 10px;
	color: #333333;
	}

	p {
	font-family: sans-serif;
	font-size: 12px;
	position: relative;
	left: 10px;
	color: #333333;
	}
	rect:hover {
	fill: #A5D867;
	transition: fill 0.5s;
	}


	</style>

	</head>


	<body>

	<script type="text/javascript">


	var body = d3.select('body');

	body.append('h1')
	.text('(DW1) Hartnell through (DW11) Smith')

	body.append('h2')
	.text('Time Jumps between 100 and 1000 years - By Episode.')

	body.append('p')
	.text('The premise of Doctor Who is that he is a Time Lord, capable of ridiculously epic travels throughout time and space - even if it is billions of years into the past or future and/or numerous time jumps in a single episode / story arc. This dataset represents a fraction of his Earth-based Time Travel. The Time Jumps are the Sum of DateTo and DateFrom per the episode Date references themselves as scripted) ... the glory of Science Fiction!')

	body.append('p')
	.text('The source file includes data originally crowd-sourced by Doctor Who fans for the Guardian Data Blog and verified and/or adjusted by me: http://www.theguardian.com/news/datablog/2010/aug/20/doctor-who-time-travel-information-is-beautiful from 2010.')



	//Create the SVG

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

	//Load in contents of CSV file

	d3.csv("DW EARTH Time Journeys_000s_LE.csv", function(data) {

	//Now CSV contents have been transformed into
	//an array of JSON objects.

	//Log 'data' to the console, for verification.
	console.log(data);


	//Load in contents of CSV file

	data.sort(function(a, b) {
	return d3.descending(a.TimeJumpYrs, b.TimeJumpYrs);

	//If your numeric values aren't sorting properly,
	//try commenting out the line above, and instead using:
	//
	//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
	//
	//Data coming in from the CSV is saved as strings (text),
	//so the + signs here force JavaScript to treat those
	//strings instead as numeric values, thereby fixing the
	//sort order (hopefully!).
	});

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", 0)
	.attr("y", function(d, i) {
	return i * 25;
	})
	.attr("width", function(d) {
	return d.TimeJumpYrs * 0.5;
	})
	.attr("height", 15)
	.append("title")
	.text(function(d) {
	return d.EpTitle + "'s Time Jump in Years for The Doctor is " + d.TimeJumpYrs;
	});


	});



	</script>

	</body>
	</html>