# D3: Positioning Axes and Bars

**URL:** <https://forum.freecodecamp.org/t/d3-positioning-axes-and-bars/402286>\
**Category:** General\
**Created:** [June 11, 2020, 10:07pm UTC](https://forum.freecodecamp.org/t/d3-positioning-axes-and-bars/402286 "2020-06-11T22:07:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![themagicbean](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/themagicbean/32/120061_2.png) [@themagicbean](https://forum.freecodecamp.org/u/themagicbean)\
**Post date:** [June 11, 2020, 10:07pm UTC](https://forum.freecodecamp.org/t/d3-positioning-axes-and-bars/402286/1 "2020-06-11T22:07:07Z")

</div>

Working on the bar chart [here.](https://codepen.io/themagicbean/pen/KKVKEdd)

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.

Code:

```auto
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")
                  .append("svg")
                  .attr("width", svgWidth + margin)
                  .attr("height", svgHeight + margin);
 
  const y_axis = d3.axisLeft()
                              .scale(scale);
  
  const x_axis = d3.axisBottom()
                              .scale(scale);
   
  svg.append("g")
      .attr("transform", "translation("+ margin + ", 0)")
      .call(y_axis)
      .attr("id", "y-axis");
  
   svg.append("g")
      .attr("transform", "translate(0, " + (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, 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

```

---

<div class="post-metadata">

**Author:** ![Annestezia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/annestezia/32/74275_2.png) [@Annestezia](https://forum.freecodecamp.org/u/Annestezia)\
**Post date:** [June 12, 2020, 12:10pm UTC](https://forum.freecodecamp.org/t/d3-positioning-axes-and-bars/402286/2 "2020-06-12T12:10:12Z")

</div>

Hey,  
That actually what the challenge is about 😉

Try to fix typo at line 37  
🖖

---

<div class="post-metadata">

**Author:** ![themagicbean](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/themagicbean/32/120061_2.png) [@themagicbean](https://forum.freecodecamp.org/u/themagicbean)\
**Post date:** [June 12, 2020, 10:09pm UTC](https://forum.freecodecamp.org/t/d3-positioning-axes-and-bars/402286/3 "2020-06-12T22:09:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:50pm UTC](https://forum.freecodecamp.org/t/d3-positioning-axes-and-bars/402286/4 "2021-06-01T18:50:02Z")

</div>