Choropleth tests not passing

Hello, here I did my Choropleth project, it’s finished according to me but I don’t pass test 11 and 12.
11 is the tooltip, i have one with the correct id, but somehow it’s not correct.
12 is the data-education attribute relatled to that tooltip

I can’t really see it for myself what I did wrong so any advice is welcome.

I think I remember seeing issues involving transitions and the test missing the tooltip. You may want to turn off the transitions to see what happens with the test.

For the attribute, I would put a console.log(obj.bachelorsOrHigher) in the .on('mouseover', ...) function just to verify the value is exactly the same as the corresponding county attribute value.

1 Like

Hello and thanks for helping,
the console.log(obj…) confirmed I have the correct value, I assume it just won’t pass until I get test 11 right.

For that test I removed the transitions but it still fails somehow.
If nothing else shows I will fork my project and copy someone elses code just to pass the test so I can move on to the next project.

Some of these D3 issues are minor and difficult to debug. When I changed your code like this:

    .on('mouseover mouseenter',(e,d) => {
      let value=d.id;
      let index=education.findIndex(val=>val.fips===value);
      let obj=education[index];
      let txt=obj.area_name +", "+obj.state+": " + obj.bachelorsOrHigher+"%";
      
      // tooltip.transition()
      // .duration('200')
      d3.select('div#tooltip')
      .style('visibility', 'visible')
      .style('opacity','0.7')
      .html(txt)
      .style('left',(event.pageX+5)+"px")
      .style('top',(event.pageY-80)+'px')
      .attr('data-education',obj.bachelorsOrHigher);
    })
    .on('mouseout mouseleave',(e,d) => {
     // tooltip.transition()
     //  .duration('100')
      d3.select('div#tooltip')
      .style('visibility', 'hidden')
      .style('opacity',"0");
    })

the tests passed. I don’t know why exactly. All I did was drop the transitions, add in the visibility style, and mash the d3.select('div#tooltip') calls together. My guess is the visibility is the problem and the test is just looking for changes to that styling and not to all of the other ways div visibility can be manipulated.

Ty, I think working with “visibility” instead of “opacity” did the trick,.