цветные точки с градиентом на основе значения каждой точки

Question

Я делаю кучу точек, каждая точка имеет определенное значение (от 0 до 1), я хочу покрасить каждую точку на основе этого значения, например, 0 = серый, 1 = ярко-красный и все, что между ними, является смесьюэти цвета

я нашел эту скрипку, и это то, что я хочу, но я не могу узнать, как я могу реализовать ее в своем коде

https://codepen.io/SitePoint/pen/rLyKLG

мой код:

 drawExpression() {
    let data : number[] = [];
    const colorMap = d3.interpolateRgb(
      d3.rgb('#6c6d6b'),
      d3.rgb('#ff0034')
    );
    var svgContainer = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 1000);

    //draws dots
    for (let i = 0; i < this.cell[1].length; i++) {
      let x = this.cell[1][i].xCoordinate * 5 + 250;
      let y = this.cell[1][i].yCoordinate * 5 + 250;
      data.push(this.cell[1][i].expression);


      var circle = svgContainer.append("circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 2)
        .style("fill", (d)=> {
          return colorMap(d)
        })

    }
  }