4

I am trying to get a leaflet map to display a choropleth map using d3. I have written this code using samples I have found however the map just displays as the black fill, not the color classes I defined. This is the code I am using. Anyone have an idea about what I'm doing wrong?

<!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 &copy; <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>
1

Difficult to understand what is really going on here without fiddling with some live code, but have you checked the console for errors?

if (population) { //If value exists…

As a guess, this bit of code looks wrong. population looks like an undefined variable to me, so probably the code errors here and nothing gets styled. Maybe try d.properties.population instead?

  • I think you are right. I'm going to try that and see if it works. The console error I get is SyntaxError: syntax error – bailey Jul 25 '13 at 14:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.