Working with mouse events

Community Help
1

I have the following notebook:

The map displays groups of ZCTAs and what I would like to achieve is being able to mouse over the different color rectangles, and have any ZCTA that is not that color fade.

I have achieved the effect I want for Group 4 using the gray square which is hardcoded for Group 4. However, when I try to generalize this to the rectangles the code stops working.

Any thoughts on where I am going wrong with this?

2

So I managed to get the legend working, in that if you mouse over the rectangles on the right hand side (corresponding to the trial_legend ā€˜gā€™ that is created in the chart definition), then the fade effect works:

However, if you try the same with the rectangles on the left which are created outside the chart definition, then the fade effect does not work.

Thoughts on why this is the case?

3

While combing through a suggestion from @mootari I noticed that I had used svg outside of the chart cell. Replacing

    svg
      .selectAll(`.ZCTA:not(.ID${d})`)

with

    d3
      .select(chart)
      .selectAll(`.ZCTA:not(.ID${d})`)

fixed my issues.

2 Likes