Data Visualization Projects - Visualize Data with a Bar Chart (Facing Issues)

Hello there. I am facing a problem with this project. All the tests are passing except #TooltipTests (2). Can anyone help with my code? I don’t seem to be able to solve this issue? How do I add a property of ‘data-date’ dynamically to the tooltips? My way isn’t working. Thanks in advance.


const height = 500;
const width = 1000;
const padding = 70;
const url = “https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json”;

d3.json(url,
function(data) {

let GDP = data.data.map(item => item[1]);

let dataDate = data.data.map(item => item[0])

let tip = d3.tip()
.attr(‘class’, ‘d3-tip’)
.attr(“id”, “tooltip”)
.attr(“data-date”, (d, i) => data.data[i][0])
.offset([-10, 0])
.html(function(d,i) {

let month = data.data.map(item => item[0].substring(5,7));
let year = data.data.map(item => item[0].substring(0,4));
let quarter = ‘’;

if(month[i] == ‘01’){quarter = “Q1”}
else if(month[i] == ‘04’){quarter = “Q2”}
else if(month[i] == ‘07’){quarter = “Q3”}
else if(month[i] == ‘10’){quarter = “Q4”}
return <p id="paragraph">${quarter} ${year[i]} <br> $${GDP[i]} Billion</p>
})

const yScale = d3
.scaleLinear()
.domain([0, d3.max(GDP)])
.range([0, height - padding * 2]);
const yAxisScale = d3

.scaleLinear()
.domain([0, d3.max(GDP)])
.range([height - padding * 2, 0]);
const yAxis = d3.axisLeft(yAxisScale);

let time = data.data.map(item => new Date(item[0]));

let xMax = new Date(d3.max(time));

xMax.setMonth(xMax.getMonth() + 3);

let xScale = d3
.scaleTime()
.domain([d3.min(time), xMax])
.range([0, GDP.length * 3]);
let xAxis = d3.axisBottom().scale(xScale);

const svg = d3
.select(“body”)
.append(“svg”)
.attr(“height”, height)
.attr(“width”, width);

svg
.selectAll(“rect”)
.data(GDP)
.enter()
.append(“rect”)
.attr(“data-date”, (d, i) => data.data[i][0])
.attr(“data-gdp”, (d, i) => data.data[i][1])
.attr(“class”, “bar”)
.attr(“fill”, “#707B7C”)
.attr(“x”, (d, i) => padding + i * 3)
.attr(“y”, (d, i) => height - yScale(d) - padding)
.attr(“width”, 2)
.attr(“height”, (d, i) => yScale(d))
.on(‘mouseover’, tip.show)
.on(‘mouseout’, tip.hide)
svg.call(tip)

svg
.append(“g”)
.call(yAxis)
.attr(“class”, “yAxis”)
.attr(“id”, “y-axis”)
.attr(“transform”, translate(${padding}, ${padding}));

svg
.append(“g”)
.call(xAxis)
.attr(“class”, “xAxis”)
.attr(“id”, “x-axis”)
.attr(“transform”, translate(${padding}, ${height - padding}));

svg
.append(“text”)
.text(“Gross Domestic Product”)
.attr(“transform”, “rotate(270)”)
.attr(“x”, -width / 3)
.attr(“y”, padding - 50);
svg
.append(“text”)
.text(“Timeline”)
.attr(“transform”, translate(${width / 2 - 40}, ${height - 30}));

svg
.append(“text”)
.text(“GDP of The US”)
.attr(“id”, “title”)
.attr(“transform”, translate(${width / 2 - 110},${padding - 30}));
}
);

attach it to the bars with an onmouseover event and a callback function. it will return an array of the date and gdp. I just finished this challenge. https://codepen.io/b3u/pen/JmJLGj

Thank you so much for your advice. I will implement it and update the sitch soon. Thanks again.

1 Like

Thank you so much man. It did the trick. Have a great day!

I’m having the exact same problem as you did. I read the answer but still can’t pass tooltip #2.
I’m using d3.tip() like you did. Could you make it work with d3.tip()? If so how? Or did you have to do it a different way?

Hi there.

Woah, it’s been a long time since I’ve been here. My d3 is very rusty. Is it okay if I give you the link to my project and you can see my method to solving the issue there?

Here it is: https://codepen.io/Edwinyms/pen/NOXxGw

Good luck

1 Like

Thanks for the reply! I had to abandon d3.tip() and do the tooltip similar to how you did to get the test to pass.

1 Like