Hello there, I need help getting the axes to show on my svg. Could someone please take a look and let me know what I’m doing wrong here? Thank you!
function DrawBar(dataset){
const margin = {
top: 50,
right: 20,
bottom: 25,
left: 50
}
const width = 800;
const height = 400;
let GDP = [];
let quartersByYear = [];
for (let i = 0; i < dataset.length; i++){
GDP.push(dataset[i][1]);
}
for (let i = 0; i < dataset.length; i++){
quartersByYear.push(dataset[i][0].substr(0,4));
}
const maxGDP = d3.max(GDP);
const minGDP = d3.min(GDP);
let maxYear = d3.max(quartersByYear);
let minYear = d3.min(quartersByYear);
maxYear = new Date(maxYear);
minYear = new Date(minYear);
const xScale = d3.scaleTime();
xScale.domain(minYear,maxYear);
xScale.range(0, width-margin.right);
const yScale = d3.scaleLinear();
yScale.domain([minGDP,maxGDP]);
yScale.range([height - margin.top,margin.bottom]);
const svg = d3.select('body')
.append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class','graph-svg-element')
svg.selectAll("rect")
.data(GDP)
.enter()
.append("rect")
.attr("x", (d,i) => {
return margin.left + i * (width/GDP.length)
})
.attr("y", (d, i) => {
return yScale(d)
})
.attr("width", (width/GDP.length))
.attr("height",(d)=>{
return height - yScale(d)
})
.attr('fill', 'navy')
.attr('class','bar')
.append('title')
.text((d)=>d+' billion')
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.append('g')
.attr('id','x-axis')
.attr("transform", "translate(50, " + (height - margin.top - margin.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr('id','y-axis')
.attr("transform", "translate(50, " + '50' + ")")
.call(yAxis);
}