Visualize Data with a Bar Chart

JavaScript
1

hello guys,i was having trouble passing testcases number 10 and 11.
i try my best the graph is visible correctly as expected.but i do not understand what the problem is ,may be buges on the test case.any ideas i miss let me know, thanks for all.here is the link to the full code

```
import * as d3 from “https://cdn.skypack.dev/d3@7.6.1”;

var w = 800,
h = 400,

barw = w / 275,

overlay = d3.select(“.bar”)
.append(“div”)
.attr(“class”,“overlay”)
.style(“opacity”,0),

tooltip= d3.select(“.bar”)
.append(“div”)
.attr(“id”,“tooltip”)
.style(“opacity”,0),

svgCont=d3.select(“.bar”)
.append(“svg”)
.attr(“width”, w + 100)
.attr(“height”, h + 60);

d3.json(“https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json”).then(data => {

var years = data.data.map(item => {
var quarter;
var temp = item[0].substring(5,7);
if(temp === “01”){
quarter = “Q1”;
}
else if(temp === “04”){
quarter = “Q2”;
}
else if(temp === “07”){
quarter = “Q3”;
}
else if(temp === “10”){
quarter = “Q4”;
}
return item[0].substring(0,4) + " " + quarter;
});

var yearsDate=data.data.map(item => {
return new Date(item[0]);
});

var tMax=new Date(d3.max(yearsDate));
tMax.setMonth(tMax.getMonth() + 3);

var xScale=d3.scaleTime()
.domain([d3.min(yearsDate),tMax])
.range([0,w]);

var xAxis=d3.axisBottom(xScale);
svgCont.append(“g”)
.call(xAxis)
.attr(“id”,“x-axis”)
.attr(“transform”,“translate(60, 400)”);

var gdp=data.data.map(item => {
return item[1];
})

var scale=d3.scaleLinear().domain([0,d3.max(gdp)]).range([0,h]);
var yscale=d3.scaleLinear().domain([0,d3.max(gdp)]).range([h,0]);

var yAxis=d3.axisLeft(yscale)
svgCont.append(“g”)
.call(yAxis)
.attr(“id”,“y-axis”)
.attr(‘transform’,‘translate(60, 0)’);

d3.select(“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(“x”, (d,i) => xScale(yearsDate[i]))
.attr(“y”, d => h - scale(d))
.attr(“width”, barw)
.attr(“height”, d => scale(d))
.attr(“transform”, “translate(60,0)”)
.attr(“fill”,“#5e34eb”)
.attr(“index”,(d,i) => i)
.on(“mouseover”,function (event,d){
var i = this.getAttribute(“index”);

overlay.transition().duration(0)
.style("width", barw + "px")
.style("height", scale(d) + "px")
.style("top", h - scale(d) + "px")
.style("left", i * barw + "px")
.style("transform","translateX(60px)")
.style("opacity", 0.9);

tooltip.transition().duration(200)
.style("opacity",0.9);

tooltip.html(years[i] + "<br>" + '$' +

gdp[i].toFixed(1).replace(/(\d)(?=(\d{3})+.)/g, ‘$1,’) +
’ Billion’)
.attr(“data-date”, data.data[i][0])
.style(“top”,h - 100 + “px”)
.style(“left”, i * barw + 30 + “px” )
.style(“transform”,“translateX(60px)”)

})
.on(‘mouseout’, () => {
tooltip.transition().duration(200).style(‘opacity’, 0);
overlay.transition().duration(200).style(‘opacity’, 0);
});

});

```

2

I’m too lazy to mock the rest on my own. Put the code you have in codepen or similar, post a link, and I’ll take a look.

3

Here is the link

4

The problem is in your HTML:

<div class="main">
      <div class="container">
        <div id="title">United States GDP</div>
        <div class="bar"></div>
      </div>
</div>

The two tests you are failing look for everything in the DOM with the class bar and you have a div with that class in your HTML and it’s not a bar in the visualization.

5

so,what change should i make?
make it clear please

6

Okey,i get it now thanks a lot you really helped me out :pray:

7

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