Data Visualization: Bar Chart Project -- failing 3 tests

JavaScript
1

Hey all, this is my first Forum post. Please let me know if I’m putting my code in the wrong place or making any other embarrassing noob errors.

It looks to me as if I’ve met the constraints for the Data Visualization: Bar Chart project, but I can’t pass three of the tests: x-axis alignment of the bars, and the two tooltip tests (User Stories #10, 12, & 13). What am I missing?

Here’s a link to my project with the test suite included.

And here’s my code. Thanks in advance!

d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json").then(function(dataset) {
  
  const h = 400;
  const w = 800;
  const padding = 50;
  const barWidth = w/dataset.data.length;
  
  var msDatesData = dataset.data.map(function(i){
    return i[0];
  });
  var datesData = dataset.data.map(function(i){
    return new Date(i[0]);
  });
  var numbersData = dataset.data.map(function(i){
    return i[1];
  });
  var minDate = new Date(d3.min(datesData));
  var maxDate = new Date(d3.max(datesData));
  maxDate.setMonth(maxDate.getMonth() + 3);
  const xScale = d3.scaleTime().domain([minDate,maxDate])
                                 .range([padding, w-padding]);
  const yScale = d3.scaleLinear().domain([0,d3.max(numbersData)])
                                 .range([h-padding, padding]);
  const xAxis = d3.axisBottom(xScale);
  const yAxis = d3.axisLeft(yScale);

  
  const svg = d3.select("body")
                .append("svg")
                .attr("width",w).attr("height",h);
  svg.append("g").attr("transform", "translate(0, " + (h-padding) + ")")
                 .attr('id','x-axis')
                 .call(xAxis)
     .append("g").attr("transform", 'translate('+padding+', '+(padding-h)+')')
                 .attr('id','y-axis')
                 .call(yAxis);
  
  svg.append("text").attr('id','title').text(dataset.source_name)
                    .attr('x',w/2).attr('y',padding/2)
                    .attr('font-size','24px')
                    .attr('text-anchor','middle')
                    .attr('text-weight','strong');

  svg.selectAll('rect').data(dataset.data).enter().append('rect')
                    .attr('class','bar')
                    .attr('fill','purple')
                    .attr('data-date',(d,i)=>d[0])
                    .attr('data-gdp',(d)=>d[1])
                    .attr('x',(d,i)=>xScale(datesData[i]))
                    .attr('y',(d,i)=>yScale(d[1]))
                    .attr('width',barWidth)
                    .attr('height',(d)=>(h-yScale(d[1])-padding))
             .append('title')
                    .attr('id','tooltip')
                    .attr('data-date',(d)=>d[0])
                    .text((d)=>'$'+d[1]+' BILLION');
});
2

I figured out the x-axis problem:
I was appending the y-axis to the x-axis rather than to the svg element.

The tooltip problem is still unsolved.

3

I think the problem with the tooltip code was that there is a requirement to have the pop-up text appear immediately after the mouse is over the shape, rather than fading in. The lessons only teach you the fade-in method. The other method is more complex, and I had to copy most of the code from the example. I understand it now, but I was hoping to be able to figure how to do it on my own from online manuals without looking at the example code. Nope!

2 Likes