D3 Bar Chart test 14 not passing(Need some help)

I somehow passed all the tests so far by looking at the code written by FCC .
However, I’m having trouble passing the final test, that is

My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.

Here’s my code so far,(Please note that, I’ve copied only the relevant code below)
Link to this project, https://codepen.io/salmanthasleem/pen/eYWzLbb?editors=0111

const arr = data.data;
const years = arr.map((elem) => new Date(elem[0]));
const yearsString = arr.map((elem) =>elem[0].substring(0,4));
var gdps = arr.map((elem) => elem[1]);
var tooltip = d3.select("#chart").append("div").attr("id", "tooltip").style('opacity', 0);
      .attr("x", (d, i) => xScale(years[i]))
      .attr("y", (d, i) => yScale(gdps[i]))
      .attr("width", w / data.data.length)
      .attr("height", (d, i) => h - padding - yScale(gdps[i]))
      .attr("class", "bar")
      .attr("data-date", (d, i) => d[0])
      .attr("data-gdp", (d, i) => d[1])
      .attr("fill", "navy")
      .on('mouseover', function (d,i) {
        tooltip.style('opacity', 1);
            d[0] +
              '<br>' +
              '$' +
              d[1] +
              ' Billion'
          .style('left',()=> i * barsize + 30 + 'px')
          .style('top', h - 100 + 'px')
          .style('transform', 'translateX(60px)')
      .on('mouseout', function () {
        tooltip.style('opacity', 0);

CSS for #tooltip

#tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 150px;
  height: 50px;
  padding: 2px;
  font: 12px;
  background: lightsteelblue;
  box-shadow: 1px 1px 10px;
  border-radius: 2px;
  pointer-events: none;

I hope I get this fixed anytime soon, been at it since yesterday and it’s really frustrating to get stuck at something like this.

Your browser information:

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

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

@salmanthasleem You only need an element with id of tooltip. You don’t have to append element with id of tooltip for each rect.

FCC’s example project has appended an element and is still working
here’s there code,(https://codepen.io/freeCodeCamp/pen/GrZVaM?editors=0010)

var tooltip = d3
  .attr('id', 'tooltip')
  .style('opacity', 0);

var overlay = d3
  .attr('class', 'overlay')
  .style('opacity', 0);

var svgContainer = d3
  .attr('width', width + 100)
  .attr('height', height + 60);

Hi @salmanthasleem ,

The input parameters to the function on ‘mouseover’ are event and data i.e.
.on('mouseover', function(event, data) {....

Basically in your code, input parameter ‘i’ represents your data and if you change d[0] to i[0] in your code below, it should work:

          .attr("data-date",()=>d[0])   <-- change d[0] to i[0] 

Try doing a console.log of variables d and i inside the mouseover function to see the values of the variables.
Hope this is clear.

1 Like

Thank you for clearing this up for me
May I know what does the d parameter represent?

d is the event parameter: has lots of key-value pairs related to the Mouse Event.
It could be also be useful while setting the x and y co-ordinates of the tooltip. I used the e.pageX and e.pageX values to set the position of my tooltip div.

Do a console log as below, will help to understand:

.on('mouseover', function (d,i) {
1 Like

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