Chord Diagram hover and fade issue

Community Help
1

Dear Collective Wisdom,

I’m sure this is something simple but I haven’t been able to figure out why hover and fade doesn’t work on my chord diagram. I’ve looked at dozens of examples but none of them seem to work with my diagram.

I’m not a pro, just a dabbler, so I appreciate any assistance with this issue and anything else you might suggest for improvement.

Chord Diagram with Tooltips and Groups Opacity Fade

Cheers,
Annie

2

Here’s a fork with a few tweaks to get things working:

A few notes:

  • your original fade function had a reference to svg which pointed to the standard library function svg instead of the d3 selection svg inside the chart cell. Note that you can’t refer to the selection svg from outside the chart cell due to the way variables are scoped in Observable. I ended up moving fade into the cell and changing it so that it referenced explicitly named selections groupPath and ribbons rather than trying to form selections from svg.

  • fade only performs the fading of chords (and groups) that occurs when you mouseover/mouseout on a group. I added some code to the mouseover and mouseout events on the chord selection (which I named ribbons) which performs suitable fading of the other chords / groups.

Feel free to ask if you’ve got more questions!

3 Likes
3

@bgchen:

Thank you so much for not just fixing the issue but explaining why it wasn’t working. I know I’ve missed some essential fundamentals during my scattershot self-education of D3/Observable. I have learned a lot by studying your code, as well as other Observable experts, and appreciate you taking the time for this lesson as well!

3 Likes