enjalot/index.html

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

## timedata.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
	<!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