(SOLVED) D3 Data drawing to bottom of SVG

JavaScript
1

Working on first D3 project and my bars are drawing to the bottom of the SVG no matter where I put them (have tested by translating them upward). As a result they clip through the bottom of the scale to the bottom of the container.

Here is the code (ignore the X scaling, was just to get data showing for now):

const W = 800;
const H = 400;
const padding = 40;
const svg = d3.select("body").append("svg").attr("width", W).attr("height", H);

d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json").then(function(data){
   let GDP = data.data.map(function (item) {
     return item[1];
   });
  
   let year = data.data.map(function(item) {
     return item[0].substring(0,4);
   });
  
  const barWidth = W/year.length;
  const xScale = d3.scaleLinear().domain([0, year.length]).range([padding, W - padding]);
  const yScale = d3.scaleLinear().domain([0, d3.max(GDP)]).range([H - padding, padding]);
  const xAxis = d3.axisBottom(xScale);
  const yAxis = d3.axisLeft(yScale);
  
   svg.selectAll("rect").data(GDP).enter().append("rect").attr("x", (d, i) => xScale([i])).attr("y", (d) => yScale(d)).attr("width", barWidth).attr("height",(d) => d);
   svg.append("g").attr("transform","translate(0, " + (H - padding) + ")").call(xAxis);
   svg.append("g").attr("transform", "translate(" + (padding) + ",0)").call(yAxis);

});
2

I wasn’t scaling my height so even though they were positioned correctly it was falling off the bottom of the screen.

Thanks!

1 Like