2beb6239e39df3784788 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 {
                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