Как сопоставить данные covid с динамической c логарифмической / экспоненциальной / линейной легендой / масштабом в angular с d3

Question

Следующая карта covid должна переключаться между линейной, логарифмической c и экспоненциальной шкалами для цвета заливки и отображать правильные значения в легенде при нажатии кнопок линейный, логарифмический c или экспоненциальный.

Код

• https://github.com/jcbowyer/d3-in-angular

Предварительный просмотр

• https://jcbowyer.github.io/d3-in-angular/

Для шкал используется следующий код

   // Linear Scale
    that.colorScaleLinear = d3.scaleSequential(d3.interpolateReds);

    // Exponential Scale
    that.expScale = d3
      .scalePow()
      .exponent(Math.E)
      .domain([that.start, that.end]);
    that.colorScaleExp = d3.scaleSequential(d =>
      d3.interpolateReds(that.expScale(d))
    );

    // Log Scale
    that.logScale = d3.scaleLog().domain([that.start, that.end]);
    that.colorScaleLog = d3.scaleSequential(d =>
      d3.interpolateReds(that.logScale(d))
    );

Функция заполнения выглядит следующим образом:

  .attr("fill", function (d) {
        var cases = d.cases;
        var cases = cases ? cases : 0;

        switch (that.scale) {
          case "Linear":
            return that.colorScaleLinear(that.scaleCases(cases));
          case "Exponential":
            return that.colorScaleExp(cases);
          case "Logarithmic":
            return that.colorScaleLog(cases);
        }
      })

Линейная заливка и работа легенды

Экспоненциальное заполнение и легенда не работают

Logarthmi c Заполнение и легенда не работают

Что мне следует изменить, чтобы исправить заливки и масштаб для логарифма c и экспоненциальных легенд?