How to use the d3-scale.scaleThreshold function in d3-scale

// copy(...) -----------------------------------------------------------------

let copiedQuantileScale: d3Scale.ScaleQuantile = quantileScaleNumber.copy();


// -------------------------------------------------------------------------------
// Threshold Scale Factory
// -------------------------------------------------------------------------------

// scaleThreshold() -----------------------------------------------------------------

let thresholdScaleNumberNumber: d3Scale.ScaleThreshold;
let thresholdScaleNumberString: d3Scale.ScaleThreshold;

thresholdScaleNumberNumber = d3Scale.scaleThreshold();
thresholdScaleNumberString = d3Scale.scaleThreshold();


// ScaleThreshold Interface ========================================================

// domain(...) -----------------------------------------------------------------

thresholdScaleNumberNumber = thresholdScaleNumberNumber.domain([0.5]);
domainNumbers = thresholdScaleNumberNumber.domain();

thresholdScaleNumberString = thresholdScaleNumberString.domain([0.2, 0.8]);

// range(...) -----------------------------------------------------------------

thresholdScaleNumberNumber = thresholdScaleNumberNumber.range([100, 200]);
rangeNumbers = thresholdScaleNumberNumber.range();

let maskPoint;
  if (breakPoints !== null) {
    // bucket colors into discrete colors
    const n = breakPoints.length - 1;
    const bucketedColors = n > 1
      ? colorScheme.getColors(n)
      : [colorScheme.colors[colorScheme.colors.length - 1]];

    // repeat ends
    const first = bucketedColors[0];
    const last = bucketedColors[bucketedColors.length - 1];
    bucketedColors.unshift(first);
    bucketedColors.push(last);

    const points = breakPoints.map(p => parseFloat(p));
    scaler = scaleThreshold().domain(points).range(bucketedColors);
    maskPoint = value => value > breakPoints[n] || value < breakPoints[0];
  } else {
    // interpolate colors linearly
    scaler = colorScheme.createLinearScale(extent(features, accessor));
    maskPoint = () => false;
  }

  return (d) => {
    const v = accessor(d);
    const c = hexToRGB(scaler(v));
    if (maskPoint(v)) {
      c[3] = 0;
    } else {
      c[3] = (opacity / 100.0) * 255;
    }
    return c;

'rgba(  0, 137, 248, 0.8333)', // dark blue
  'rgba(  9, 145, 255, 0.8333)',
  'rgba(  9, 145, 255, 0.6667)',
  'rgba(  9, 145, 255, 0.5)', // half blue
  'rgba( 90, 174, 230, 0.5)',
  'rgba(171, 204, 205, 0.5)',
  'rgba(252, 234, 180, 0.5)', // yellow
  'rgba(168, 222, 124, 0.5)',
  'rgba( 84, 210,  68, 0.5)',
  'rgba(  0, 199, 13, 0.5)', // half green
  'rgba(  0, 199, 13, 0.6667)',
  'rgba(  0, 199, 13, 0.8333)',
  'rgba(  0, 173, 11, 0.8333)', // green
];

export const SETTINGS_COMPARISON = scaleThreshold()
  .domain(DIFFERENCE_DOMAIN)
  .range(SETTINGS_COMPARISON_COLORS);

import { XYFrame } from "../../components"

import DocumentComponent from "../layout/DocumentComponent"
import { randomNormal } from "d3-random"
import { scaleThreshold } from "d3-scale"
import { hexbinning, heatmapping } from "../../components/svg/areaDrawing"

// eslint-disable-next-line

const components = []
const pointTestData = []
const nRando = randomNormal(0, 1000)
const pRando = randomNormal(0, 1000)

const steps = ["none", "#FBEEEC", "#f3c8c2", "#e39787", "#ce6751", "#b3331d"]
const thresholds = scaleThreshold()
  .domain([0.01, 0.25, 0.5, 0.75, 1])
  .range(steps)

for (let x = 1; x < 100; x++) {
  pointTestData.push({
    x: nRando() * 2 - 3000,
    y: 2000 + nRando(),
    color: "#00a2ce"
  })
}
for (let x = 1; x < 100; x++) {
  pointTestData.push({
    x: 1000 + pRando(),
    y: 1000 + pRando() * 2,
    color: "#4d430c"
  })

import React, {Component} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {GeoJsonLayer, PolygonLayer} from '@deck.gl/layers';
import {LightingEffect, AmbientLight, _SunLight as SunLight} from '@deck.gl/core';
import {scaleThreshold} from 'd3-scale';

// Set your mapbox token here
const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

// Source data GeoJSON
const DATA_URL =
  'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json'; // eslint-disable-line

export const COLOR_SCALE = scaleThreshold()
  .domain([-0.6, -0.45, -0.3, -0.15, 0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1.05, 1.2])
  .range([
    [65, 182, 196],
    [127, 205, 187],
    [199, 233, 180],
    [237, 248, 177],
    // zero
    [255, 255, 204],
    [255, 237, 160],
    [254, 217, 118],
    [254, 178, 76],
    [253, 141, 60],
    [252, 78, 42],
    [227, 26, 28],
    [189, 0, 38],
    [128, 0, 38]

// Set your mapbox token here
const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

// Source data GeoJSON
const DATA_URL = {
  ACCIDENTS:
    'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/highway/accidents.csv',
  ROADS:
    'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/highway/roads.json'
};

function getKey({state, type, id}) {
  return `${state}-${type}-${id}`;
}

export const COLOR_SCALE = scaleThreshold()
  .domain([0, 4, 8, 12, 20, 32, 52, 84, 136, 220])
  .range([
    [26, 152, 80],
    [102, 189, 99],
    [166, 217, 106],
    [217, 239, 139],
    [255, 255, 191],
    [254, 224, 139],
    [253, 174, 97],
    [244, 109, 67],
    [215, 48, 39],
    [168, 0, 0]
  ]);

const WIDTH_SCALE = scaleLinear()
  .clamp(true)

case ScaleType.POW:
      return scalePow<output>();
    case ScaleType.SQRT:
      return scaleSqrt<output>();
    case ScaleType.SYMLOG:
      return undefined;
    case ScaleType.TIME:
      return scaleTime<output>();
    case ScaleType.UTC:
      return scaleUtc<output>();
    case ScaleType.QUANTILE:
      return scaleQuantile<output>();
    case ScaleType.QUANTIZE:
      return scaleQuantize<output>();
    case ScaleType.THRESHOLD:
      return scaleThreshold();
    case ScaleType.BIN_ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.POINT:
      return scalePoint&lt;{ toString(): string }&gt;();
    case ScaleType.BAND:
      return scaleBand&lt;{ toString(): string }&gt;();
    default:
      return undefined;
  }
}
</output></output></output></output></output></output>

render() {
    const { correlationResult, scatterplotData, preview } = this.props;

    const backgroundColorScale = d3Scale.scaleLinear().domain([-1, 0, 1]).range(['red', 'white', 'green']);
    const fontColorScale = d3Scale.scaleThreshold().domain([-1, 0, 1]).range(['white', 'black', 'white']);

    var additionalOptions = {
      pointSize: 2,
      chartArea: {
        width: '100%',
        height: '100%'
      },
      hAxis: {
        title: ''
      },
      vAxis: {
        title: ''
      }
    };

    const renderDataColumn = function(property, customStyles={}) {