Query: Visualize Data with a Bar Chart

JavaScript
1

I have one item left to pass on the bar chart test, “2. My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.” - Link

Could someone please assist? Thanks

2 
   const tooltip = d3.select('#tooltip');
                    tooltip.style('opacity', 1)
                    .html(`Date: <span>${d3.select(this).attr('data-date')}</span><br>GDP: <span>${d3.select(this).attr('data-gdp')}</span>`)
                    //.attr('data-date', data.data[0])
                    .attr('data-date', d => d[0])
                    .style('left', `${event.pageX}px`)
                    .style('top', `${event.pageY}px`);
                })
                .on('mouseleave', function() {
                    const tooltip = d3.select('#tooltip');
                    tooltip.style('opacity', 0);
                });

I change this:

//.attr('data-date', data.data[0])
                    .attr('data-date', d => d[0])

and tooltip is ok
it should be set to the data-date attribute of the bar element

3

Thanks, on my side it failed both tooltip tests with that change. Does my code pass on your side after that change?
Screenshot 2023-03-22 at 15.41.09

1 Like
4

It was passing before that change…
now its complete…

1 Like
5 
  const tooltip = d3.select('#tooltip');
                    tooltip.style('opacity', 1)
                    .html(`Date: <span>${d3.select(this).attr('data-date')}</span><br>GDP: <span>${d3.select(this).attr('data-gdp')}</span>`)
                    //.attr('data-date', data.data[0])
                    .attr('data-date', d => d[0])
                    .style('left', `${event.pageX}px`)
                    .style('top', `${event.pageY}px`);
                })

I have change only this… and its all passing and tooltip is showing in the page

6

Hi there, just to clarify what is happening… you passed the data into the on mouse function with “d” so you reference with d[0] instead of data.data[0]. :slightly_smiling_face:

7

I submitted it with your changes, does someone from the FCC team check the submissions? It’s been ticked off the list so I’m guessing its complete.

1 Like
8

The codepen linked above still fails both tooltip tests. This code

            d3.selectAll('.bar')
                .on('mouseenter', function(d, event) {
              console.log(event);
                    tooltip.style('opacity', 1)
                    .html(`Date: <span>${d3.select(this).attr('data-date')}</span><br>GDP: <span>${d3.select(this).attr('data-gdp')}</span>`)
                    .attr("data-date", d => d[0])
                    .style('left', `${event.pageX}px`)
                    .style('top', `${event.pageY}px`);
                })

has the event callback interface wrong; try logging d and event and you should see.

Since you always have the event and the datum passed into the mouse event functions, there is usually no need to use this, d3.select(), or any other DOM functions to get information about the current item (bar in this case) as it should all either be in the datum or constructed from the datum (this is available if you need it). You can also combine these separate bar manipulating calls into one selection since you can assign mouse events as you create the bars.

1 Like
9

Also I’ve found that in the .attr, after .html, it wouldnt pass unless i just refetenced d without the arrow function. Hope that helps some

2 Likes
11

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