D3: Positioning Axes and Bars

Working on the bar chart here.

So many axis issues. Y axis starts to low, doesn’t have ticks, Y and X axis info appears to be switched (i.e., I want X axis for years, but it seems to reflect GDP, based on the ticks). And of course they don’t line up with the rects. I’ve read through a few off-site tutorials, and looked at the questions in the forums here, but code that I think is the same is obviously not functioning correctly. Any help appreciated.


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

  const barWidth = 2,
        barHeight = 1,
        svgWidth = barWidth * gdps.length,
        svgHeight = 500,
        margin = 50;
    const scale = d3.scaleLinear()
                          .domain([d3.min(gdps), d3.max(gdps)])
                          .range([0, svgHeight]);
   const svg = d3.select("body")
                  .attr("width", svgWidth + margin)
                  .attr("height", svgHeight + margin);
  const y_axis = d3.axisLeft()
  const x_axis = d3.axisBottom()
      .attr("transform", "translation("+ margin + ", 0)")
      .attr("id", "y-axis");
      .attr("transform", "translate(0, " + (svgHeight - margin) +")")
      .attr("id", "x-axis");
      .attr("class", "bar")
       .attr("x", (d, i) => i * barWidth + margin)
       .attr("y", (d, i) => svgHeight - scale(d) - margin)
       .attr("width", barWidth)
       .attr("height", (d, i) => scale(d))
       .attr("fill", "navy")
      .attr("data-gdp", (d) => d);
type or paste code here

That actually what the challenge is about :wink:

Try to fix typo at line 37

Single least helpful response I have ever received, even beats the worst StackOverflow response I received. At least quote the line if they’re not numbered. Maybe give an issue or a link to a resource?