module 4 assignment: data bound to map

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Orthographic projection</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

body {
				margin: 0;
				background-color: DarkGray;
				font-family: "nyt-cheltenham",georgia,Lucida sans,
					"times new roman",times,serif;
			}

#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}
			
			h1 {
				font-size: 28px;
				border-top: solid 8px #807166;
				border-bottom: solid 8px #807166;
			}
			p {
				font-size: 14px;
				line-height: 18px;		
				padding: 30px;	
				border-bottom: solid 2px #222222;			
			}	
						
			path text {
				text-anchor: center;
			}			
			.stroke {
			  fill: none;
			  stroke: #000;
			  stroke-width: 3px;
			}

.fill {
			  fill: AliceBlue;
			}

.graticule {
			  fill: none;
			  stroke: #777;
			  stroke-width: .5px;
			  stroke-opacity: .5;
			}

.land {
			  fill: #111111;
			}

.boundary {
			  fill: none;
			  stroke: #fff;
			  stroke-width: .5px;
			}

div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: auto;					
    height: auto;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

</style>
	</head>
	<body>
	
		<div id="container">
			<h1> Disparities in New Zealand </h1>

<p> It is always challenging to represent population related values
				across New Zealand because of the great disparities and gap in values.
				For example, 34 of the 76 Territorial Authorities (TA) show a density under
				10 per sq. km, when 8 have a value over 200, and one at almost 1600.
				</br>
				On the map below you can choose to see how TA compare
				in terms of population, density or median income.
				</br>
				The main urban centers (Auckland, Wellington and Christchurch) clearly stand out.</p>
				
			<button id="dens">Density</button>
			<button id="pop">Population</button>
			<button id="income">Median Income</button>
			
		
		</div>
		<script type="text/javascript">

//Width and height
			var w = 700;
			var h = 700;

// simple colour scale
		var coldens = d3.scale.linear()
					.domain([0		 , 10       , 50     , 100     , 700    , 1600    ])
					.range(["#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"])
			colinc = d3.scale.linear()
					.range(["#EF8A62","#F7F7F7","#67A9CF"]),			
			colpop = d3.scale.linear()
					.domain([0		 , 10000   , 50000   , 100000  , 400000  , 1600000])
					.range(["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"]);			
								
			// projection
				
			var projection = d3.geo.orthographic()
				.scale(w*4)	// zoom NZ
				.translate([w / 2, h / 2])
				.clipAngle(90)
				.rotate([-173,41.,0])
				.precision(.1);						
						
			// path generator
			var path = d3.geo.path()
							 .projection(projection);

var graticule = d3.geo.graticule();

// div for the tooltip
			var div = d3.select("#container").append("div")	
				.attr("class", "tooltip")				
				.style("opacity", 0);
				
			// create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

svg.append("defs").append("path")
				.datum({type: "Sphere"})
				.attr("id", "sphere")
				.attr("d", path);

svg.append("use")
				.attr("class", "stroke")
				.attr("xlink:href", "#sphere");

svg.append("use")
				.attr("class", "fill")
				.attr("xlink:href", "#sphere");

svg.append("path")
				.datum(graticule)
				.attr("class", "graticule")
				.attr("d", path);
	
			// load in GeoJSON data
			d3.json("NZ_TA_light.json", function(json) {
		
			// load in data
			d3.csv("AllDataTA.csv",function(data) {
						
				colinc.domain([ 
					d3.min(data, function(d) {
						return +d.MedianInc;
						}),
					24832,	
					d3.max(data, function(d) {
						return +d.MedianInc;
						})
					]);	
					
			
				// loop through data to add properties
				for (var ii=0;ii<data.length;ii++){
				
				for (var jj=0;jj<json.features.length;jj++){
				
					// matching key is id
					if (parseFloat(data[ii].TA2013)==parseFloat(json.features[jj].properties.TA2013)){
						json.features[jj].properties.Density = 	+data[ii].Density ;
						json.features[jj].properties.Population = 	+data[ii].Population;
						json.features[jj].properties.MedianInc = +data[ii].MedianInc;

}
				} // end loop jj
				} // end loop ii

//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
				   .attr("class","TAs")
				   .attr("fill",
			//	   function(d){return cscale(d.properties.Density);}
					"#ccc"
					);
		
			}); // end data
			}); // end JSON

d3.select("#dens").on("click", function() { 
			svg.selectAll(".TAs")
				.on("mouseover", function(d) {		
					div.transition()		
						.duration(200)		
						.style("opacity", .9);		
					div	.html(d.properties.TA2013_NAM + "<br/>"  +d.properties.Density +" inh./sq.km")	
					   .style("left", (d3.event.pageX +5) + "px")		
					   .style("top", (d3.event.pageY +5) + "px");	
					})					
				.on("mouseout", function(d) {		
					div.transition()		
						.duration(500)		
						.style("opacity", 0);	
				});
		
			svg.selectAll(".TAs")
				.transition()
				.attr("fill",function(d){
				return coldens(d.properties.Density)});
			})	
			
		d3.select("#pop").on("click", function() { 
			svg.selectAll(".TAs")
				.on("mouseover", function(d) {		
					div.transition()		
						.duration(200)		
						.style("opacity", .9);		
					div	.html(d.properties.TA2013_NAM + "<br/>"  +d.properties.Population+" inhabitants")	
					   .style("left", (d3.event.pageX+5) + "px")		
					   .style("top", (d3.event.pageY +5) + "px");	
					})					
				.on("mouseout", function(d) {		
					div.transition()		
						.duration(500)		
						.style("opacity", 0);	
				});
			svg.selectAll(".TAs")
				.transition()
				.attr("fill",function(d){		
				return colpop(d.properties.Population)});
				
			})
			
		d3.select("#income").on("click", function() { 
			svg.selectAll(".TAs")
			.on("mouseover", function(d) {		
				div.transition()		
					.duration(200)		
					.style("opacity", .9);		
				div	.html(d.properties.TA2013_NAM + "<br/>"  +"$"+d.properties.MedianInc)	
				   .style("left", (d3.event.pageX +5) + "px")		
				   .style("top", (d3.event.pageY +5) + "px");	
				})					
			.on("mouseout", function(d) {		
				div.transition()		
					.duration(500)		
					.style("opacity", 0);	
			});
		
			svg.selectAll(".TAs")
				.transition()
				.attr("fill",function(d){return colinc(d.properties.MedianInc)});
			})

</script>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js