enjalot · August 29, 2015 14:19
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: 12x;
 				margin: 10px 0 0 0;
 			}
            
            svg {
 				background-color: #E0DED8;
 			}
                                              
            circle {
                fill: #AC98DB;
                fill-opacity: 0.5;
                stroke: #AC98DB;
            }
            circle:hover {
                fill: #A5D867;
                fill-opacity: 0.5;
                stroke: #A5D867;
            }
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}


            
 		</style>
 			
 	</head>
 	
 	
 	
 	
 	<body>
        
     teaching example
 					
 								
 		<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.ordinal()
 								.rangeBands([ padding[3], w - padding[1] - padding[3] ], 0.5);
 			
 			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("timedata.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
                
        //d3.range creates an array like [0, 1, 2...] with the number
        //of elements you specify (in this case data.length)
 				xScale.domain(d3.range(data.length));

 				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,i) {
 						      return xScale(i);
 					})
 					       .attr("cy", function(d) {
 						      return yScale(+d.TimeJumpYrs);
 					})
                            .attr("r", 1)
                            .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", 10);
                        

        // 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("Index");
               

        // 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>
diff --git a/timedata.csv b/timedata.csv
	<!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: 12x;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: #E0DED8;
	}

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

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



	</style>

	</head>




	<body>

	teaching example


	<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.ordinal()
	.rangeBands([ padding[3], w - padding[1] - padding[3] ], 0.5);

	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("timedata.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

	//d3.range creates an array like [0, 1, 2...] with the number
	//of elements you specify (in this case data.length)
	xScale.domain(d3.range(data.length));

	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,i) {
	return xScale(i);
	})
	.attr("cy", function(d) {
	return yScale(+d.TimeJumpYrs);
	})
	.attr("r", 1)
	.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", 10);


	// 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("Index");


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