Estoy tratando de conseguir un mapa de folletos para mostrar un mapa de coropleta usando d3. He escrito este código utilizando muestras que he encontrado sin embargo el mapa sólo muestra como el relleno negro, no las clases de color que he definido. Este es el código que estoy utilizando. ¿Alguien tiene una idea de lo que estoy haciendo mal?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
</head>
<body>
<div id="map" style="width: 900px; height: 500px"</div>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script>
var map = L.map('map').setView([41.57, -93.71], 4);
L. tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {
//minZoom: 7,
//maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
//quantize scale and output range -input domain specified after data is loaded
var color = d3.scale.quantize()
.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
d3.json("us-states.json", function(collection) {
var bounds = d3.geo.bounds(collection),
path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path");
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path);
}
// Use Leaflet to implement a D3 geographic projection.
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
});
// load population data
d3.csv("population.csv", function(data) {
//Set input domain for color scale
color.domain([
d3.min(data, function(d) { return d.population; }),
d3.max(data, function(d) { return d.population; })
]);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Merge the ag. data and GeoJSON
//Loop through once for each ag. data value
for (var i = 0; i < data.length; i++) {
//Grab state name
var dataState = data[i].state;
//Grab data value, and convert from string to float
var dataPopulation = parseFloat(data[i].population);
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
//Copy the data value into the JSON
json.features[j].properties.population = dataPopulation;
//Stop looking through the JSON
break;
}
}
}
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (population) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "#ccc";
}
});
});
});
</script>
<body>
</body>
</html>
