title: Incorrect axis domains in a D3 based bar graph
body: <p>I'm trying to do a simple bar graph with y-axis having the Band scale and x-axis having a linear scale. </p>
  
  <p>I'm facing the following issues -</p>
  
  <ol>
  <li>Unable to get the strings displayed along with the ticks on the
  Yaxis</li>
  <li>The domain of X axis is not in sync as per the data</li>
  <li>Not sure if the width of the rectangle is correct (might be getting inverted)</li>
  <li>Is it appropriate to use Band scale for the Y axis and not the Ordinal scale ?</li>
  </ol>
  
  <p>I would appretiate any help pointing to the error or missing part. Thanks!  </p>
  
  <p>I have attached the code along with a JsFiddle link at the bottom.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addBarGraph() {
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
      },
      width = 600 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
  
    var x = d3.scaleLinear()
      .rangeRound([0, width]);
  
    var y = d3.scaleBand()
      .rangeRound([height, 0]).padding(0.1);
  
    var xAxis = d3.axisBottom(x);
  
    var yAxis = d3.axisLeft(y);
  
    var svg = d3.select('#barGraph').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 + ")");
  
    var max = d3.max(data, function(datum) {
      return datum.distribution;
    });
  
    svg.append("g")
      .attr("class", "xAxis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
    svg.append("g")
      .attr("class", "yAxis")
      .call(yAxis);
  
    data.forEach(function(d) {
      d.distribution = +d.distribution;
    });
  
    y.domain(data.map(function(d) {
      return d.nv;
    }));
    x.domain([max, 0]);
  
    svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("y", function(d) {
        return y(d.nv);
      })
      .attr("width", function(d) {
        return width - x(d.distribution);
      })
      .attr("height", y.bandwidth());
  
  }
  
  function getData() {
    data = JSON.parse('[{"nv":"Channel1","distribution":60},{"nv":"channel2","distribution":30}]');
  }
  
  $(document).ready(function() {
    getData();
    addBarGraph();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bar {
    fill: steelblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span id="barGraph"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Link</strong>: <a href="https://jsfiddle.net/6esyv0os/" rel="nofollow noreferrer">https://jsfiddle.net/6esyv0os/</a></p>