Bar Chart Project help

1

Hello everyone,

I’m currently oing the bar chart problem and i am having trouble accessing the data. For a the first few times I was able to access the data with this code. I know the URL is the exact same provided in the project requirements page.

req=new XMLHttpRequest();
req.open("GET",url,true);
req.send();
req.onload=function(){
  json=JSON.parse(req.responseText);
  console.log(json)
};

but now the json file doesn’t show up and I get a strange error in the console like this:
Failed to load resource: net::ERR_CONTENT_DECODING_FAILED
08:19:34.707

I tried going to the link and view the json file directly but It says that the page doesn’t exist or is temporarily down. Is this going on with anybody else? I want to get started on this project

2

Try defining your onload function before doing the open and send.

req = new XMLHttpRequest();
req.onload = function() {
	console.log(JSON.parse(this.responseText));  
};
req.open("GET", url, true);
req.send();
3

thank you but I solved this…I can’t understand how my tool-tips are suppose to work

const url =
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";

// Remember DOMContentloaded as an event listener
// ...to put bars right side up: height of svg - height of bar
// This is how I get the data that I need into a variable for later refernce
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send();
var dataSet = JSON.parse(req.responseText);

const w = 1000; //this sets my dimensions for the svg canvas
const h = 600;
const padding = 60;
const svg = d3 //this is my svg canvas
  .select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

// Must create scales to scale the data itself accordingly as well for the guides and ticks
// xScale
// yScale
// xTimeTicks
// yLineTicks

// must define your scales before you use them!
const yScale = d3
  .scaleLinear()
  .domain([0, d3.max(dataSet["data"], d => d[1])])
  .range([0, h - padding]);

// you need a time scale to cover the full width of the canvas or the area you want to cover
const xScale = d3
  .scaleTime()
  .domain([new Date(dataSet["from_date"]), new Date(dataSet["to_date"])])
  .range([0, w - padding]);

// variables to deal with creating the appropriate axis
const yAxisValues = d3 //generates the scaled values the axis needs, like scaling for bars except reversed to show values in right order
  .scaleLinear()
  .domain([0, d3.max(dataSet["data"], d => d[1])])
  .range([h - padding, 0]);

const yAxisTicks = d3.axisLeft(yAxisValues); //this is axis object with modifiable ticks

const xAxisValues = d3
  .scaleTime()
  .domain([new Date(dataSet["from_date"]), new Date(dataSet["to_date"])])
  .range([0, w - padding]);

const xAxisTicks = d3.axisBottom(xScale).ticks(d3.timeYear.every(3));

// TOOLTIP
var tooltip = d3.select('body')
.append('div')

//BARS
d3
  .select("svg")
  .selectAll("rect")
  .data(dataSet["data"])
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("data-date", d => d[0])
  .attr("data-gdp", d => d[1])
  .attr("width", 2)
  .attr("height", d => yScale(d[1])) //cant render a negative height
  .attr("x", (d, i) => xScale(new Date(d[0]))) //needs to be converted to date first before the scale can do it job properly
  .attr("y", (d, i) => h - yScale(d[1]))
  .attr("transform", `translate(${padding}, ${-padding})`)
  // .append("title")  //toolTip
  // .text(d => new Date(d[0]))

svg
  .append("g")
  .attr("id", "x-axis")
  .attr("transform", `translate(${padding} ,${h - padding})`)
  .call(xAxisTicks);

svg
  .append("g")
  .attr("id", "y-axis")
  .attr("transform", `translate(${padding} , 0)`) //translates it 60px
  .attr("class", "tick")
  .call(yAxisTicks);

here is the link to the code of you want to look at it: https://codepen.io/anon/pen/vQeBQx/?editors=0010

4

It works for me.

Uncomment out the .append… and the .text… then the tooltips come up when you hover on the bars. Sometimes they disappear quickly as the bars are so thin, you have to keep the mouse still.

What can you not get working?

5

Can’t pass last 2 test.

Don’t know where to insert the I’d attribute as well as the corresponding date_data property