Need help with code? I don't know where to fix my code? PLEASE HELP!

JavaScript
1

Tell us what’s happening:

#BarChartTests

passes:9 failures:5 duration:3.90

#Technology Stack
1. You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at d3/API.md at master · d3/d3 · GitHub. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
#Content
1. My chart should have a title with a corresponding id=“title”
2. My Chart should have a element x-axis with a corresponding id=“x-axis”
3. My Chart should have a element y-axis with a corresponding id=“y-axis”
4. Both axes should contain multiple tick labels, each with the corresponding class=“tick”
5. My Chart should have a element for each data point with a corresponding class=“bar” displaying the data

The number of bars is not equal to the number of data points : expected 97 to equal 275
   a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
        FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
        FCC_Global</e.exports/n.equal@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:320
        test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:192210
        FCC_Global</</<[33]</</g.prototype.run/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
        FCC_Global</</<[33]</</g.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963
        FCC_Global</</<[34]</</N.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686
        s/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
        o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075
        o/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45146
        o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44190
        FCC_Global</</<[34]</</N.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44961
        f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1384
  1. Each bar should have the properties “data-date” and “data-gdp” containing date and GDP values
        Could not find property "data-gdp" in bar : expected null to not equal null
        a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
        FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
        c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889
        l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130
        FCC_Global</e.exports/n.isNotNull@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1549
        test/</</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:192711
        test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:192587
        FCC_Global</</<[33]</</g.prototype.run/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
        FCC_Global</</<[33]</</g.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963
        FCC_Global</</<[34]</</N.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686
        s/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
        o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075
        o/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45146
        o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44190
        FCC_Global</</<[34]</</N.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44961
        f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1384
  1. The bar elements’ “data-date” properties should match the order of the provided data
        Bars should have date data in the same order as the provided data : expected '1997-05-01' to equal '1947-01-01'
        a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
        FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
        FCC_Global</e.exports/n.equal@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:320
        test/</</</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:193234
        test/</</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:193168
        l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:24444
        fireWith@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:25192
        E@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:76077
        t/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:78545
  1. The bar elements’ “data-gdp” properties should match the order of the provided data
        Bars should have gdp data in the same order as the provided data : expected null to equal 243.1
        a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
        FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
        FCC_Global</e.exports/n.equal@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:320
        test/</</</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:193785
        test/</</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:193720
        l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:24444
        fireWith@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:25192
        E@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:76077
        t/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:25:78545
  1. Each bar element’s height should accurately represent the data’s corresponding GDP
  2. The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
  3. The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.
        y values don't line up with y locations : expected false to be true
        a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
        FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
        FCC_Global</e.exports/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:14996
        e@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:425:182
        e@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:92:1382
        FCC_Global</e.exports/n.isTrue@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1196
        test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:195138
        FCC_Global</</<[33]</</g.prototype.run/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
        FCC_Global</</<[33]</</g.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963
        FCC_Global</</<[34]</</N.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686
        s/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
        o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075
        o/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45146
        o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44190
        FCC_Global</</<[34]</</N.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44961
        f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1384

#TooltipTests

  1. I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area 2530ms
  2. My tooltip should have a “data-date” property that corresponds to the “data-date” of the active area.502ms

Your code so far

/* global d3 /
/ eslint-disable max-len */

// eslint-disable-next-line no-unused-vars
const projectName = ‘bar-chart’;

var width = 800,
height = 400,
barWidth = width / 275;

var tooltip = d3
.select(’.visHolder’)
.append(‘div’)
.attr(‘id’, ‘tooltip’)
.style(‘opacity’, 0);

var overlay = d3
.select(’.visHolder’)
.append(‘div’)
.attr(‘class’, ‘overlay’)
.style(‘opacity’, 0);

var svgContainer = d3
.select(’.visHolder’)
.append(‘svg’)
.attr(‘width’, width + 100)
.attr(‘height’, height + 60);

d3.json(
‘https://raw.githubusercontent.com/gavmister/Amazon-Income-May-01-1997-May-01-2021/main/.json’,
function (e, data) {
svgContainer
.append(‘text’)
.attr(‘transform’, ‘rotate(-90)’)
.attr(‘x’, -200)
.attr(‘y’, 80)
.text(‘Amazon Yearly Income’)
.style(‘fill’, ‘#FFF000’)
.style(‘font-family’, ‘Grenze Gotisch’)
.style(‘font-size’, ‘24.25px’);

svgContainer
  .append('text')
  .attr('x', width / 2 + 120)
  .attr('y', height + 50)
  .text('More Information: https://www.marketwatch.com/investing/stock/amzn')
  .attr('class', 'info');

var years = data.data.map(function (item) {
  var quarter;
  var temp = item[0].substring(5, 7);

  if (temp === '05') {
    quarter = 'Q1';
  } else if (temp === '08') {
    quarter = 'Q2';
  } else if (temp === '11') {
    quarter = 'Q3';
  } else if (temp === '02') {
    quarter = 'Q4';
  }

  return item[0].substring(0, 4) + ' ' + quarter;
});

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

var xMax = new Date(d3.max(yearsDate));
xMax.setMonth(xMax.getMonth() + 3);
var xScale = d3
  .scaleTime()
  .domain([d3.min(yearsDate), xMax])
  .range([0, width]);

var xAxis = d3.axisBottom().scale(xScale);

svgContainer
  .append('g')
  .call(xAxis)
  .attr('id', 'x-axis')
  .attr('transform', 'translate(60, 400)');

var AYI = data.data.map(function (item) {
  return item[1];
});

var scaledAYI = [];

var ayiMax = d3.max(AYI);

var linearScale = d3.scaleLinear().domain([0, ayiMax]).range([0, height]);

scaledAYI = AYI.map(function (item) {
  return linearScale(item);
});

var yAxisScale = d3.scaleLinear().domain([0, ayiMax]).range([height, 0]);

var yAxis = d3.axisLeft(yAxisScale);

svgContainer
  .append('g')
  .call(yAxis)
  .attr('id', 'y-axis')
  .attr('transform', 'translate(60, 0)');

d3.select('svg')
  .selectAll('rect')
  .data(scaledAYI)
  .enter()
  .append('rect')
  .attr('data-date', function (d, i) {
    return data.data[i][0];
  })
  .attr('data-ayi', function (d, i) {
    return data.data[i][1];
  })
  .attr('class', 'bar')
  .attr('x', function (d, i) {
    return xScale(yearsDate[i]);
  })
  .attr('y', function (d) {
    return height - d;
  })
  .attr('width', barWidth)
  .attr('height', function (d) {
    return d;
  })
  .style('fill', '#006400')
  .attr('transform', 'translate(65, 0)')
  .on('mouseover', function (d, i) {
    overlay
      .transition()
      .duration(0)
      .style('height', d + 'px')
      .style('width', barWidth + 'px')
      .style('opacity', 0.9)
      .style('left', i * barWidth + 0 + 'px')
      .style('top', height - d + 'px')
      .style('transform', 'translateX(578px)');
    tooltip.transition().duration(200).style('opacity', 0.9);
    tooltip
      .html(
        years[i] +
          '<br>' +
          '$' +
          AYI[i].toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') +
          ' Billion'
      )
      .attr('data-date', data.data[i][0])
      .style('left', i * barWidth + 30 + 'px')
      .style('top', height - 100 + 'px')
      .style('transform', 'translateX(578px)');
  })
  .on('mouseout', function () {
    tooltip.transition().duration(200).style('opacity', 0);
    overlay.transition().duration(200).style('opacity', 0);
  });

}
);

Your browser information:

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

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

Hello there,

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

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