D3 Bar Chart Visualization - help with axes (solved)

1

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

}
2

Here’s the solution for fixing the Y-Axis, hint: think more about the y value and height value and how they relate to the height and padding.

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)  + margin.top
  })
      .attr("width", (width/GDP.length))
      .attr("height",(d)=>{
    return height - margin.top - yScale(d)
  })
      .attr('fill', 'navy')
      .attr('class','bar')
      .append('title')
      .text((d)=>d+' billion')
3

Likewise, for fixing the x-axis, I recommend looking at the scale and the implementation of the x and width values


svg.selectAll("rect")
      .data(GDP)
      .enter()
      .append("rect")
      .attr("x", (d,i) => {
    return margin.left + i * ((width-margin.right)/GDP.length)
  })
      .attr("y", (d, i) => {
  return yScale(d) + margin.top
  })
      .attr("width", ((width-margin.right)/GDP.length) )
      .attr("height",(d)=>{
    return height - margin.top - yScale(d)
  })
      .attr('fill', 'navy')
      .attr('class','bar')
      .append('title')
      .text((d)=>d+' billion')