title: d3js: Unable to place horizontally bars within the axis
body: <p>I'm learning to make charts in d3 from scratch without taking someone else code and modifying it. I can successfully create a x &amp; y axis vertical bar chart. But when it comes to transform the same chart to horizontal bar chart I end up in a mess. Here is my code so far:</p>
  
  <pre><code>var data = [{
    name: "China",
    value: 1330141295
  }, {
    name: "India",
    value: 1173108018
  }, {
    name: "Indonesia",
    value: 242968342
  }, {
    name: "Russia",
    value: 139390205
  }];
  //set margins
  var margin = {
    top: 30,
    right: 30,
    bottom: 30,
    left: 40
  };
  var width = 960 - margin.left - margin.right;
  var height = 600 - margin.top - margin.bottom;
  //set scales &amp; ranges
  var yScale = d3.scaleBand().range([0, height]).padding(0.1)
  var xScale = d3.scaleLinear().range([0, width])
  //draw the svg
  var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom).append("g")
    .attr("transform", "translate(" + margin.left * 2 + "," + margin.top + ")")
  //load the data
  data.forEach(function(d) {
    d.population = +d.population;
  });
  
  //set domains
  
  xScale.domain([0, d3.max(data, function(d) {
    return d.population
  })])
  
  yScale.domain(data.map(d =&gt; d.name))
  
  //add x &amp; y Axis
  
  svg.append("g")
    .attr("transform", "translate(" + 0 + "," + height + ")")
    .call(d3.axisBottom(xScale));
  
  svg.append("g")
    .call(d3.axisLeft(yScale))
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("y", d =&gt; yScale(d.name))
    .attr("height", d =&gt; yScale(d.name))
    .attr("x", d =&gt; width - xScale(d.population))
    .attr("width", yScale.bandwidth())
  </code></pre>
  
  <p>Thank you very much.</p>