| license: gpl-3.0 | |
| height: 580 |
The Human Developement Index in Ecuador, data taken from the Wikipedia. The projection is done using d3-composite-projections.
forked from rveciana's block: Human developement index in Ecuador
forked from anonymous's block: Human developement index in Ecuador
| {"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} |
| <!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> |