Problems placing elements on choropleth

JavaScript
1

My choropleth is passing all the tests (yay!!! I This is my favorite project!) but there are a couple of things I can’t seem to resolve:

  1. My tooltip – I tried to use d3’s centroid to place the tooltip, but it seems like there’s some kind of offset that I didn’t see in the tutorial files. (lines 72, 76, 77). I hard-coded some correction, but it doesn’t work well if I scroll or resize.

  2. I want my legend to show up in the bottom right corner, and I set x and y accordingly, but it still shows up top left instead. (lines 91-92) I also wanted to give the entire legend a background color. (line 93)

edit – Figured out how to place the legend using “translate” :slight_smile:

Here’s the codepen: https://codepen.io/KatyaBarta/pen/LYREjJp?editors=0011

Thank you so much for any help!
Katya

2

Hey @KatyaBarta , well done!

About the tooltip location, wouldn’t the mouse location do? I used d3.event.pageX to place it where the mouse pointer is.

      tt.html(str)
        .style("left", 10 + d3.event.pageX +"px")
        .style("top",  -10 + d3.event.pageY + "px")
        .style("opacity", 1)
        .attr("data-education", edDict[d.id]);
       })
1 Like
3

Oh thanks, I will give that a try!