D3.js having problem with display of my legend for chart

JavaScript
1

Tell us what’s happening:
There is some problem with displaying the legend on the chart.

Your code so far

  //legend
    
  var array = [];
  for (var i=1; i<=11; i++){
    array.push(minTemp + diff*i);
    };
   
  var legendContainer = svg.append("svg")
                           .attr("class", "legend")
                           .attr("id", "legend")
                           .attr("width", 300)
                           .attr("height", 60)
                           .attr('transform', `translate(${padding.left}, ${height-padding.bottom+30})`) 
  
console.log(array, gradientt);
  
  const legendScale = d3.scaleLinear()
                      .domain(array)
                      .range(gradientt);
  
  const legendXaxis = d3.axisBottom(legendScale).tickFormat(d3.format("+.1f"))
      
  const axisLegend = legendContainer.append("g")
                       .call(legendXaxis)
                       .attr('transform', 'translate(0,20)')
                       
   const legendrect = legendContainer.selectAll("rect")
                      .data(gradientt)
                      .enter()
                      .append("rect")
                      .attr("width",20)
                      .attr("height",20)
                      .attr("x",(d,i) => i*20)
                      .attr("y", 0)
                      .style("fill", (d) => d)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36.

Challenge: Visualize Data with a Heat Map

Link to the challenge: