Rendering tippy in proper node on choropleth?

1

Recovering d3-learner here… I’ve been exploring using tippy as my tooltip in an effort to learn deeper about js and d3 and various functions.

I am making a simple choropleth map and have studied this thread on why tippy does not display in Observeable, sometimes

My problem is in my main map function, when I add horizontal and vertical lines to track the mouse cursor (which will do something at some point), the tippy tooltip is ‘hidden’. I know this because I can comment out the lines (which are drawn after the map to be clear) and the tooltip appears just fine.

I am confused on these nodes and what they are and what they do. I think what I want to do is render the horizontal and vertical lines in a different node (?).

Also the currently linked notebook returns only the map which then I render in the cell above using map.node()

Are there some good links which are ELI5 for these ‘nodes’ or ‘layers’…possibly an ELI3? I’ve been trying to understand what’s happening in this tippy tutorial notebook, but I can’t.

Thanks everyone, this community is a great one!

1 Like
2

There are a couple of independent issues here.

First, I would move the call to tippy inside your definition of map. To do so, simply name the layer where you want the tooltips (counties makes sense) and then call tippy on each of the nodes in that layer. So you’d have a code block that looks something like so:

let counties = svg.append('g')
  .selectAll('path')
  .data(topojson.feature(us, us.objects.counties).features)
...
counties.nodes().forEach(tippy)

After you do that, you should find that the tooltips appear, but only very briefly. The reason is that the lines interfere with the cursor. Thus, next you just add a pointer-event attribute with value none to each line.

Your map is an object created by d3 to represent the DOM element abstractly. These objects have a node method that returns the dom element, so that’s what you want to display.

Here’s a version that takes this all into account:

1 Like
3

Fitting you would reply, been studying many of your NC maps as of late (lol).

Ok, that helps. I appreciate the response and will get this adopted. Hopefully I’ll have a cool final product to show for all this.

1 Like