D3js and scaleLinear function

Question

I am trying to visualize data with barchart using d3.js, here is my code in javascript:

[

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 => response.json())
.then(data => {
  d3.select('svg')
    .selectAll('rect')
    .data(data.data)
    .enter()
    .append('rect')
    .attr('fill' , 'lightblue')
    .attr('width' , 1)
    .attr('height' , data => console.log(d3.scaleLinear().domain([0 , d3.max(data[1])]).range([0 , height])))
    .attr("x" , (data , index) => (index * 2))
    .attr("y" , (data , index) => height - data[1])}
     )
.catch(err => console.log(err));

<script src="https://d3js.org/d3.v7.min.js"></script>

]1

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

Answer 1

//code by @kentinhogbonouto

let height = 520;
let width = 963;
let barWidth = 935;
let paddingTop = 25;
let paddingBottom = 25;
let paddingLeft = 25;
let paddingRight = 25;
let marginTop = 25;
let marginBottom = 25;
let marginLeft = 25;
let marginRight = 25;

let svgElment = d3.select('main').append('section');
svgElment
       .append('div')
       .append('h1')
       .attr('id' , "title")
       .text("United State GDP");
svgElment
       .append('div')
       .append('svg')
       .attr("width" , width)
       .attr("height" , height)
       .attr("id" , "svg-content");
let dataSet = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json';
fetch(dataSet)
.then(response => response.json())
.then(data => { 
    "use strict";
    let GDP = data.data.map(data => data[1]);
    console.log(GDP)
    let gdpLenght = GDP.lenght;
    let dataMax = d3.max(GDP);
    let xScale = d3.scaleLinear().domain([0 , (GDP.lenght)]).range([0 , barWidth]);
    let yScale = d3.scaleLinear().domain([0 , dataMax]).range([0 , (height-paddingBottom)]);
    let xAxisValue = d3.scaleLinear().domain([0 , dataMax]).range([0 , barWidth]);
  console.log(xAxisValue)
    const xAxis = d3.axisBottom(xAxisValue);
    const yAxis = d3.axisLeft(yScale);
      d3.select('svg')
        .append('g')
        .selectAll('rect')
        .data(data.data)
        .enter()
        .append('rect')
        .attr("class" , "bar")
        .attr('fill' , '#ffcc10')
        .attr('width' , 2.5)
        .attr('height' , data => yScale(data[1]))
        .attr("x" , (data , index) => index * (960/275))
        .attr("y" , (data , index) => ((height - paddingBottom) - yScale(data[1])));
      d3.select('svg')
        .append('g')
        .attr('id' , 'x-axis')
        .attr("transform" , `translate(25 , ${height - paddingBottom})`)
        .call(xAxis);
      d3.select('svg')
        .append('g')
        .attr('id' , 'y-axis')
        .attr("transform" , `translate(${paddingBottom} , 0)`)
        .call(yAxis)
      d3.select('svg')
        .append('g')
        .append('text')
        .attr('id' , "title-tl")
        .attr('x' , -350)
        .attr('y' , 40)
        .attr("transform" , "rotate(-90)")
        .text("Grosse domestique product");
  }
)
.catch(err => console.log(err));

#container{
  display : flex;
  justify-content : center;
  align-items : center
}
#svg-content{
  background : #fff;
}
#title{
  text-align : center;
  font-size : 32px;
  margin-bottom : 0px;
}
.data-container--32654{
  background-color : #f1f1f1
}
.bar:hover{
  background-color : blue
}

<script src="https://d3js.org/d3.v7.min.js"></script>
<main id="container"></main>