IconicImagery · August 29, 2015 14:19
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: white;
 				font-family: Helvetica, Arial, sans-serif;
            }

            h1 {
 				font-size: 20x;
 				margin: 10px 0 0 0;
             
            }
            h2 {
                font-size: 18px;
                margin: 10px 0 0 0;
 			}
            
            h3 {
                font-size: 16px;
                margin: 10px 0 0 0;
 			}

 			p {
 				font-size: 14px;
 				margin: 10px 0 0 0;
 			}

 			svg {
 				background-color: #E0DED8;
 			}
                                              
            circle:hover {
                fill: #A5D867;
                transition: fill 0.5s;
            }
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}


            
 		</style>
 			
 	</head>
 	
 	
 	
 	
 	<body>
        
        <h1>Doctor Who Earth-Based Time Travel Adventures</h1>       
                
        <h2>(DW1) Hartnell through (DW11) Smith</h2>

 		<h3>Time Jumps between 100 and 1000 years - By Episode. Adapted from: <a href="http://www.theguardian.com/news/datablog/2010/aug/20/doctor-who-time-travel-information-is-beautiful">Guardian Data Blog</a>, 2010</h3>
 		
 		<p>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. </p>
 		<p></p>
 		<p>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!</p>
 		<p></p>
 					
 								
 		<script type="text/javascript">	
            
        
        //Set the dimensions of the SVG canvas / chart
            
            var w = 500;
 			var h = 300;
 			var padding = [ 20, 20, 50, 40 ];  //Top, right, bottom, left
            
            

        // Set the scale ranges

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


        // Define the axes
 			
 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("bottom")
 							.ticks(9);

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left")
 							.tickFormat(function(d) {
 								return d + "Time Jump Yrs";
 							});


        // Add the svg canvas

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

            
            
        //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);
                
                              
        // Scale the range of the data
                
 				xScale.domain([ 
 					d3.min(data, function(d) {
 						return +d.TimeJumpYrs;
 					}), 
 					d3.max(data, function(d) {
 						return +d.TimeJumpYrs
 					})
 				]);

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

                        
        // Add the scatterplot
                
 				var circles = svg.selectAll("circle")
 								.data(data)
 								.enter()
 								.append("circle");
                        

                	circles.attr("cx", function(d) {
 						      return xScale(d.TimeJumpYrs);
 					})
 					       .attr("cy", function(d) {
 						      return yScale(d.TimeJumpYrs);
 					})
                            .attr("r", 3)
                            .attr("fill", "#AC98DB")
                    
         // Add Tooltips to the scatterplot
                            .append("title")
                            .text(function(d) {
 						      return d.DWactor + "'s Total Time Jump in " + d.EpTitle + " episode is " + d.TimeJumpYrs + " years";
                        
        // Sort the scatterplot circles                    
                    circles.sort(function(a, b) {
 						      return d3.ascending(+a.TimeJumpYrs, +b.TimeJumpYrs);
 					})
                    
        // Set scatterplot transition & duration            
 					       .transition()
 					       .delay(function(d, i) {
                                return i * 50;
 					})
 					       .duration(2000)
 					       .attr("r", 3);
                        

        // Add the X Axis                    
 				    svg.append("g")
 					   .attr("class", "x axis")
 					   .attr("transform", "translate(0," + (h - padding[3] + 2) + ")")
 					   .call(xAxis);

        // Add the y Axis
                     svg.append("g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + padding[3] + ",0)")
                        .call(yAxis);           
                    });

                
        });
            

 		</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: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 20x;
	margin: 10px 0 0 0;

	}
	h2 {
	font-size: 18px;
	margin: 10px 0 0 0;
	}

	h3 {
	font-size: 16px;
	margin: 10px 0 0 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: #E0DED8;
	}

	circle:hover {
	fill: #A5D867;
	transition: fill 0.5s;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

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



	</style>

	</head>




	<body>

	<h1>Doctor Who Earth-Based Time Travel Adventures</h1>

	<h2>(DW1) Hartnell through (DW11) Smith</h2>

	<h3>Time Jumps between 100 and 1000 years - By Episode. Adapted from: <a href="http://www.theguardian.com/news/datablog/2010/aug/20/doctor-who-time-travel-information-is-beautiful">Guardian Data Blog</a>, 2010</h3>

	<p>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. </p>
	<p></p>
	<p>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!</p>
	<p></p>


	<script type="text/javascript">


	//Set the dimensions of the SVG canvas / chart

	var w = 500;
	var h = 300;
	var padding = [ 20, 20, 50, 40 ]; //Top, right, bottom, left



	// Set the scale ranges

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

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


	// Define the axes

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(9);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d) {
	return d + "Time Jump Yrs";
	});


	// Add the svg canvas

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



	//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);


	// Scale the range of the data

	xScale.domain([
	d3.min(data, function(d) {
	return +d.TimeJumpYrs;
	}),
	d3.max(data, function(d) {
	return +d.TimeJumpYrs
	})
	]);

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


	// Add the scatterplot

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


	circles.attr("cx", function(d) {
	return xScale(d.TimeJumpYrs);
	})
	.attr("cy", function(d) {
	return yScale(d.TimeJumpYrs);
	})
	.attr("r", 3)
	.attr("fill", "#AC98DB")

	// Add Tooltips to the scatterplot
	.append("title")
	.text(function(d) {
	return d.DWactor + "'s Total Time Jump in " + d.EpTitle + " episode is " + d.TimeJumpYrs + " years";

	// Sort the scatterplot circles
	circles.sort(function(a, b) {
	return d3.ascending(+a.TimeJumpYrs, +b.TimeJumpYrs);
	})

	// Set scatterplot transition & duration
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("r", 3);


	// Add the X Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[3] + 2) + ")")
	.call(xAxis);

	// Add the y Axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);
	});


	});


	</script>

	</body>

	</html>