Visualize Data with a Bar Chart - data visualization project

JavaScript
1

Tell us what’s happening:
Here’s my pen: https://codepen.io/oppositive/pen/zeYazG?editors=0010

My code fails only the 2 tooltip tests. I made the tooltip by appending a title to all the rect elements. This title I give an attr ID and attr data-date. What’s going wrong? Thanks for any advice!

Your code so far
Like this:
svg.selectAll(“rect”)
.data(dataset)
.enter()
.append(“rect”)
.attr(“x”, (d) => xScale(new Date(d[2])))
.attr(“y”, (d) => yScale(d[1]))
.attr(“data-date”, (d) => d[2])
.attr(“data-gdp”, (d) => d[1])
.attr(“width”, barWidth)
.attr(“height”, (d) => h-padding-yScale(d[1]))
.attr(“class”,“bar”)
.append(“title”)
.attr(“id”,“tooltip”)
.attr(“data-date”,(d) => d[2])
.text((d) => d[3]+", “+d[1]+ " Billion”)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

2

The exercise wants you to use the mouseover event to create a element. If you add this code below it will create the element and pass the tests. Also you can check out I forked your Pen

css update
-----

.tooltip {
  background-color: #f8f6ef;
  position: absolute;
  opacity: 0;
  color: #191919;
  font-size: 20px;
  padding: 5px;
  pointer-events: none;
  border: 2px solid #8f8779;
  border-radius: 3px;
}

js update
-------

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

 svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d) => xScale(new Date(d[2])))
       .attr("y", (d) => yScale(d[1]))
       .attr("data-date", (d) => d[2])
       .attr("data-gdp", (d) => d[1])
       .attr("width", barWidth)
       .attr("height", (d) => h-padding-yScale(d[1]))
       .attr("class","bar")
        
       
       .on("mouseover", d => { 
        tooltip.style("opacity", .9);
        tooltip.attr("data-date", d[2])
        tooltip
          .html( 
            'Date:' + d[2]
          )
          .style("left", d3.event.pageX + "px")
          .style("top", d3.event.pageY - 28 + "px");
      })
      .on("mouseout", d => {
        tooltip.style("opacity", 0);
      });
3

Thank you! I was trying to use the mouseover, but it didn’t work. Your tooltip is a div element appended to the body element and it works great!

1 Like