Раскрась картограмму в d3.js

Я новичок в d3.js и javascript, и мне нужно создать двумерную картограмму. Мне удалось успешно создать карту, однако у меня возникли проблемы с ее раскрашиванием.

Я хочу добиться такого: https://observablehq.com/@awsherman/bivariate- картограмма

Пока что мне удалось сделать:

maparea.selectAll('path')
      .data(mapStatesUSA.features)
      .enter()
      .append('path')
      .attr('d', path)
      .attr('transform', 'scale(0.9) translate(60,0)')
      .attr('class', 'country');

      maparea.selectAll('path')
      .data(this.fulldata)
      .attr('fill', (d) => this.mapColor(this.fulldata.get(d.state)));
 
let color = {
      return [
      '#73ae80', '#5a9178', '#2a5a5b',
      '#b8d6be', '#90b2b3', '#567994',
      '#e8e8e8', '#b5c0da', '#6c83b5']
    },

let xColor = d3.scaleQuantile(Array.from(this.fulldata.valueBurglary, d => d[0], 3));
 
let yColor = d3.scaleQuantile(Array.from(this.fulldata.value, (d) => d[1], 3));

const mapColor = {
      return d => {
        if (!d) return 'N/A';
        let[a, b] = d;
        return this.color[this.yColor(b) * this.xColor(a) * 3];
      };
 

Я попытался воспроизвести код из ссылки выше. Однако, должен признать, я не очень хорошо понимаю, что происходит. Буду очень признателен, если кто-нибудь подскажет, как это сделать. Благодарю вас!