I have a bar chart who shows on x axis dates, on y axis gdp per year and bars themselves have values of each individual year. My problems is that on x axis, dates should start 0, 1950, and every tick afterwards should increase +5 years. But instead, it looks like this:
Even if i use .tickFormat() which should return with condition d%5!=0 ? " " : years[d]; correct(expected) result, which it doesn’t.
I want to add y axis is fine, x axis is lined up also, only on x axis ticks should show dates 0 -> 1950 -> 1955 -> ...5+ .
Here is my code:
let res = null;
$(document).ready(() => {
let url =
"https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";
$.ajax({
url: url,
success: (response) => {
res = JSON.parse(response);
let dataset = [];
let values = [];
let years = [];
let yearsNoDuplicates = [];
let quarters = [];
for (let i = 0; i < res.data.length; i++) {
let year = res.data[i][0];
let month = res.data[i][0].substring(
res.data[i][0].length - 5,
res.data[i][0].length - 3
);
let q = null;
if (parseInt(month) <= 3) {
q = "Q1";
}
if (parseInt(month) <= 6 && parseInt(month) > 3) {
q = "Q2";
}
if (
parseInt(month) <= 9 &&
parseInt(month) > 6 &&
parseInt(month) > 3
) {
q = "Q3";
}
if (
parseInt(month) <= 12 &&
parseInt(month) > 9 &&
parseInt(month) > 6 &&
parseInt(month) > 3
) {
q = "Q4";
}
dataset.push([res.data[i][1], year, q]);
values.push(res.data[i][1]);
years.push(parseInt(year.substring(0, 4)));
quarters.push(q);
}
yearsNoDuplicates = years.filter((item, i) => {
return i === years.indexOf(item);
});
const w = 800;
const h = 600;
const m = { top: 40, right: 40, bottom: 40, left: 40 };
const svg = d3
.select("#demo")
.append("svg")
.attr("width", w + m.left + m.right)
.attr("height", h + m.top + m.bottom);
const g = svg
.append("g")
.attr("transform", "translate(" + m.left + "," + m.top + ")");
let xScale = d3
.scaleLinear()
.range([0, w])
.domain([0, values.length - 1]);
const xAxis = d3.axisBottom(xScale).tickFormat((d, i) => {
return d % 5 != 0 ? " " : years[d]; //is equivalent to return years[d];
});
g.append("g")
.attr("transform", "translate(0," + h + ")")
.attr("class", "tick axis")
.attr("id", "x-axis")
.call(xAxis);
let yScale = d3
.scaleLinear()
.range([h, 0])
.domain([0, dataset[dataset.length - 1][0]]);
const yAxis = d3.axisLeft(yScale);
g.append("g")
.attr("transform", "translate(0, 0)")
.attr("class", "tick axis")
.attr("id", "y-axis")
.attr("fill", "red")
.call(yAxis);
g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("id", (d, i) => {
return "tipX" + i;
})
.attr("x", (d, i) => {
return xScale(i);
})
.attr("y", (d) => {
return yScale(d[0]);
})
.attr("height", (d) => {
return h - yScale(d[0]);
})
.attr("width", (d, i) => {
return w - xScale(i);
})
.attr("data-date", (d, i) => {
return d[1];
})
.attr("data-gdp", (d, i) => {
return d[0];
})
.attr("class", "bar")
.append("title")
.attr("data-date", (d, i) => {
return d[1];
})
.attr("id", "tooltip")
.text((item, i) => {
return (
item[1].substr(0, 4) + " " + item[2] + " \n$" + item[0] + " Billion"
);
});
//Draw the GDP Label:
svg
.append("text")
.attr("id", "title")
.attr("class", "headline")
.attr("x", w / 2)
.attr("y", m.top)
.attr("font-family", "sans-serif")
.attr("fill", "green")
.attr("text-anchor", "middle")
.text("United States GDP");
//Draw the GDP side Label:
svg
.append("text")
.attr("class", "headline1")
.attr("x", w / 3.6)
.attr("y", h / 2.4)
.attr("transform", "translate(-180,530) rotate(-90)")
.attr("font-family", "sans-serif")
.attr("fill", "green")
.attr("text-anchor", "middle")
.text("Gross Domestic Product");
},
error: (xhr, ajaxOptions, thrownError) => {
console.log(xhr, ajaxOptions, thrownError);
}
});
});
Here is my BarChart.