Bar Chart challenge: tests 10 to 13 - not passing

[lucierabahi]

Tell us what’s happening:
Hi. I can’t pass the last tests (10 to 13) but I don’t understand why…

1/ For the tests 10 and 11, I’m not even sure I understand what I’m supposed to do… So i also fail at test 13 which is linked to test 10.

2/ As for the test 12, I do have a tooltip with an id of tooltip, so I don’t get why it doesn’t pass…

Your code so far

// Select the div and append svg
const svg = d3
    .select('.canvas')
    .attr('align', 'center')
    .append('svg')
    .attr('width', 800)
    .attr('height', 400);

// Create margins and dimensions of the graph
const margin = { top: 20, right: 20, bottom: 100, left: 100 };
const graphWidth = 800 - margin.left - margin.right;
const graphHeight = 400 - margin.top - margin.bottom;

// Create and append the graph
const graph = svg
    .append('g')
    .attr('width', graphWidth)
    .attr('height', graphHeight)
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

// Create x and y axis groups
const xAxisGroup = graph
    .append('g')
    .attr('transform', `translate(0, ${graphHeight})`)
    .attr('id', 'x-axis');

const yAxisGroup = graph.append('g').attr('id', 'y-axis');

// Retrieve the data
d3.json(' https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json').then(data => {
    // Retrieve data from json object

    // Create array of objects
    const objFromArray = array => {
        const dataset = [];

        class Object {
            constructor(date, gdp) {
                this.date = date;
                this.gdp = gdp;
            }
        }

        array.forEach((date, i) => {
            let newObj = new Object(date[0], array[i][1]);
            dataset.push(newObj);
        });
        return dataset;
    };

    const dataset = objFromArray(data.data);
    console.log(dataset);

    // Create linear scale
    const y = d3
        .scaleLinear()
        .domain([0, d3.max(dataset, dataset => dataset.gdp)])
        .range([graphHeight, 0]);

    // Create band scale
    const x = d3
        .scaleBand()
        .domain(dataset.map(item => item.date))
        .range([0, graphWidth])
        .paddingInner(0.2)
        .paddingOuter(0.2);

    // Join the data to rects
    const rects = graph.selectAll('rect').data(dataset);
    console.log(rects);

    rects
        .attr('width', x.bandwidth)
        .attr('height', dataset => graphHeight - y(dataset.gdp))
        .attr('fill', 'orange')
        .attr('x', dataset => x(dataset.date))
        .attr('y', dataset => y(dataset.gdp))
        .attr('data-date', dataset => dataset.date)
        .attr('data-gdp', dataset => dataset.gdp)
        .attr('class', 'bar')
        //
        .append('title')
        .attr('id', 'tooltip')
        .text(dataset => `${dataset.date} - $ ${dataset.gdp} Billion`);

    // Append the enter selection to the DOM
    rects
        .enter()
        .append('rect')
        .attr('width', x.bandwidth)
        .attr('height', dataset => graphHeight - y(dataset.gdp))
        .attr('fill', 'orange')
        .attr('x', dataset => x(dataset.date))
        .attr('y', dataset => y(dataset.gdp))
        .attr('data-date', dataset => dataset.date)
        .attr('data-gdp', dataset => dataset.gdp)
        .attr('class', 'bar')
        //
        .append('title')
        .attr('id', 'tooltip')
        .text(dataset => `${dataset.date} - $ ${dataset.gdp} Billion`);

    // Create and call the axis
    const xAxis = d3
        .axisBottom(x)
        .scale(x)
        .tickValues(
            x.domain().filter(function(dataset, i) {
                return !(i % 20);
            })
        )
        .tickFormat(dataset =>
            dataset.replace(
                /\b\D(0?[1-9]|1[0-2])-(0?[1-9]|[12][0-9]|3[01])\b/gm,
                ''
            )
        );

    const yAxis = d3
        .axisLeft(y)
        .ticks(10)
        .tickFormat(dataset => `$ ${dataset} bn`);

    xAxisGroup.call(xAxis);
    yAxisGroup.call(yAxis);

    xAxisGroup
        .selectAll('text')
        .attr('transform', 'rotate(-40)')
        .attr('text-anchor', 'end')
        .attr('fill', 'orange');

    const ticks = d3.selectAll('.tick text');
    ticks.attr('class', 'tick');
});

Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0.

Link to the challenge:

freeCodeCamp.org