JSL 2015: Coropletas

Duodécimo ejemplo del taller Mapas web interactivos con D3.js en el programa de las 9as Jornadas SIG Libre .

Dibuja un mapa de coropletas con los resultados electorales de las elecciones de 2011. Fuente: Wikipedia

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.provincias {
  fill: #ccc;
  stroke: #fff;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
    height = 500;
var colores = {"PP":"#03a9e7","PSOE":"#ff2f2e","IU":"#149f27","UPyD":"#d64b8c","CiU":"#024c97","Amaiur":"#b0d2e9",
"PNV":"#0f7c2f","ERC":"#f9d43f","Compromís":"#faddaa","Podemos":"#82398a","Ciudadanos":"#e28535","Otros":"#e8e8e8"};

var projection = d3.geo.mercator()
    .center([0,37])
    .scale(3000 / Math.PI)
    .translate([width / 2, height / 2]);

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

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

d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//provincias.json", function(error, provincias) {
  d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//resultados.json", function(error, resultados) {
  
  var land = topojson.feature(provincias, provincias.objects.provincias);
  svg.selectAll("path")
      .data(land.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("fill", function(d){

var ganador = Object.keys(resultados[d.properties.nombre])[0];

return colores[ganador];
    });
 
  console.info(resultados);
  });
  });

</script>

Modified http://d3js.org/d3.v3.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/topojson.v1.min.js