Hi FCC Community,
Being stuck on the first Data Visualization challenge.
More specifically, I seem to not be able to pass the second TooltipTest “My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.” due to me being unable to populate the data-date property. This property always ends up undefined.
The relevant part of the code is as follows:
const tooltip = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.attr("id", "tooltip")
.style("opacity", 0);
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr("class", "bar")
.attr('data-date', (d) => d[0])
.attr('data-gdp', (d) => d[1])
.attr('x', d => xScale(new Date(d[0])))
.attr('y', d => yScale(d[1]))
.attr('width', 4)
.attr('height', d => height - padding - yScale(d[1]))
.on("mouseover", (d) => {
var interim = d[0];
tooltip.style("opacity", 1);
tooltip.html("Output: " + interim)
tooltip.attr("data-date", interim)
})
.on("mouseout", () => {
tooltip.style("opacity", 0);
})
Does someone have an idea?
Thanks
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36
.
Challenge: Data Visualization Projects - Visualize Data with a Bar Chart
Link to the challenge: