Infant Mortality Map

Infant mortality map for Vietnam, based on 2009-10 Census. Click to zoom in and click outside to zoom out. The one province showing up in black is Ha Tay, which has apparently been merged into Hanoi. The scale is quantized for infant moratlity rate from 8 to 49 into five divisions. The original description for the data is Infant deaths 1000 per 1000 life. (Table A4 - Vietnam Population Census PDF)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .boundary { 
    fill: none;
    stroke: #777;
    stroke-dasharray: 2,2;
    stroke-linejoin: round;
  }

path {
    stroke: white;
    stroke-width: 0.1px;
  }
  .background {
    fill: none;
    pointer-events: all;
  }

.q4-rt { fill:#a50f15;}
  .q3-rt { fill:#de2d26;}
  .q2-rt { fill:#fb6a4a;}
  .q1-rt { fill:#fcae91;}
  .q0-rt { fill:#fee5d9;}

</style>
<body>
<title>Infant Mortality in Vietnam</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 1160,
centered;

var morById = d3.map();

var mor_rate = d3.scale.quantize()
      .domain([8,49])
      .range(d3.range(5)
      .map(function(i) { return "q" + i + "-rt";}));

var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height);

queue()
    .defer(d3.json,"viet.json")
    .defer(d3.csv,"mortality.csv",function(d){morById.set(d.id,d.mor);})
    .await(ready);

function ready(viet) {

svg.append("rect")
  .attr("class","background")
  .attr("width",width)
  .attr("height",height)
  .on("click", clicked);

var projection = d3.geo.mercator()
          .center([107,11])
          .scale(2490)
          .translate([width/2,height/2]);

var path = d3.geo.path()
         .projection(projection);
    
   var provinces = topojson.feature(viet,viet.objects.adm2).features;

var g = svg.append("g");

g.append("g")
    .selectAll("path")
    .data(provinces)
   .enter()
    .append("path")
    .attr("class",function(d) { return mor_rate(morById.get(d.id));})
    .attr("id",function(d) { return d.id;})
    .attr("d",path)
    .on("click",clicked)

function clicked(d) {
      var x, y, k;

if ( d && centered !== d) {
        var centroid = path.centroid(d);
        x = centroid[0];
        y = centroid[1];
        k = 9;
        centered =  d;
      }
      else {
        x = width/2;
        y = height/2;
        k = 1;
        centered = null;
      }

g.selectAll("path")
       .classed("active", centered && function(d) { return d === centered; });

g.transition()
        .duration(750)
        .attr("transform","translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate("+ -x +"," + -y + ")")
        .style("stroke-width", 1.5/k + "px");
      }
    }
</script>
</body>

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

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js