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