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);
}
);