title: D3 .bandwidth() returning NaN
body: <p>I am new to d3. I have been trying to solve this for some time, but I couldn't find any similar issues here.</p>
  
  <p>I am trying to create a grouped bar chart (something like <a href="https://bl.ocks.org/mbostock/3887051" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/3887051</a>). </p>
  
  <p>This is a section of my current code:</p>
  
  <pre><code>    var width = "100%";
      var height = "96vh";
  
  
      var canvas = d3.select("body")
                     .append('svg')
                     .attr('width',width)
                     .attr('height', height)
                     .style("border", "2px solid black");
     var y0   = d3.scaleBand()
                  .paddingInner(0.1)
                  .range([0, height]);    
  
      var y1 = d3.scaleBand()
                 .padding(0.05);  
  
      var x = d3.scaleLinear()    
                .rangeRound([0, width]);
  
      var z = d3.scaleOrdinal()
              .range(["blue","green"])
  
      d3.csv("data.csv", data =&gt;{
          console.log(data);
  
          //inner columns domain
          var keys = d3.keys(data[0]).slice(1,4); 
  
          x.domain(d3.extent(data, d=&gt;d['Open rate']));
          y0.domain(data.map(d =&gt; d.Industry));
          y1.domain(keys).rangeRound([0,y0.bandwidth()]); 
  
          console.log(y0.bandwidth());
  });
  </code></pre>
  
  <p>However, the last line <code>console.log(y0.bandwidth())</code> returns <code>NaN</code>.
  I haven't been able to figure out why.</p>
  
  <p>I had used a similar <code>scaleOrdinal</code> earlier, and didn't face this issue.</p>