Guidelines on choropleth - mapping library integration (e.g., leaflet)

[dgorissen]

First of all props for releasing this nice lib. I love the choropleth support and a natural extension is to render it as some kind of layer in a mapping lib like leaflet, cartodb, ..

So I was looking for something like this but linked into dc and that I can extend to multiple layers, each binding to a different set of dimensions/groups.

Advice from Google seems to be to look at the snack dashboard by @jeroenooms but I failed to find the unminified source with the relevant code.

@yurukov mentions he did something similar in #119 and @NickQiZhu in #14. Im sure it cant be that hard but would appreciate some pointers or example code.

[yurukov]

I've made a couple of charts with d3 and leaflet mostly utilizing the geojson layer in leaflet. These, for example, show primary school enrollment:
http://opendata.yurukov.net/educ/map/en

Here I've mixed in dc with leaflet using markers instead of a choropleth:
http://opendata.yurukov.net/ecology/ (in Bulgarian; industrial pollution dashboard)
My Leaflet dc chart class can be modified however to add a choropleth using d3.js layer or leaflet's own layer:
http://opendata.yurukov.net/ecology/res/charts.lib.js?ynocache (scroll to leafletChart)
.

[yurukov]

I found another example dashboard using dc and leaflet:
http://opendata.yurukov.net/vei/en (RES production in Bulgaria)
The leafletChart here is slightly modified, but again uses markers:
http://opendata.yurukov.net/vei/res/charts.js

[gordonwoodhull]

Very cool, @yurukov!

Would you consider contributing this code? I guess because of the leaflet dependency, we'd probably want to keep it in a separate library, but it would be great to host it alongside dc.js.

[yurukov]

I'm working on a election analytics tool right now following the EU parliament elections (here's the apparently-not-so-private-any-more beta http://opendata.yurukov.net/elections/?beta). It also has a custom D3+leaflet implementation. When I'm done with it, I'll collect and generalize the code from all projects as much as I can and post it.

[dgorissen]

Wow, thanks for sharing. Yes a blog post, gist, or even pull request, capturing best practise about how to go about this would be immensely valuable. Look forward to it.

[cgat]

I've also created a leaftlet geoChloropethChart extension to dc. It makes use of the geoChloropethChart from the master branch. https://gist.github.com/cgat/988fbca1b228a1b44ad4

This could be modified to work this other mapping libraries by customizing the projectPoint function.

[yurukov]

The extension is ready. It has two charts - markers and chloropeth. The marker one supports clustering (requires leaflet cluster plugin), individual marker selection, as well as selection of multiple markers based on bounds shown in the map. The chloropeth is also filtered:
http://opendata.yurukov.net/demo/dcjs_leaflet/

I'll put the code up here with documentation sometime this week. The components use the latest releases of leaflet and dc.js

I also tried building a heatmap chart. It is actually quite straight forward. I couldn't however get any of the existing extensions for heatmaps to work with the latest leaflet release.

[yurukov]

here's the code: https://github.com/yurukov/dc.leaflet.js

[dgorissen]

Stellar work @yurukov. I finally got around to trying this but failed to get it to work with current dc version, issue here. If it worked for somebody else with 2.0 please comment on the issue if you can.

[yurukov]

The code and examples was written mostly shorthand. I will add improvements and releases soon. Thanks for the issue. I'll try to get around it as soon as possible.

[KatiRG]

@yurukov How come the colours of the pie chart in Le Choropleth in your example http://opendata.yurukov.net/demo/dcjs_leaflet/ do not match the colours on the map?

[yurukov]

@KatiRG do yoy mean in the last map? The colors in the map show where there're the most people, while the pie chart shows different age groups. Selecting one age group from the pie chart filters the results and updates the map where the darkest colors on the features will show where there're the most people from that age group. In any case, the color accessor method allows setting custom colors on each feature.

[KatiRG]

Thanks @yurukov. I thought the pie chart was supposed to be like a colourbar. Is there a way to add a colourbar to the choropleth? Also, can your code handle .valueAccessor like the other dc charts? I need to display mean values, so I have made custom reduce functions.

[yurukov]

@KatiRG yes, valueAccessor is available like any other chart. This implementation extends baseChart and colorChart, so it uses all of their customizations.

[KatiRG]

Thanks @yurukov. The .valueAccessor works fine, but the .popup option does not produce any popup window when hovering over a region on the map in my code and also in your example. And I would like a colorbar, so I followed these leaflet guidelines: http://leafletjs.com/examples/choropleth.html, but I am not able to get it to work. Do you have any suggestions? Thanks in advance.

[KatiRG]

It seems that if .brushOn is false, then clicking on a map region displays the popup, but then you lose the filter action (i.e. the dc charts won't be filtered according to the region clicked). Is there a way to have the popup appear on mouse-over instead of mouse click, so that .brushOn can be left as true?

[ozermm]

Thanks for sharing this great library. I am trying to add a map layer to the marker chart in order to define the border of the city but I couldn't do it. Can anyone tell me how to do it? Thanks.

[gordonwoodhull]

Hi @ozermm are you asking about dc.leaflet.js or about this library, dc.js?

[gordonwoodhull]

BTW I'm going to close this issue because the answer is dc.leaflet.js or @ruhley's fork, which also has a ton of features.

[ozermm]

Thank you very much for you quick response gordonwoodhull! I am asking about dc.leaflet.js. When I use dc_leaflet.markerChart option to generate the map, I cannot add any other layers. Could you please help me on this. I tried to find a solution but couldn't do. Any help is greatly appreciated.

[Tim-Intellipharm]

@ozermm Your issue is with a dc leaflet chart which isn't currently part of the base dc.js library. I have duplicated your issue at intellipharm-pty-ltd/dc-addons#14. Please direct any further questions about the leaflet charts to that repository instead.

[gordonwoodhull]

FWIW https://github.com/dc-js/dc.leaflet.js and those parts of @Tim-Intellipharm (@ruhley) dc-addons are pretty much the same so either place is a good place to talk about this.

I think since those boundaries aren't data driven you'll really just end up accessing the underlying leaflet map and it won't have much to do with the dc layer.

[ozermm]

Thank you Gordon! Tim replied me back and open the above ( intellipharm-pty-ltd/dc-addons#14) to discuss. I will continue to follow that issue. I am really impressed how you are responsive for any related questions. Thank you very much again!