Issues with Data Visualization Project 1 Bar Chart Tests

2

For those of you reading, I got the tooltip tests working with information and inspiration provided thanks to a separate post by @javineya . Data Vis Projects - Bar Chart Test 9

Essentially, the tests will not pass if you intend to create a tooltip the way it was demonstrated in the lessons (using “title” with “text”). You need to first create a tooltip element that is appended as a div to the body.

let tooltip = d3
      .select("body")
      .append("div")
      .attr("class", "tooltip")
      .attr("id", "tooltip")
      .style("opacity", 0);

Then, you must add .on(“mouseover”, function(d)…) and .on(“mouseout”, function(d)…) to your “rect” elements as follows (note: I’m still playing with what I’m actually going to display, thus the “testTest”…:

.on("mouseover", function(d) {
        tooltip
          .transition()
          .duration(200)
          .style("opacity", 0.9);
        tooltip
          .html("testTest: " + d)
          .style("left", d3.event.pageX + 20 + "px")
          .style("top", d3.event.pageY + 20 + "px");
        tooltip.attr("data-date", d[0]);
      })
      .on("mouseout", function(d) {
        tooltip
          .transition()
          .duration(400)
          .style("opacity", 0);
      });

Finally, make sure you have the CSS in place to support the styling and placement of your tooltip. I will be modifying the code in my Codepen, but again, current styling credit in the code below goes to @javineya:

.tooltip 
{	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: auto;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lavender;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

.bar:hover
{
  fill: purple;
}

I hope this helps others who get stuck on this piece as well. Now, onto working through my Y-Axis issues. I will post a solution to that once I find it.

5 Likes