Thanks again for all the help, @fil!
Just to make sure I understand:
style("fill", function(d) {
- return color(sard_regional_distribution_data[d.name]);
+ return color(sard_regional_distribution_data_index.get(d.properties.ADMIN));
});
Here (above) you removed my attempt to run the color function on d.name
. In my attempt, it seems, I hadn’t actually properly mapped the data to d
, so the color
function wasn’t really running on anything (hence the lack of effect). In your correction, you run the color
function on the index
value you created (below), which maps both d.name
and d.value
back to d
.
Where I am a bit confused still is the part where you do this: .get(d.properties.ADMIN)
. I had seen this pattern in several other Observable choropleth maps, but my initial attempts to use it weren’t returning an error due to my version of sard_regional_distribution_data
not being a function (and yet your index mapping
is also not a function?). Further - I see that ADMIN
is from my .JSON
file and correlates to country name, so what appears to be happening is that you’re matching the data from the index to the country shape. To confirm: your choice to use ADMIN was arbitrary and selected for this apparent alignment? That is, I had used SUBUNIT
to draw the map, and the code also works with SUBUNIT
rather than ADMIN
, so all that matters here is that the data line up?
+ sard_regional_distribution_data_index = new Map(sard_regional_distribution_data.map(d => [d.name, d.value]))
And as for this line above - why not just use sard_regional_distribution_data
? That is, I created this array specifically to bring together the data from the filters I had established above. Your index is not an array, but a map - does this matter? I’ve actually had trouble before trying to get maps like this to play well with other visualizations (if I recall, I was trying to use a mapping to supply data to a donut chart, and it failed where an array worked).
And finally: a question on my color function:
My attempt was this:
color = d3.scaleQuantize()
.domain([0, d3.max( Object.values(sard_regional_distribution_data), d=> d.value)])
.range(d3.schemeBlues[9]);
I was trying set the domain max from the actual values reflected in sard_regional_distribution_data
. The result in your working model is this:
… but there are nearly twice as many projects in India as Bangladesh, which is not at all apparent!
If I manually set the max extent of the domain, like this:
color = d3.scaleQuantize()
.domain([0, 130])
.range(d3.schemeBlues[9]);
I get something closer to my expectations:
… Which leads me to believe that my attempt to programatically pull the max extent is incorrect. Any insights?
I really appreciate your help and guidance on all of this! Thank you so much!