[Solved]-How can we load color from a sequential scale into a map in D3 v5?-d3.js

const w = 850;
const h = 700;

//Define map projection // geoEqualEarth
const projection = d3.geoMercator()
    .center([ 132, -28 ])
    .translate([ w/2, h/2 ])
    .scale(1000);


            //Define path generator
const path = d3.geoPath()
    .projection(projection);

    //Create SVG
const svg = d3.select("svg")
    .attr('width', w)
  .attr('height', h)

//Load in GeoJSON data
d3.json('https://gist.githubusercontent.com/GerardoFurtado/02aa65e5522104cb692e/raw/8108fbd4103a827e67444381ff594f7df8450411/aust.json')
    .then(json => onGeoJsonLoaded(json))
  .catch(err => console.log('GEO ERROR: ', err));
  
const onGeoJsonLoaded = json => {
//Bind data and create one path per GeoJSON feature
const states = svg.selectAll('g.state')
      .data(json.features)
        .enter()
        .append('g')
    .classed('state', true);
    
 states.append('path')
        .attr("d", path)
        .attr("stroke", 'white');
        //.attr("fill", (d, i) => color[i]);
                  
        //States
  states.append("text")
            .attr("fill", "white")
            .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
            .attr("text-anchor", "middle")
        .attr("dy", 15)
            .text(function(d) {
                        return d.properties.STATE_NAME;
            });

                //Append the name
   d3.json('https://api.jsonbin.io/b/60af2dc3d0f4985540524d62')
   .then(dataJson => onDataJsonLoaded(dataJson))
   .catch(err => console.log('DATA JSON ERR: ', err));
}

const   tooltipPath = (width, height, offset, radius) => {
    const left = -width / 2
    const right = width / 2
    const top = -offset - height
    const bottom = -offset
    return `M 0,0 
      L ${-offset},${bottom} 
      H ${left + radius}
      Q ${left},${bottom} ${left},${bottom - radius}  
      V ${top + radius}   
      Q ${left},${top} ${left + radius},${top}
      H ${right - radius}
      Q ${right},${top} ${right},${top + radius}
      V ${bottom - radius}
      Q ${right},${bottom} ${right - radius},${bottom}
      H ${offset} 
      L 0,0 z`
}

const onDataJsonLoaded = json => {
  const valueRange = json.reduce((r, s) => r ? 
    [Math.min(r[0], s.Total), Math.max([1], s.Total)] :
    [s.Total, s.Total], null);
  
  const color = d3.scaleLinear()
    .domain(valueRange)
    .range(["#FF0000", "#800000"]);
    
  const states = svg.selectAll('g.state');
    
  states.select('path')
    .style('fill', d => {
        const stateData = json.find(s => s.State === d.properties.STATE_NAME);
      return stateData ? color(stateData.Total) : 'white';
    })

const rows = Object.keys(json[0]).filter(n => n !== 'State');
  
  const tooltip = svg.append('g')
    .classed('tooltip', true)
    .style('visibility', 'hidden');
  tooltip.append('path')
    .attr('d', tooltipPath(150, 80, 5, 5))
  rows.forEach((row, index) => {
    tooltip.append('text')
        .text(`${row} :`)
      .attr('x', -70)
      .attr('y', -68 + index * 18);
    tooltip.append('text')
      .classed(row.replace(' ', '_'), true)
      .attr('x', 40)
      .attr('y', -68 + index * 18)
    }
  );
    
  states
    .on('mouseenter', d => {
      const stateData = json.find(s => s.State === d.properties.STATE_NAME);
      rows.forEach(row => tooltip.select(`.${row.replace(' ', '_')}`).text(stateData[row]));
      tooltip.attr('transform', `translate(${path.centroid(d)})`);
      tooltip.style('visibility', 'visible');
    })
    .on('mouseleave', () => tooltip.style('visibility', 'hidden'));
};

.tooltip > path {
  fill: white;
  stroke: black;
}

.tooltip > text {
  font-family: "Ubuntu";
  font-size: 12px;
  fill: black;
  stroke: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg/>