Visualize Data with a Bar Chart--Help chart is upside down

JavaScript
1

This is still very much a work in progress, but can anyone help me figure out why my chart is upside down? Here’s my code so far.

var url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json';

var dataset;

var margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select('body').append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.json(url).then(function(data) { 
  dataset = data.data;
  
  //create y scale 
  var yMax = d3.max(dataset, function(d) { return d[1]});
  var yMin = d3.min(dataset, function(d) { return d[1]});
  var yScale = d3.scaleLinear()
    .domain([yMin, yMax])
    .range([height, 0]);
 
  var yAxis = d3.axisLeft(yScale);
  svg.append('g')
  .call(yAxis)
  
  var bars = svg.selectAll('g')
  .data(dataset)
  .enter().append('g');
  
  bars.append('rect')
  .attr('x', function(d, i) { return i * (width/dataset.length)})
  .attr('y', 0)
  .attr('width', width/dataset.length)
  .attr('height', function(d) { return height-yScale(d[1]) })
  

})

Thanks for all of your help!

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

2

When people say the bar chart is upside down they’re usually talking about the bars starting at the top and going down. Here’s the lesson that addresses this:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/invert-svg-elements

3

Ahhh got it. Had to change the y attribute.

Thanks for your help!