How to update map using selection from a select menu

Community Help
1

I have recently discovered Observable and spent some time reading and editing other peoples notebooks and have successfully created a choropleth map.

The map currently shows the prevalence of the underweight BMI classification by ZCTA (the Underweight column is what I read in from the csv file), however my goal is to create a dropdown menu / radio button menu with the four classifications to allow the user to select the BMI classification they want to see and have the map update when they select that classification.

Edit: I forgot to add that the csv file already has columns with the Normal, Overweight, and Obese classifications.

I am having a hard time getting started with this and would appreciate any pointers on how best to accomplish this.

2

Here’s a suggestion you can merge:

I moved the data cell out so that you can change which field is visualized without reloading the data, and then I used array.map to extract the desired field based on the classification value.

1 Like
3

Hello @mbostock. Thank you for your extremely quick reply - it solved my problem. @tom your solution was similar to @mbostock’s but if I understand the difference between your suggestion and his, the csv file does not load each time a new classification is selected in his solution, which I thought was a little cleaner.

@mbostock I have a couple of clarification questions about the solution:

  1. In the definition of prev_by_ZCTA you added a + sign in front of d3.format() - what exactly does that do?
  2. You replaced ' with " even though the code seems to work just fine with the ' (an example of this is in the definition of topojson). Is this a stylistic Javascript thing?

And finally thank you for creating such a wonderful tool / product!

1 Like
4

  1. The + coerces a string to a number. For example, the expression +"1.50" evaluates to the number 1.5. Since you’re “doing math” on these values by visualizing, it makes sense to convert them from strings (the default representation returned by d3.csv) to numbers.

  2. This was just a stylistic change and probably should have been left out of the suggestion if I had been paying closer attention.

2 Likes
5

To drive Mike’s point about coercion home (because I also frequently forget to apply it):

> 2 + "1.50"
< "21.50"
> 2 + +"1.50"
< 3.5
2 Likes
6

Thanks for the concrete example.