Dropdown On Choropleth?


Is it possible to add a dropdown to a choropleth map to change what data is used for an array of z values?

If so, are there any examples of how to do this?


yes: https://codepen.io/etpinard/pen/bYywdG?editors=0010


I think I was writing Plot.ly JS in an older style from your documentation. I used your example and the code loads the JSON data amazingly faster now, thanks! But for some reason “locationmode: 'USA-states” isn’t working now (it was before) and it’s displaying it as a global choropleth.

Here’s my code: https://codepen.io/dholger/pen/XVMmyy

I’m assuming a slider works with the choropleth the same way your dropdown example does? Thanks!


You must have made a typo somewhere. There’s no reason for it to have stopped working. Unfortunately I can’t really help you as I don’t have access to your data arrays.


I don’t believe it’s a typo? Because I copied everything from how the code was previously structured.

The old code’s “locationmode: ‘USA-states’” property works and just shows the US: https://codepen.io/dholger/pen/gomdVe

But it’s longer and doesn’t load as fast as the style of your example. And I’m working off your dropdown example for the other z values.

Thanks for your help!


Any ideas? Just added "locationmode: ‘USA-states’ to your example on CodePen. It still displayed as a global map, although you could plot the boundaries of US states.

Would love for it to appear like the US choropleth from my earlier example. Like the one demoed in the documentation: https://plot.ly/javascript/choropleth-maps/#usa-choropleth-map


I’ve found a solution by adding the geo property “scope: ‘usa’” to only show the US, per your example on codepen: https://codepen.io/etpinard/pen/JKPxQo. Thanks!