title: D3 - Map array to bar chart
body: <p>I'm new to D3 and try to implement a simple bar chart with this example:
  <a href="https://bl.ocks.org/caravinden/d04238c4c9770020ff6867ee92c7dac1" rel="nofollow noreferrer">https://bl.ocks.org/caravinden/d04238c4c9770020ff6867ee92c7dac1</a></p>
  <p>Different to the original I tried to took an array list as data source. Using my code below gives me these console errors:</p>
  <blockquote>
  <p>Error:  attribute y: Expected length, &quot;NaN&quot;.</p>
  <p>Error:  attribute height: Expected length, &quot;NaN&quot;.</p>
  </blockquote>
  <p>The chart itself is displayed without data.
  I know the errors occur when setting y and height in the last few code lines. If I replace y(d.CasesTotal) with numbers it works fine (but makes obviously no sense at all).
  Ideas anyone?</p>
  <pre><code>var svg = d3.select(&quot;#barChart&quot;),
      margin = {
          top: 20,
          right: 20,
          bottom: 30,
          left: 50
      },
      width = +svg.attr(&quot;width&quot;) - margin.left - margin.right,
      height = +svg.attr(&quot;height&quot;) - margin.top - margin.bottom,
      g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  
  var x = d3.scaleBand()
      .rangeRound([0, width])
      .padding(0.1);
  var y = d3.scaleLinear()
      .rangeRound([height, 0]);
  console.log(y);
  let fakeTimeline = [
      {StatDay: &quot;a&quot;, CasesTotal: 500},
      {StatDay: &quot;b&quot;, CasesTotal: 800}];
      //countryList[0].getFakeTimeLine();
  
  x.domain(fakeTimeline.map(function(d) {return d.StatDay;}));
  y.domain(0, d3.max(fakeTimeline, function(d) { console.log(d.CasesTotal);return Number(d.CasesTotal);}));
  g.append(&quot;g&quot;)
      .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
      .call(d3.axisBottom(x))
  
  g.append(&quot;g&quot;)
      .call(d3.axisLeft(y))
      .append(&quot;text&quot;)
      .attr(&quot;fill&quot;, &quot;#000&quot;)
      .attr(&quot;transform&quot;, &quot;rotate(-90)&quot;)
      .attr(&quot;y&quot;, 6)
      .attr(&quot;dy&quot;, &quot;0.71em&quot;)
      .attr(&quot;text-anchor&quot;, &quot;end&quot;)
      .text(&quot;Fälle&quot;);
  
  g.selectAll(&quot;.bar&quot;)
      .data(fakeTimeline)
      .enter().append(&quot;rect&quot;)
      .attr(&quot;class&quot;, &quot;bar&quot;)
      .attr(&quot;x&quot;, function (d) {
          return x(d.StatDay);
      })
      .attr(&quot;width&quot;, x.bandwidth())
      .attr(&quot;y&quot;, function (d) {
          return y(d.CasesTotal);
      })
      .attr(&quot;height&quot;, function (d) {
          return height - y(d.CasesTotal);
      });
  </code></pre>