rveciana - human-developement-index-in-ecuador
Human developement index in Ecuador

The Human Developement Index in Ecuador, data taken from the Wikipedia. The projection is done using d3-composite-projections.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.region{
  stroke: #000;
  stroke-width: 0.5px
}
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
.legendLinear
 {
  font-family: "Lato";
  fill:#c2b59b;
}

.legendTitle {
  font-size: 1em;
}
#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 10px;
  width: 200px;
  height: 70px;
  color: white;
  font-family: sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  border-radius:5px;
  transition: .2s;
}

</style>
<body>
<div id="container">
  <div id="tooltip">
  </div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js"></script>
<script src="https://rawgit.com/rveciana/d3-composite-projections/v0.4.0/mercatorEcuador-proj.min.js"></script>
<script>

var width = 600,
    height = 580;

var projection = d3.geo.mercatorEcuador();
var graticule = d3.geo.graticule().step([2, 2]);

var path = d3.geo.path()
    .projection(projection);

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


    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

d3.json("ecuador.json", function(error, ecuador) {
  //https://es.wikipedia.org/wiki/Anexo:Provincias_de_Ecuador_por_IDH
  d3.json("hdi.json", function(error, hdi) {
  var land = topojson.feature(ecuador, ecuador.objects.ecuador);
  
  var color = d3.scale.linear()
              .domain([0.7, 0.9])
              .range(["#feebe2","#7a0177"]);

    svg.selectAll(".region")
      .data(land.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class","region")
      .style("fill",function(d){return color(hdi[d.properties.region]);})
      .on("mouseover", function(d){
        //Show the tooltip
        var x = d3.event.pageX;
        var y = d3.event.pageY - 40;

        d3.select("#tooltip")
          .style("left", x + "px")
          .style("top", y + "px")
          .style("opacity", 1)
          .text( "The HDI at " + d.properties.region + " is " + hdi[d.properties.region]);
      })
      .on("mouseout", function(){
        //Hide the tooltip
        d3.select("#tooltip")
          .style("opacity", 0);
      });

    svg
      .append("path")
        .style("fill","none")
        .style("stroke","#000")
        .attr("d", projection.getCompositionBorders());

    d3.select("svg").append("g")
      .attr("class", "legendLinear")
      .attr("transform", "translate(200,500)");

    var legendLinear = d3.legend.color()
                .title("Human Development Index")
                .shapeHeight(20)
                .shapeWidth(60)
                .shapeRadius(10)
                .cells([0.7, 0.75, 0.8, 0.85, 0.9])
                .orient("horizontal")
                .labelFormat(d3.format(".02f"))
                .labelAlign("start")
                .scale(color);

    svg.select(".legendLinear")
      .call(legendLinear);

});
});


</script>