eurostat / eurostat-map

Thematic web maps based on D3 🗺️
https://github.com/eurostat/eurostat-map.js
Other
63 stars 5 forks source link

Categorical map: control the order of categories in legend? (new method perhaps?) #132

Closed palmajoao closed 8 months ago

palmajoao commented 8 months ago

Before anything, thanks a lot for this work! Its great stuff @joewdavies et al!

In categorical mapping, I can't find a method to order the categories in the legend.

For example, having 6 category classes coming from a CSV I prepared the map to display color blinded proff colors as: .classToFillStyle({ "Very high": "#B22222", "High": "#F08080", "Medium to high": "#FFA500", "Medium to low": "#FFFF00","Low": "#90EE90", "Very low": "#ADD8E6" }) .classToText({ "Very high": "Very high","High": "High", "Medium to high": "Medium to high", "Medium to low": "Medium to low", "Low": "Low","Very low": "Very low"}) The map displays correctly. However the legend comes scrambled, i.e. does not order from Very High to Very Low.

Shouldn't it order the same order of the dic? I know the dict doesn't doesn't have an order, so perhaps a new method that drives the order as a list? example: .classOrderLegend([ "Very high", "High", "Medium to high", "Medium to low", "Low", Very low"]) (Note the list [ ] instead of dict {} , and this list needs to contain all the keys as items)

Is there something I am missing ? The reference seems to miss this control...

joewdavies commented 8 months ago

Thank you very much for your kind words and feedback!

I see what you mean.

I have added an 'order' property to the categorical legend options object, so you can specify their order as an array like so:

.legend({ 
   x: 10, 
   y: 170, 
   order: ["Very high", "High", "Medium to high", "Medium to low", "Low", Very low"] 
})

See the categorical legend docs for more details: https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md#categorical-map

Fixed in version 3.6.100 https://github.com/eurostat/eurostat-map.js/commit/14fa7d0fedf9af96c17c702825e00d4609612448