Adding axis at bar graph

JavaScript
1

Tell us what’s happening:

Hi everyone,

I’m trying to add the “x” and “y” axis to a graph but it doesn’t work and I can’t figure out the motivation.

Someone is so kind to give some advice?

If it can be usefull I leave the link to the CodePen Project

Your code so far

HTML

<div class="main">
  <div class="container">
    <div id="title">Gross Domestic Product USA</div>
    <div class="visHolder"></div>
  </div>
</div>

JavaScript


const width = 1000;
const height = 500;
const padding = 0;

//Creating SVG
const svg =  d3
  .select(".visHolder")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

//Adding data
d3.json(
  "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json",
  function (e, dataset) {
  
  //Returning an array of year+quarter values of each date
  let years = dataset.data.map(function(item) {
    
    let quarter;
    let month = item[0].substring(5, 7);
    
    if (month === "01") {
      quarter = "Q1";
    } else if (month === "04") {
      quarter = "Q2";
    } else if (month === "07") {
      quarter = "Q3";
    } else {
      quarter = "Q4";
    }
    
    return item[0].substring(0,4) + " " + quarter;
  });
  
  //Returning an array of GDP values
   let GDP = dataset.date.map(function(item) {
     return item[1];
   })
    
  //Defining scale
  let dateObject = dataset.data.map(function(item) {
    return new Date(item[0]);
  }); 
  
  const xScale = d3
    .scaleTime()
    .domain([d3.min(dateObject), d3.max(dateObject)])
    .range([padding, width-padding]);
  
  const yScale() = d3
    .scaleLinear()
    .domanin([0, d3.max(GDP)])
    .range([height-padding, padding]);
    
  //Appending axis
  const xAxis = d3.axisBottom().scale(xScale);
  
  svg
    .append("g")
    .call(xAxis)
    .attr("id", "x-axis");
  
  const yAxis = d3.axisLeft().scale(yScale);
  
  svg
    .append("g")
    .call(yAxis)
    .attr("id", "y-axis");
  }
);

Your browser information:

User Agent is: Mozilla/5.0 (Android 9; Mobile; rv:86.0) Gecko/86.0 Firefox/86.0

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

The main problem is here. Add in some console.log() here and there and you’ll see this is not executing. It won’t execute because callbacks were last used in d3v4 and you’re using d3v7, which uses .then(), promises, and/or await/async. That will at least get you some data, but at some point you’ll need to iterate over it to draw some bars.

There are numerous typos that are preventing execution as well. For instance:

It’s harder to find them in codepen than if you work locally and can examine things in the browser console. You can determine how much code is being executed by starting at the top with a console.log() and moving it forward through the code until it no longer executes.

At this point you’ll have axes, just not where you want them.

3

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