JavaScript D3.js simple bar chart does not display the bars

[lorelei]

Hi all.
I'm thinking it's a problem with the xScale , because when I test console.log(xScale(20)) or such, it shows negative numbers.

Hope someone is willing to help.

Thanks🙂


I'll just post a link to my codepen

codepen

 

[lorelei]

oke here's the code ,in case using a codepen link is a problem

[CODE lang="javascript" highlight="43"]function displayData(json){
let dataset = [];
const margin = 60;

Object.keys(json).forEach(function(key){
dataset.push([key,json[key]]);
});
//get the 'data' property
const data = dataset[dataset.length-1];
let arrGDP =[]; let arrYear=[];
//the 'data' property values for year and GDP
data[1].forEach(element=>(arrGDP.push(element[1])));
data[1].forEach(element=>(arrYear.push(parseInt(element[0]))));

const svgHeight = d3.max(arrGDP) + (2*margin);
const svgWidth = d3.max(arrYear) + (2*margin);
const gWidth = d3.max(arrYear)/arrYear.length;
const gHeight = d3.max(arrGDP);

const yScale = d3.scaleLinear()
.domain([d3.min(arrGDP), d3.max(arrGDP)])
.range([d3.max(arrGDP), 0]);
const xScale = d3.scaleLinear()
.domain([d3.min(arrYear),d3.max(arrYear)])
.range([0,d3.max(arrYear)])
const svg = d3.select("body")
.append("svg")
.attr("id","container")
.attr("width",svgWidth)
.attr("height",svgHeight);
const chart = svg.append('g')
.attr('transform', `translate(${margin}, ${margin})`);
chart.append('g')
.call(d3.axisLeft(yScale));
chart.append('g')
.attr('transform', `translate(0, ${gHeight})`)
.call(d3.axisBottom(xScale));
chart.append('g')
.selectAll("rect")
.data(arrYear)
.enter()
.append("rect")
.attr('x',(d,i,arrYear)=>xScale(i))
.attr('y',(d)=>gHeight-yScale(d))
.attr("width",gWidth)
.attr("height",(d,i,arrGDP)=>yScale(d))
}

function getData(){
const req = new XMLHttpRequest();
req.open("GET",'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json',true);
req.send();
//error check
req.onload = function(){
const json = JSON.parse(req.responseText);
displayData(json);
};
}
document.addEventListener('DOMContentLoaded', getData);

[/CODE]

 

[lorelei]

Okay, so I figured out that line 43, was off course calculating for i (0 to 275) instead of the years.
So if I use d instead that should work.
But my problem still is that I need access to both arrYear and arrGDP ?
.attr("height" , (d,i, arrGDP)=>yScale(arrGDP)) , does not work?

Thanks !

 

[lorelei]

I'm still unable to get this right. It's supposed to show the GDP growth from 1947 to 2015.
Instead it starts with the highest growth value in 1947 . Plus it should be 275 bars?
Hope someone is willing to take a look 🙂

 

[lorelei]

Okay, now I managed to fix the direction of the bars, just that I still don't see 275 of them yet ?

 

[lorelei]

Okay, I solved it . Just posting somewhere(here) asking for help is enough sometimes, just to keep going at a problem .

This stackoverlfow post gave me some insight at least:

Wrong usage of d3 scale with same values in data?

I'm new to d3 and using it for creating a simple chart using array of numbers where the value '16' appears twice in it. It generate the chart with one 'missing' 'rect' element for the 2nd '16' val...

stackoverflow.com

I had multiple same inputs (4) for each year.
So I changed the xScale range to the array length ( multiplied that by a multiplier to make the rect wider) and called xScale(i *multiplier).

Now to see if it will eventually pass the FCC test 🙂

 

[LTomy]

Hello lorelei,

Sorry that you had received no reply :/!

I am glad you found a solution though 😉

 

[lorelei]

Hello again,
I thought I had it solved but it seems not. I'm not sure at all what I'm doing I think.
Some insight would be nice.
Still the same link in top post.

I hope someone will reply,, have mercy !! it's been 2 weeks this project alone!

Thanks

 

[lorelei]

Still stuck. I'm about to throw in the towel. I'm beginning to despise programming.
Not worth it anymore this amount of stress and grief.

 

[lorelei]

Sorry to post so often. I figured the part that had me stuck finally out ! Now for the tooltips. Will look at that tomorrow.
Hopefully I'll be able to figure that out ,or I'll be back 🙂