D3 chorepleth map tooltip

JavaScript
1

hello, how do I create a tooltip to the project chorepleth map???
I have no idea how to solve it

2

Hi there,

What have you tried so far?

3

this was my last attempt: Choropleth Map (codepen.io)

4 
      .on('mouseover', function(d, i) {
          tooltip.attr('data-education', (countyDataItem) => {
            let id = countyDataItem['id']
            let county = educationData.find((item) => {
              return item['fips'] == id
            }) 
            let percentage = county['bachelorsOrHigher']
            return percentage
    })
                  .html(`<p> ${i[educationData.area_name]}, ${i[educationData.state]} : ${i[educationData.bacherlorsOrHigher]}% </p>`)
                  .style('opacity', 1)
                  .style('display', 'flex')
    
  })

You’re using D3v6 but with the old call signature, so I can’t tell which you mean. You have (d, i) like (datum, index) for the old way but I think you’re using it correctly for v6, but it’s confusing since you’re not using (event, datum). There are recent posts here with links to the documentation.

Anyway, codepen is throwing a Uncaught TypeError: Cannot read property 'id' of undefined here:

            let id = countyDataItem['id']

I don’t think the arrow function on the line before is working. I would console.log() the intermediate results in that function and after and see what happens.

5

Like @jeremy.a.gray already said, I would use console.log to check why you’re getting errors in the console.

.on('mouseover', function(d, i) {
  console.log(d, i);
}

tooltip.attr('data-education', (countyDataItem) => {
  console.log(countyDataItem);
}

Once you check these, you should check how does the .attr() method work, in particular when you pass a function as a second argument to it.

6

ok, now i’m stuck
Choropleth Map (codepen.io)

7

Have you tried to console.log the values that you’re using? This doesn’t look much different from your previous code:

tooltip.attr('data-education', (countyDataItem, j) => {
  let id = j['id']
8

I solved the problem, but it doesn’t show me anything. Why?
Choropleth Map (codepen.io)

9

Tooltip is not visible because you have a typo when changing its display:

tooltip
  .style('opacity', 1)
  .style('dispaly', 'flex')

You’ll still have to position it, because at the moment its shown at the bottom of your page.

10

why show me undefinite ??
Choropleth Map (codepen.io)

11

Here is where you set the content of your tooltip:

tooltip
  .html(`
    <p> 
      ${i['area_name']}, ${i['state']} : ${i['bacherlorsOrHigher']}% 
    </p>`)

If i['area_name'], i['state'] and i['bacherlorsOrHigher'] are undefined why don’t you try and see what is the value of i?

12

console show me undefined

console.log(i[‘area_name’])

i don’t know what to do in this case

13

Yeah, I know i[‘area_name’] is undefined, I said that in my previous post. Try to check why is it undefined?

  • what is i when you console.log it?
  • what do you expect it to be?
  • if it is not what you expect then why?
14

I’m done, thank you very much for your help

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.