title: D3js and scaleLinear function
body: <p>I am trying to visualize data with barchart using d3.js, here is my code in javascript:</p>
  <p>[</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>let height = 660;
  let width = "100%";
  let svgElment = d3.select('main')
                    .append('div')
  svgElment
      .append('text')
      .attr("x" , 250)
      .attr("y" , 50)          
      .attr('id' , "title")
      .text("Federal economic reserve");
                  svgElment.append('svg')
                    .attr("width" , width)
                    .attr("height" , height)
                    .attr("id" , "svg-content");
  
  fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
  .then(response =&gt; response.json())
  .then(data =&gt; {
    d3.select('svg')
      .selectAll('rect')
      .data(data.data)
      .enter()
      .append('rect')
      .attr('fill' , 'lightblue')
      .attr('width' , 1)
      .attr('height' , data =&gt; console.log(d3.scaleLinear().domain([0 , d3.max(data[1])]).range([0 , height])))
      .attr("x" , (data , index) =&gt; (index * 2))
      .attr("y" , (data , index) =&gt; height - data[1])}
       )
  .catch(err =&gt; console.log(err));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v7.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>]<a href="https://i.stack.imgur.com/TNFjX.png" rel="nofollow noreferrer">1</a></p>
  <p>however i don't undestand the scale function, when i try to run my code on chrome it say i have a TypeError (t is not iterable) like in this image</p>