Data Visualization Projects - Visualize Data with a Bar Chart

Hi guys,

I can’t seem to pass tests number 10 and 11 in the Bar Chart Data Visualization challenge. Could somebody point out why it is not working and perhaps point me in the right direction. Thank you very much.

This is my code

loadData = ()=> {
  req = new XMLHttpRequest();"GET", "" , true);
  req.onload= ()=>{
      json = JSON.parse(req.responseText);
      //dynmaic height
    /*var margin = {top: 20, right: 200, bottom: 0, left: 20},
        width = 300,
        height = datajson.length * 20 + + margin.bottom;*/
      //create measurements
      const margin = 200;
      const width = 1000;
      const height = 600 - margin;
      const maxYScale = d3.max(, (d) => d[1]);

      //date formatter
      const formatDate = d3.timeParse("%Y-%m-%d"); //convert from string to date format
      const parseDate = d3.timeFormat("%Y"); //format date to cstring
      //tooltip selection
      const tooltip ="body")
        .attr("id", "tooltip");
      //create svg
      const svg ="svg");
      const chart = svg.append("g")
        .attr("transform", `translate(${margin}, ${margin})`);

        .attr("x", (width / 2))             
        .attr("y", 0 - (margin / 2))
        .attr("text-anchor", "middle") 
        .attr("id", "title")
      //y-axis: split charts into 2 equal parts using scaling function
      const yScaleBar = d3.scaleLinear()
        .range([height, 0]) //length
        .domain([0, maxYScale]); //content

      //create x-axis
      const yAxis = d3.axisLeft(yScaleBar);

      //append y-axis
        .attr("id", "x-axis")

       //create x-scale: for enumerating bars bars
      const xScaleBar = d3.scaleBand()
        .range([0, width]) //length
        .domain(> d[0])) 
      //for creating the x-axis
      const xScaleAxis = d3.scaleBand()
        .range([0, width]) //length
        .domain(> parseDate(formatDate(d[0])))) 

      //create x-axis
      //const xAxis = d3.axisBottom(xScaleBar);
      const xAxis = d3.axisBottom(xScaleAxis)
        .tickValues(xScaleAxis.domain().filter(function(d) { return (d % 5 === 0)}));
      //append x-axis
        .attr(`transform`, `translate(0, ${height})`)
        .attr("id", "y-axis")

      //make bars
        .attr("x", (d) => xScaleBar(d[0]))
        .attr("y", (d) => yScaleBar(d[1]))
        .attr("height", (d) => height - yScaleBar(d[1]))
        .attr("width", xScaleBar.bandwidth())
        .attr("class", "bar")
        .attr("data-date", (d) => (d[0]))
        .attr("data-gdp", (d) => (d[1]))
        .on("mouseenter", function (d, i) {          
"visibility", "visible")
            .attr("data-date", d[0])
            .html("Date: " + d[0] + "<br>" + "GDP: " + d[1])
            .style('left', d3.event.pageX + 10 + 'px')
            .style('top', d3.event.pageY + 10 + 'px')
        .on("mouseleave", function (d, i) {
"visibility", "hidden")

     //grid lines
        .attr('class', 'grid')
        .tickSize(-width, 0, 0)
        .attr("class", "grid-lines");
      //label x axis
        .attr('x', width / 2 + margin)
        .attr('y', (height +  margin + 100))
        .attr('text-anchor', 'middle')
     //label y axis
        .attr('x', -(height / 2) - margin)
        .attr('y', margin / 5)
        .attr('transform', 'rotate(-90)')
        .attr('text-anchor', 'middle')
        .text('Gross Domestic Product');


This is my codepen for the challenge:


I noticed that you labeled the x and y-axis ‘id’, opposite to what they are, this is just before you .call(axis). Also, changed the padding in xScaleBar and xScaleAxis to paddingInner - the test passes for me.

Hi JP,

First of all, thank you for taking a look at my problem.
I was able to apply all the changes and it did solve test 11. However, I still can’t pass test 10. It states:x values don't line up with x locations : expected false to be true. Did all the tests pass when you applied the changes?

Your welcome. Is your problem solved now? When I reloaded your page and ran the tests it shows all tests pass.

It you don’t mind my suggesting, please have a look at the font size units in your title. For example, your 10vh, translates to a font-size of 125px on my screen. The only part of Federal I can see is ‘deral’. My apologies for not bringing this to your attention sooner, but didn’t seem as important as addressing the problem you were asking about.

Hi JP,

It’s really strange that it passes all test on your end but still can’t pass test number 10 on mine.
I am still looking through it while working on the scatterplot challenge as well. Also, thank you for pointing out the font size error. I fixed it right away.

Thank you again for your help, time and effort JP. Much appreciated.
Have a great day.

That is strange. Have you refreshed your page?? Or running in a different browser? Funny that the tests would pass on my computer and fail on yours, because it’s your code I’m now testing. When I check your codepen, in chrome and firefox - all 14 tests pass. Can you reopen your codepen in a new window and check, please?

Hi JP,

Yup, I refreshed the page, tried it on IE, firefox and chrome. Is it a bug?

I don’t think codepen supports IE browsers, and unfortunately, I don’t know enough about code to know if this is a bug. One of us may being doing something wrong. ??? Sorry I couldn’t be of more help. Thanks for checking again. Good luck.

Thank you JP. I appreciated your help.