Data Visualization Projects - Visualize Data with a Bar Chart

JavaScript
1

Tell us what’s happening:

Here is my CodePen link: https://codepen.io/edwinhung/pen/MWLQeeG
The 9th test is failing

  1. Each bar element’s height should accurately represent the data’s corresponding GDP

I used scaleLinear to set y and height, so the chart actually looks okay, but the above test failed. If I set the height to raw data (gdp value) then the test passed but the chart is off.

I have a second question about tooltip. Though it passed tests, I also wanted tooltip to move with mouse. pointer x and y looks to be correct from debugging, but tooltip is not moving.

bar.on("mouseover", function(event,d) {
        const[x, y] = d3.pointer(event);
         tooltip.text(`${d[0]}, $${d[1]} Billions`)
            .style("visibility", "visible")
            .attr("data-date",d[0])
            .style("left", x + "px")
            .style("top", y + "px");
         })

Your code so far

Your browser information:

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

Challenge Information:

Data Visualization Projects - Visualize Data with a Bar Chart

2

I just figured out the first question

3

ok, if I add position property to tooltip div, it’s working. It’s done :clap:

4

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