Datos de averiguaciones previas
Basado en: http://bl.ocks.org/mbostock/4055908
Datos de averiguaciones previas
Basado en: http://bl.ocks.org/mbostock/4055908
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Cartograma No Contiguo de Averiguaciones Previas por Homicidio</title> | |
| <style> | |
| .land { | |
| fill: #fff; | |
| stroke: #ccc; | |
| } | |
| .state { | |
| fill: #ccc; | |
| stroke: #666; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script> | |
| // Averiguaciones previas for homicidio dolosos during January | |
| var valueById = [ | |
| 4, 15, 4, 1, 71, | |
| 34, 56, 117, 67, 52, | |
| 37, NaN, 17, 99, 151, | |
| 53, 51, 14, 109, 26, | |
| 39, 5, 20, 19, 109, | |
| 37, 7, 68, 6, NaN, | |
| NaN, 12 | |
| ]; | |
| //divide by total averiguaciones previas for homicidio doloso | |
| //valueById.forEach(function (d, i) {valueById[i] = d / 1300}) | |
| var projection = d3.geo.mercator() | |
| .scale(1200) | |
| .center([-102.34034978813841, 24.012062015793]); | |
| var path = d3.geo.path().projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500); | |
| d3.json("estados_tj.json", function(error, mx) { | |
| svg.append("path") | |
| .datum(topojson.object(mx, mx.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| svg.selectAll(".state") | |
| .data(topojson.object(mx, mx.objects.estados2).geometries) | |
| .enter().append("path") | |
| .attr("class", "state") | |
| .attr("d", path) | |
| .attr("transform", function(d, i) { | |
| var centroid = path.centroid(d), | |
| x = centroid[0], | |
| y = centroid[1]; | |
| return "translate(" + x + "," + y + ")" | |
| + "scale(" + Math.sqrt(valueById[(d.properties.CVE_ENT -1)] * .010 || 0) + ")" | |
| + "translate(" + -x + "," + -y + ")"; | |
| }); | |
| //.style("stroke-width", function(d) { | |
| // return 1 / Math.sqrt(valueById[(d.properties.CVE_ENT -1)] * 5 || 1); | |
| //}); | |
| }); | |
| </script> |