ColorBrewer in D3 does not work

Question

I overlay a leaflet map with the d3 library. The points get displayed, as well as the map. However, the Colorbrewer does not work... Its supposed to color the dots on the map according to their value, instead, they stay black. I could hardcode that with something like if value == 0.1 but thats not what I want...

Thats my code, the structure of cities.json can be seen here, the colorbrewer is this one

        ...

                    // add colorbrewer
                    var colorScale = d3.scale.quantize()
                    .domain([extent[0], extent[1]])
                    .range(colorbrewer.YlGn[n]);

                    // uses d3 data join method
                    // for each data point a "path" is created 
                    var feature = g.selectAll("path")
                    .data(collection.features)
                    .enter()
                    .append("path")
                    .style("fill", function(d) {
                        colorScale(d.properties.pop_max);
                    });

        ...

Any ideas what is going wrong?! There are negative values in my d.properties.pop_max. Could that be the problem?

Answer 1

You're missing a return in the fill function.

...
...
.style("fill", function(d) {
     // add a 'return' here.
     return colorScale(d.properties.pop_max);
});

Also, you can just write .domain(extent) directly when initializing your colorScale since d3.extent returns a two element [min, max] array

var colorScale = d3.scale.quantize()
                .domain(extent) // instead of .domain([extent[0], extent[1]])
                .range(colorbrewer.YlGn[n]);