d3:Positioning bars and Y-axis

1

Working on the d3 bar chart challengehere. I wanted to create a top and bottom margin, but same size, so used 2x margin when accounting for it at the top. That doesn’t seem to have worked as my bars are still going off the top of the svg. Also, the Y-axis, whatever I try to do, still starts beneath the X-axis. (At least the X-axis and bars lined up.) Can anyone tel me what I am doing wrong regarding setting the margin/positioning/height for the Y axis and bars? Thanks!

JS:


d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json").then(function(data){    //console.log(data["data"]);
  const dataset = data["data"]; 
  console.log(dataset[0], dataset.length, "got data")
  
  let gdps = dataset.map(function(item) {
    return item[1];
  })
  
  let dates = dataset.map(function(item) {
    return item[0];
  })

   console.log("working")
  const barWidth = 2,
        barHeight = 1,
        svgWidth = barWidth * gdps.length,
        svgHeight = 500,
        margin = 50;
  //need a margin top b/c of title, or just 2x it?
  
   const gdpsScale = d3.scaleLinear()
                          .domain([d3.min(gdps), d3.max(gdps)])
                          .range([0, svgHeight]);
  
  const gdpsScaleInverted = d3.scaleLinear()
                          .domain([d3.min(gdps), d3.max(gdps)])
                          .range([svgHeight, 0]);
  
  const datesScale = d3.scaleLinear()
                          .domain([0, dates.length])
                          .range([0, svgWidth]);
  
   const svg = d3.select("body")
                  .append("svg")
                  .attr("width", svgWidth + margin)
                  .attr("height", svgHeight + (2*margin));
 
  const y_axis = d3.axisLeft()
                              .scale(gdpsScaleInverted);
  
  const x_axis = d3.axisBottom()
                              .scale(datesScale);
   
  svg.append("g")
      .attr("transform", "translate("+(margin)+","+(margin)+")")
      .call(y_axis)
      .attr("id", "y-axis");
  
   svg.append("g")
      .attr("transform", "translate("+(margin)+", "+(svgHeight - margin)+")")
      .call(x_axis)
      .attr("id", "x-axis");
  
    svg.selectAll("rect")
       .data(gdps)
       .enter()
       .append("rect")
       .attr("class", "bar")
       .attr("x", (d, i) => i * barWidth + margin)
       .attr("y", (d) => (svgHeight - gdpsScale(d)) - margin)
       .attr("width", barWidth)
       .attr("height", (d, i) => gdpsScale(d))
       .attr("fill", "navy")
       .attr("data-gdp", (d) => d);
  
  svg.selectAll ("rect")
      .data(dates)
      .attr("data-date", (d) => d);
  
  const tooltip = d3.selectAll("rect")
                        .append("div")
                        .style("position", "absolute")
                        .attr("id", "tooltip")
                        .data(dates)
                        .text((d) => d);
                      // .on("mouseover", function() {return tooltip.style("visibility", "visible");})
                  
  //need to do hover over, style, visibility, opacity? position?
  
 });;