Highlighting Click Data on Plotly Choropleth Map

In making the UK Houseprice Plotly App, one challenge was to high light the clicked part of the choropleth map. Such functionality is not available at the time of writing, so here is a way to get round it.

I will modify the election-choropleth example in the plotly document for illustrations. The complete code is available here as a Google Colab notebook.

The basic idea is to add a second layer with only the selected districts in the corresponding geojson, and keeping track of the districts that has been clicked or unclicked.

GeoJSON is an open standard geospatial data interchange format. For our geojson file, we want to select the geojson['features'] element that contains the selected districts. To speed up the lookup process, we will first get a district_lookup dictionary:

Then we write a function to get the geojson file just for the selected districts:

Given a list of selections, now we can use the function get_highlights() in the second layer of the figure for the highlighting effect, where we increased the opacity for the selection from 0.5 to 1.0. We could also highlight the clicked districts in other ways just by specifying the desired format for the second layer.

Now we are ready to run the app. The dash_core_components.graph component has a property "clickData" - when there is a click on the map, the event will trigger the callback function and update the set "selections" and the figure.

Hope you find this little trick helpful, and good luck with your project!