How to create a diverging data legend on a choroplet map? - html

Question

I'm trying to create a choroplet map with diverging data (going from -0.7 to 0.7) and can't find a way so that my legend show the correct colors. The problem is because when colors are all positive signs is always > and is sequential. Now because I have negative numbers, it doesn't work anymore. How can I correct this?
// get color depending on population differentiel value
function getColor(d) {
return d > 0.7 ? '#b2182b' :
d > 0.5 ? '#d6604d' :
d > 0.3 ? '#f4a582' :
d > 0.1 ? '#fddbc7' :
d < -0.7 ? '#2166ac' :
d < -0.5 ? '#4393c3' :
d < -0.3 ? '#92c5de' :
d < -0.1 ? '#d1e5f0' :
'#f7f7f7';
}
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [-0.7, -0.5, -0.3, -0.1, 0.1, 0.3, 0.5, 0.7],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? ' à ' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};

Answer 1

The problem is because when colors are all positive signs is always > and is sequential. Now because I have negative numbers, it doesn't work anymore.
No, it's because you're mixing > and < without any good reason, instead of following a regular pattern of decreasing numbers, e.g.:
function getColor(d) {
return d > 0.7 ? '#b2182b' :
d > 0.5 ? '#d6604d' :
d > 0.3 ? '#f4a582' :
d > 0.1 ? '#fddbc7' :
d > -0.1 ? '#d1e5f0' :
d > -0.3 ? '#92c5de' :
d > -0.5 ? '#4393c3' :
d > -0.7 ? '#2166ac' :
'#f7f7f7';
}
Now the stop points are aligned, so every stop point is the smallest value for the color range.
I'd go even further and store the stops and range colors in a data structure, correlating the smallest end of a range with the corresponding colour:
var stops = [
{ stop: 0.7, color: '#b2182b' },
{ stop: 0.5, color: '#d6604d' },
{ stop: 0.3, color: '#f4a582' },
{ stop: 0.1, color: '#fddbc7' },
{ stop: -0.1, color: '#d1e5f0' },
{ stop: -0.3, color: '#92c5de' },
{ stop: -0.5, color: '#4393c3' },
{ stop: -0.7, color: '#2166ac' },
{ stop: -Infinity, color: '#f7f7f7' },
];
And recreate the getColor() function by looping through that data structure:
function getColor(d) {
for (var i in stops) {
if (d > stops[i].stop) { return stops[i].color; }
}
}
Note that all numbers are greater than -Infinity, so the last entry in that data structure shall work as the default case.
And create a legend by iterating through the same data structure, carrying over the range's upper stop from the previous step (and initializing that at Infinity, as that's the implicit upper stop for the first range):
var rangeMax = 'Infinity';
for (var i in stops) {
var rangeMin = stops[i].stop.toString();
var rangeColour = stops[i].color;
labels.push(
'<i style="background:' + rangeColour + '"></i> ' +
rangeMin + ' à ' + rangeMax
);
rangeMax = stops[i].stop;
}

Answer 2

getColor(from + 1) is the culprit. Because of the "+ 1", you will always be off your scale.
Note that even after removing it, you will be missing the lowest legend (< 0.7). You can handle it in a similar way as your highest legend.