Sarah-W · December 20, 2015 19:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 /* CSS goes here. */
 svg{
 background-color : lightblue;
 outline-color   : darkgrey}

 path {
 fill   : grey;
 stroke : black }

 circle{
 stroke : black;
 fill-opacity :0.8
 }

 line{
 stroke : black
 }

 body{font: 11px sans-serif; }

 #sectionsvg line{stroke:darkgrey }

 #xax path,
 #yax path{
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  display: none;
  }
  
 .hidden{display: none; }

 /*#start{
 background-color : lightblue ;
 outline-color	 : darkgrey}
 */
 span{
 background-color : lightblue ;
 outline-color	 : darkgrey;
 border-radius	 : 3px;
 width			 : 100px
 }

 </style>
 <body>
 <div style="width: 1000px;">
 	 <div style="width: 470px; text-align: center;">Drag to position, scroll to zoom</div>
 	 <div id="start" style="width: 470px; text-align: center; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;"><span>  Click here to start  </span></div>
 	 <div id="timestamp" style="width: 470px; text-align: center;">Days: 0</div>
 	 <div id="mapdiv" style="width: 470px; float: left; text-align: center;">
 	  <svg width="450" height="450" id="mapsvg">
 	    <g id="map">
 		     <g id="coastlines">
 			 </g>
 			 <g id="earthquakes">
 			 </g>
 		</g>
 	   </svg>
 	 </div>

 	 <div id="sectdiv" style="width: 500px; float: left; text-align: center;">							   
 	  <svg width="500" height="350" id="sectionsvg">
 	  	   <text y="15" x="225" >Longitude</text>
 		   <text transform=" rotate(-90) translate(-200,10)">Depth (km)</text>
 	 	   <g id="section" transform = "translate (40,40)"></g>
 	  </svg>
 	 </div>	
 	 <div id="scale" style= "width: 500px; float: left;">
 	   <svg width="500" height="98" id="scalesvg">
 	 	   <g id="scaleg"></g>
 		   <text y="65" x="70" >Magnitude: </text>
 	   </svg>
 	 </div> 
 </div>

 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>

 <script>

 /* Variables and stuff */

 var width 	  	= 450,
    height 	  	= 450,
 	timestep 	= 1/24, 
 	time  	    = 0,
 	scale 	    = 1,	
 	sectscale	= 1;

 var magscale = d3.range(7).map(function(d) { return {magnitude: d+1 };});
 var color 		= d3.scale.linear().domain([0,200]).range(['red', 'black']);
 var projection 	= d3.geo.mercator()
    .center([185, -42.5 ])
    .scale(1300)
    .rotate([0,0]);
 

 //construct the graticule and axes for the section
 var graticule 	= []
 var lonAxisLabels		= []

 for (var n=164; n <= 182; n=n+2){var lon = projection([n,-43]);
 		 		  	 	   graticule.push({y1:0, y2:300, x1:lon[0], x2:lon[0]});
 		 	  	   	  	   if(n > 180){lonAxisLabels.push(n-360);}
 						   else {lonAxisLabels.push(n)};
 						   }
 						   
 for (var n=0; n <= 15; n++){graticule.push({y1:n*20, y2:n*20, x1:projection([164,-43])[0], x2:projection([182,-43])[0]});}

 var xScale = d3.scale.linear().domain([164,182]).range([projection([164,-43])[0],projection([182,-43])[0]]);
 var xAxis =  d3.svg.axis()
 		  	.scale(xScale)
    		.orient("top")
 			.ticks(10)
 			.tickFormat(function(d,n){return lonAxisLabels[n] ; });

 var yScale = d3.scale.linear().range([0,300]).domain([0,300]);
 var yAxis =  d3.svg.axis()
 		  	.scale(yScale)
    		.orient("left")
 			.ticks(13);

 d3.select("#sectionsvg").append("g").attr("id","yax")
 									.attr("transform","translate (40,40)")
 									.call(yAxis);
 									
 d3.select("#sectionsvg").append("g").attr("id","xax")
 									.attr("transform","translate (40,40)")
 									.call(xAxis);									
 //Put the map on the #mapsvg
 d3.json("nz.json", function(error, nz) {
 d3.select("#coastlines").selectAll("path")
      		  .data(nz.features).enter().append('path')
      		  .attr("d", d3.geo.path().projection(projection));
 });
 //Put the graticule on the section

 d3.select("#section").selectAll("line")
      		  .data(graticule).enter().append('line')
      		  .attr("x1", function(d){return d.x1})
 			  .attr("x2", function(d){return d.x2})
 			  .attr("y1", function(d){return d.y1})
 			  .attr("y2", function(d){return d.y2});
 			  
 //Put the scale on the scale

 d3.select("#scaleg").selectAll("circle")
      		  .data(magscale).enter().append("circle")
 			  .attr("fill","red")
 			  .attr("cx", function(d){return 100+d.magnitude*32})
 			  .attr("cy",function(d){return 50-2*d.magnitude})
 			  .attr("r",function(d){return 2*d.magnitude;});

 d3.select("#scaleg").selectAll("text")
      		  .data(magscale).enter().append("text")
 			  .attr("x", function(d){return 100+d.magnitude*32})
 			  .attr("y",function(d){return 65})
 			  .attr("text-anchor", "middle")
 			  .text(function(d){return d.magnitude;});			  


 //read the quake data
 d3.csv("quake_data.csv", function(error, quakes) {
  			quakes.forEach(function(d) {
 			d.latitude   = +d.latitude;
 			d.longitude  = +d.longitude;
 			d.magnitude  = +d.magnitude;
 			d.daycount   = +d.daycount;
 			d.depth	     = +d.depth;
 			d.proj 		 = projection([+d.longitude,+d.latitude]);
 			d.colour	 = color(d.depth);
 			});
 			
 //stick the quake data on to circles 			
 d3.select("#earthquakes").selectAll("circle")
      		  .data(quakes).enter().append("circle")
 			  .attr("fill",function(d){return d.colour})
 			  .attr("transform", function(d){return "translate(" + d.proj + ")";})
 			  .attr("r",function(d){return 2*d.magnitude;});
 			  

 d3.select("#section").selectAll("circle")
      		  .data(quakes).enter().append("circle")
 			  .attr("fill",function(d){return d.colour;})
 			  .attr("cy",function(d){return d.depth;})
 			  .attr("r",function(d){return 2*d.magnitude;})
 			  .attr("cx",function(d){return d.proj[0];});
 // GO!			  
 d3.select("#start").on("click",function(){
  time = 0;
  d3.select("#start").html("<span>  Click here to restart  </span>")
  var myVar=setInterval(function(){	
  	  					//change the timestamp			   
  	  					d3.select("#timestamp").html("Days: " + Math.round(time));
 						//increment the circle  	
 						d3.select("#map").selectAll("circle")
 						              .attr("class",function(d){if (Math.abs(d.daycount-time) < 1.5*timestep)
 											                {return "null";}
 															 else {return "hidden";}});
 											  
 						d3.select("#section").selectAll("circle")
 						              .attr("class",function(d){if (Math.abs(d.daycount-time) < 1.5*timestep)
 											                {return "null";}
 															 else {return "hidden";}});
 									 				  	
 						time=time+timestep;
 						if (time>10){clearTimeout(myVar);}			  
 						},200);
  });
 });		



 			
 // zoom and pan map 

 var zoommap = d3.behavior.zoom()
    .on("zoom",function() {
 	//scale=Math.max(d3.event.scale,1);
 	scale = d3.event.scale;
 	 //console.log(Math.max(scale,1));
 	// scale =Math.max([scale,1]);
     d3.select("#map").attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+scale+")");
     d3.select("#map").selectAll("path")  
            .attr("d", d3.geo.path().projection(projection))
 			.style("stroke-width", function(){return 1/scale}); 
 	 d3.select("#map").selectAll("circle")  
             .attr("r",function(d){return 2*d.magnitude/scale;})
 		   	 .style("stroke-width", function(){return 1/scale});
 		 
  });

 d3.select("#mapsvg").call(zoommap);

 var zoomsect = d3.behavior.zoom()
    .on("zoom",function() {
 	 
 	 sectscale=d3.event.scale;
 	 
     d3.select("#section").attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+sectscale+")");
 	 d3.select("#section").selectAll("circle")  
             .attr("r",function(d){return 2*d.magnitude/sectscale;})
 		   	 .style("stroke-width", function(){return 1/sectscale});
 	 d3.select("#section").selectAll("line")  
 		   	 .style("stroke-width", function(){return 1/sectscale});
 	
 	d3.select("#xax").attr("transform","translate("+d3.event.translate[0]+",40)scale("+sectscale+")");
 	d3.select("#xax").selectAll("text").attr("transform","scale("+1/sectscale+")");
 	d3.select("#xax").selectAll("line").attr("transform","scale("+1/sectscale+")");

 	d3.select("#yax").attr("transform","translate(40,"+d3.event.translate[1]+")scale("+sectscale+")");
 	d3.select("#yax").selectAll("text").attr("transform","scale("+1/sectscale+")");
 	d3.select("#yax").selectAll("line").attr("transform","scale("+1/sectscale+")");
 					  
  });

 d3.select("#sectionsvg").call(zoomsect);
 </script>
 </body>
diff --git a/nz.json b/nz.json
diff --git a/quake_data.csv b/quake_data.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	/* CSS goes here. */
	svg{
	background-color : lightblue;
	outline-color : darkgrey}

	path {
	fill : grey;
	stroke : black }

	circle{
	stroke : black;
	fill-opacity :0.8
	}

	line{
	stroke : black
	}

	body{font: 11px sans-serif; }

	#sectionsvg line{stroke:darkgrey }

	#xax path,
	#yax path{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	display: none;
	}

	.hidden{display: none; }

	/*#start{
	background-color : lightblue ;
	outline-color : darkgrey}
	*/
	span{
	background-color : lightblue ;
	outline-color : darkgrey;
	border-radius : 3px;
	width : 100px
	}

	</style>
	<body>
	<div style="width: 1000px;">
	<div style="width: 470px; text-align: center;">Drag to position, scroll to zoom</div>
	<div id="start" style="width: 470px; text-align: center; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;"><span> Click here to start </span></div>
	<div id="timestamp" style="width: 470px; text-align: center;">Days: 0</div>
	<div id="mapdiv" style="width: 470px; float: left; text-align: center;">
	<svg width="450" height="450" id="mapsvg">
	<g id="map">
	<g id="coastlines">
	</g>
	<g id="earthquakes">
	</g>
	</g>
	</svg>
	</div>

	<div id="sectdiv" style="width: 500px; float: left; text-align: center;">
	<svg width="500" height="350" id="sectionsvg">
	<text y="15" x="225" >Longitude</text>
	<text transform=" rotate(-90) translate(-200,10)">Depth (km)</text>
	<g id="section" transform = "translate (40,40)"></g>
	</svg>
	</div>
	<div id="scale" style= "width: 500px; float: left;">
	<svg width="500" height="98" id="scalesvg">
	<g id="scaleg"></g>
	<text y="65" x="70" >Magnitude: </text>
	</svg>
	</div>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<script>

	/* Variables and stuff */

	var width = 450,
	height = 450,
	timestep = 1/24,
	time = 0,
	scale = 1,
	sectscale = 1;

	var magscale = d3.range(7).map(function(d) { return {magnitude: d+1 };});
	var color = d3.scale.linear().domain([0,200]).range(['red', 'black']);
	var projection = d3.geo.mercator()
	.center([185, -42.5 ])
	.scale(1300)
	.rotate([0,0]);


	//construct the graticule and axes for the section
	var graticule = []
	var lonAxisLabels = []

	for (var n=164; n <= 182; n=n+2){var lon = projection([n,-43]);
	graticule.push({y1:0, y2:300, x1:lon[0], x2:lon[0]});
	if(n > 180){lonAxisLabels.push(n-360);}
	else {lonAxisLabels.push(n)};
	}

	for (var n=0; n <= 15; n++){graticule.push({y1:n20, y2:n20, x1:projection([164,-43])[0], x2:projection([182,-43])[0]});}

	var xScale = d3.scale.linear().domain([164,182]).range([projection([164,-43])[0],projection([182,-43])[0]]);
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top")
	.ticks(10)
	.tickFormat(function(d,n){return lonAxisLabels[n] ; });

	var yScale = d3.scale.linear().range([0,300]).domain([0,300]);
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(13);

	d3.select("#sectionsvg").append("g").attr("id","yax")
	.attr("transform","translate (40,40)")
	.call(yAxis);

	d3.select("#sectionsvg").append("g").attr("id","xax")
	.attr("transform","translate (40,40)")
	.call(xAxis);
	//Put the map on the #mapsvg
	d3.json("nz.json", function(error, nz) {
	d3.select("#coastlines").selectAll("path")
	.data(nz.features).enter().append('path')
	.attr("d", d3.geo.path().projection(projection));
	});
	//Put the graticule on the section

	d3.select("#section").selectAll("line")
	.data(graticule).enter().append('line')
	.attr("x1", function(d){return d.x1})
	.attr("x2", function(d){return d.x2})
	.attr("y1", function(d){return d.y1})
	.attr("y2", function(d){return d.y2});

	//Put the scale on the scale

	d3.select("#scaleg").selectAll("circle")
	.data(magscale).enter().append("circle")
	.attr("fill","red")
	.attr("cx", function(d){return 100+d.magnitude*32})
	.attr("cy",function(d){return 50-2*d.magnitude})
	.attr("r",function(d){return 2*d.magnitude;});

	d3.select("#scaleg").selectAll("text")
	.data(magscale).enter().append("text")
	.attr("x", function(d){return 100+d.magnitude*32})
	.attr("y",function(d){return 65})
	.attr("text-anchor", "middle")
	.text(function(d){return d.magnitude;});


	//read the quake data
	d3.csv("quake_data.csv", function(error, quakes) {
	quakes.forEach(function(d) {
	d.latitude = +d.latitude;
	d.longitude = +d.longitude;
	d.magnitude = +d.magnitude;
	d.daycount = +d.daycount;
	d.depth = +d.depth;
	d.proj = projection([+d.longitude,+d.latitude]);
	d.colour = color(d.depth);
	});

	//stick the quake data on to circles
	d3.select("#earthquakes").selectAll("circle")
	.data(quakes).enter().append("circle")
	.attr("fill",function(d){return d.colour})
	.attr("transform", function(d){return "translate(" + d.proj + ")";})
	.attr("r",function(d){return 2*d.magnitude;});


	d3.select("#section").selectAll("circle")
	.data(quakes).enter().append("circle")
	.attr("fill",function(d){return d.colour;})
	.attr("cy",function(d){return d.depth;})
	.attr("r",function(d){return 2*d.magnitude;})
	.attr("cx",function(d){return d.proj[0];});
	// GO!
	d3.select("#start").on("click",function(){
	time = 0;
	d3.select("#start").html("<span> Click here to restart </span>")
	var myVar=setInterval(function(){
	//change the timestamp
	d3.select("#timestamp").html("Days: " + Math.round(time));
	//increment the circle
	d3.select("#map").selectAll("circle")
	.attr("class",function(d){if (Math.abs(d.daycount-time) < 1.5*timestep)
	{return "null";}
	else {return "hidden";}});

	d3.select("#section").selectAll("circle")
	.attr("class",function(d){if (Math.abs(d.daycount-time) < 1.5*timestep)
	{return "null";}
	else {return "hidden";}});

	time=time+timestep;
	if (time>10){clearTimeout(myVar);}
	},200);
	});
	});




	// zoom and pan map

	var zoommap = d3.behavior.zoom()
	.on("zoom",function() {
	//scale=Math.max(d3.event.scale,1);
	scale = d3.event.scale;
	//console.log(Math.max(scale,1));
	// scale =Math.max([scale,1]);
	d3.select("#map").attr("transform","translate("+
	d3.event.translate.join(",")+")scale("+scale+")");
	d3.select("#map").selectAll("path")
	.attr("d", d3.geo.path().projection(projection))
	.style("stroke-width", function(){return 1/scale});
	d3.select("#map").selectAll("circle")
	.attr("r",function(d){return 2*d.magnitude/scale;})
	.style("stroke-width", function(){return 1/scale});

	});

	d3.select("#mapsvg").call(zoommap);

	var zoomsect = d3.behavior.zoom()
	.on("zoom",function() {

	sectscale=d3.event.scale;

	d3.select("#section").attr("transform","translate("+
	d3.event.translate.join(",")+")scale("+sectscale+")");
	d3.select("#section").selectAll("circle")
	.attr("r",function(d){return 2*d.magnitude/sectscale;})
	.style("stroke-width", function(){return 1/sectscale});
	d3.select("#section").selectAll("line")
	.style("stroke-width", function(){return 1/sectscale});

	d3.select("#xax").attr("transform","translate("+d3.event.translate[0]+",40)scale("+sectscale+")");
	d3.select("#xax").selectAll("text").attr("transform","scale("+1/sectscale+")");
	d3.select("#xax").selectAll("line").attr("transform","scale("+1/sectscale+")");

	d3.select("#yax").attr("transform","translate(40,"+d3.event.translate[1]+")scale("+sectscale+")");
	d3.select("#yax").selectAll("text").attr("transform","scale("+1/sectscale+")");
	d3.select("#yax").selectAll("line").attr("transform","scale("+1/sectscale+")");

	});

	d3.select("#sectionsvg").call(zoomsect);
	</script>
	</body>