Hi guys,
I can’t seem to pass tests number 10 and 11 in the Bar Chart Data Visualization challenge. Could somebody point out why it is not working and perhaps point me in the right direction. Thank you very much.
This is my code
loadData = ()=> {
req = new XMLHttpRequest();
req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json" , true);
req.send();
req.onload= ()=>{
json = JSON.parse(req.responseText);
//dynmaic height
/*var margin = {top: 20, right: 200, bottom: 0, left: 20},
width = 300,
height = datajson.length * 20 + margin.top + margin.bottom;*/
//create measurements
const margin = 200;
const width = 1000;
const height = 600 - margin;
const maxYScale = d3.max(json.data, (d) => d[1]);
//date formatter
const formatDate = d3.timeParse("%Y-%m-%d"); //convert from string to date format
const parseDate = d3.timeFormat("%Y"); //format date to cstring
//tooltip selection
const tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip");
//create svg
const svg = d3.select("svg");
const chart = svg.append("g")
.attr("transform", `translate(${margin}, ${margin})`);
//title
chart.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin / 2))
.attr("text-anchor", "middle")
.attr("id", "title")
.text(json.source_name);
//y-axis: split charts into 2 equal parts using scaling function
const yScaleBar = d3.scaleLinear()
.range([height, 0]) //length
.domain([0, maxYScale]); //content
//create x-axis
const yAxis = d3.axisLeft(yScaleBar);
//append y-axis
chart.append("g")
.attr("id", "x-axis")
.call(yAxis);
//create x-scale: for enumerating bars bars
const xScaleBar = d3.scaleBand()
.range([0, width]) //length
.domain(json.data.map((d)=> d[0]))
.padding(0.2);
//for creating the x-axis
const xScaleAxis = d3.scaleBand()
.range([0, width]) //length
.domain(json.data.map((d)=> parseDate(formatDate(d[0]))))
.padding(0.2);
//create x-axis
//const xAxis = d3.axisBottom(xScaleBar);
const xAxis = d3.axisBottom(xScaleAxis)
.tickValues(xScaleAxis.domain().filter(function(d) { return (d % 5 === 0)}));
//append x-axis
chart.append("g")
.attr(`transform`, `translate(0, ${height})`)
.attr("id", "y-axis")
.call(xAxis);
//make bars
chart.selectAll("rect")
.data(json.data)
.enter()
.append("rect")
.attr("x", (d) => xScaleBar(d[0]))
.attr("y", (d) => yScaleBar(d[1]))
.attr("height", (d) => height - yScaleBar(d[1]))
.attr("width", xScaleBar.bandwidth())
.attr("class", "bar")
.attr("data-date", (d) => (d[0]))
.attr("data-gdp", (d) => (d[1]))
.on("mouseenter", function (d, i) {
tooltip.style("visibility", "visible")
.attr("data-date", d[0])
.html("Date: " + d[0] + "<br>" + "GDP: " + d[1])
.style('left', d3.event.pageX + 10 + 'px')
.style('top', d3.event.pageY + 10 + 'px')
})
.on("mouseleave", function (d, i) {
tooltip.style("visibility", "hidden")
});
//grid lines
chart.append('g')
.attr('class', 'grid')
.call(d3.axisLeft()
.scale(yScaleBar)
.tickSize(-width, 0, 0)
.tickFormat(''))
.attr("class", "grid-lines");
//label x axis
svg.append('text')
.attr('x', width / 2 + margin)
.attr('y', (height + margin + 100))
.attr('text-anchor', 'middle')
.text('Year');
//label y axis
svg.append('text')
.attr('x', -(height / 2) - margin)
.attr('y', margin / 5)
.attr('transform', 'rotate(-90)')
.attr('text-anchor', 'middle')
.text('Gross Domestic Product');
}
}
loadData();
This is my codepen for the challenge: