D3 Bar Chart not rendering

Initially I just copy-pasted the json file and assigned it to a variable and then made the bar chart that way but now I’m trying to do it the way it is intended (getting it via the web address and using the data that way). It wasn’t completed but visually it was complete other than the tooltips (the axes and bars were done).

After making the change described above (hopefully it was clear what I meant) nothing shows up anymore and I’m at a loss as to how to make it show again.

https://codepen.io/TheTubbyNinja/pen/KKaPbgX?editors=0010

//Design variables
var width = 800;
var height = 400;
var barWidth = width / 275;

//Chart creation
var tooltip = d3.select(".bar-chart").append("div").attr("id", "tooltip");
var barChart = d3.select(".bar-chart").append("svg").attr("height", height + 60).attr("width", width + 100);
var barChart = svg.append("g");

d3.json(
  'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json',
  function (e, data) {
    //Data variables
    var GDP = data.data.map((item) => item[1]);
    var gdpMax = d3.max(GDP);
    var dates = data.data.map((item) => item[0]);

    //Scales
    var yScale = d3.scaleLinear().domain([0, gdpMax]).range([height, 0]);
    var xScale = d3.scaleTime().domain(d3.extent(dates, (d) => new Date(d))).range([0, width]);
    var axisX = d3.axisBottom().scale(xScale);
    var axisY = d3.axisLeft().scale(yScale);
    
    //Bars
    barChart
      .selectAll("rect")
      .data(GDP)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("transform", "translate(50,20)")
      .attr("height", (d) => height - yScale(d))
      .attr("width", barWidth)
      .attr("x", (d, i) => barWidth * i)
      .attr("y", (d) => yScale(d))
      .attr("fill", "green")
      .attr("data-gdp", (d) => d)
      .attr("data-date", (d, i) => dates[i])
      .on("mouseover", (d, i) => 
         tooltip.html(dates[i] + "<br>" + "$" + GDP[i] + "Billion"));

    //X axis
    barChart
      .append("g")
      .attr("id", "x-axis")
      .attr("transform", "translate(50," + (height + 20) + ")")
      .call(axisX);

    //Y axis
    barChart
      .append("g")
      .attr("id", "y-axis")
      .attr("transform", "translate(50, 20)")
      .call(axisY);
  }
);


Hi there :wave:

When you open the console you’ll find first error:

Uncaught ReferenceError: svg is not defined
    at pen.js:10

When you fix that, the bar chart still won’t render and this brings us to the second problem, which is the way d3.json() is used.

In your code you’re using it like this, which unfortunately is not how this method works.

d3.json(url,  function (e, data) { ... })

Here’s a correct usage:

d3.json(url)
  .then(data => { /* do something with the data */ })
  .catch(error => { /* catch error if something goes wrong */ });

About d3.json

1 Like

the example project uses an older d3 version where the json() method has a different syntax. The current codepen suggested d3 version has a syntax more similar to the fetch method from the curriculum

1 Like

That’s really good point @Sylvant I’ve forgotten that the example project might be using an old d3 version :slight_smile:

i only know because i recently had similar issue to OP :wink:

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