7e720ea94db56dbc9a21 by enjalot

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="//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: 12x;
				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><p>Time Jumps between 100 and 1000 years - By Episode.</p>
            <p>Adapted from: <a href="//www.theguardian.com/news/datablog/2010/aug/20/doctor-who-time-travel-information-is-beautiful">Guardian Data Blog</a>, 2010</p></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 = 600;
			var h = 400;
			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");

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


        // 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_TimeJourneys_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", 4)
                            .attr("fill", "#AC98DB")
                    
         // Add Tooltips to the scatterplot
                            .append("title")
                            .text(function(d) {
						      return d.DWactor + "'s Total Time Jump in " + d.EpTitle + " episode as The Doctor 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", 4);
                        

        // Add the X Axis                    
				    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (h - padding[3] + 2) + ")")
                        .call(xAxis)
                        // Add "Years" unit of measure text to x-axis
                        .append("text")
                        .attr("class", "label")
                        .attr("x", 540)
                        .attr("y", -20)
                        .attr("dy", ".91em")
                        .style("text-anchor", "end")
                        .text("Time Jump - Years");
               

        // Add the y Axis
                     svg.append("g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + padding[3] + ",0)")
                        .call(yAxis)
                        // Add rotated "Years" unit of measure text to x-axis
                        .append("text")
                        .attr("class", "label")
                        .attr("transform", "rotate(-90)")
                        .attr("x", -20)
                        .attr("y", 5)
                        .attr("dy", ".91em")
                        .style("text-anchor", "end")
                        .text("Time Jump - Years");
                
                
			});

		</script>

	</body>
	
</html>

DW_EARTH_TimeJourneys_000s_LE.csv

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