rveciana/.block

## .block
license: gpl-3.0
height: 580

## README.md

      
    Raw
  

              README.md
            
          
    The Human Developement Index in Ecuador, data taken from the Wikipedia.
The projection is done using d3-composite-projections.

  
## ecuador.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ecuador.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## hdi.json
{"Azuay": 0.882, "El Oro": 0.824, "Loja": 0.867, "Zamora Chinchipe": 0.741, "Galápagos": 0.892, "Bolivar": 0.809, "Cañar": 0.814, "Cotopaxi": 0.821, "Guayas": 0.852, "Los Rios": 0.814, "Manabi": 0.825, "Chimborazo": 0.772, "Morona Santiago": 0.762, "Orellana": 0.702, "Pichincha": 0.897, "Pastaza": 0.719, "Napo": 0.753, "Tungurahua": 0.831, "Esmeraldas": 0.8, "Carchi": 0.837, "Imbabura": 0.858, "Sucumbios": 0.773, "Santa Elena": 0.842, "Santo Domingo de los Tsáchilas": 0.819}

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>