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

}});
      }
    },
    zoomY: {  // Which lines to show (null = min/max) [0 indexed]
      default: [null, null],
      onChange(zoomY, state) {
        if (state.svg)
          state.svg.dispatch('zoom', { detail: {
            zoomX: null,
            zoomY: zoomY,
            redraw: false
          }});
      }
    },
    minSegmentDuration: {},
    zColorScale: { default: d3ScaleSequential(interpolateRdYlBu) },
    zQualitative: { default: false, onChange(discrete, state) {
      state.zColorScale = discrete
        ? d3ScaleOrdinal([...schemeCategory10, ...schemeSet3])
        : d3ScaleSequential(interpolateRdYlBu); // alt: d3.interpolateInferno
    }},
    zDataLabel: { default: '', triggerUpdate: false }, // Units of z data. Used in the tooltip descriptions
    zScaleLabel: { default: '', triggerUpdate: false }, // Units of colorScale. Used in the legend label
    enableOverview: { default: true }, // True/False
    enableAnimations: {
      default: true,
      onChange(val, state) {
        state.transDuration = val?700:0;
      }
    },

    // Callbacks

// wrap d3 color scales so they produce vec3s with values 0-1
  // also limit the t value to remove darkest color
  const wrapColorScale = scale => t => {
    const tScale = scaleLinear()
      .domain([0, 1])
      .range([0.4, 1]);
    const _rgb = rgb(scale(tScale(t)));
    return [_rgb.r / 255, _rgb.g / 255, _rgb.b / 255];
  };

  const colorScales = [
    scaleSequential(interpolateViridis),
    scaleSequential(interpolateMagma),
    scaleSequential(interpolateInferno),
    scaleSequential(interpolateCool),
  ].map(wrapColorScale);
  let currentColorScale = 0;

  // function to compile a draw points regl func
  const createDrawPoints = points =>
    regl({
      frag:
        '\n\t\t  precision highp float;\n\t\t\tvarying vec3 fragColor;\n\t\t\tvoid main() {\n\t\t\t\tgl_FragColor = vec4(fragColor, 1);\n\t\t\t}\n\t\t\t',

      vert:
        '\n\t\t\tattribute vec2 positionStart;\n\t\t\tattribute vec2 positionEnd;\n\t\t\tattribute float index;\n\t\t\tattribute vec3 colorStart;\n\t\t\tattribute vec3 colorEnd;\n\n\t\t\tvarying vec3 fragColor;\n\n\t\t\tuniform float pointWidth;\n\t\t\tuniform float stageWidth;\n\t\t\tuniform float stageHeight;\n\t\t\tuniform float elapsed;\n\t\t\tuniform float duration;\n\t\t\tuniform float delayByIndex;\n\t\t\t// uniform float tick;\n\t\t\t// uniform float animationRadius;\n\t\t\tuniform float numPoints;\n\n\t\t\t// helper function to transform from pixel space to normalized device coordinates (NDC)\n\t\t\t// in NDC (0,0) is the middle, (-1, 1) is the top left and (1, -1) is the bottom right.\n\t\t\tvec2 normalizeCoords(vec2 position) {\n\t\t\t\t// read in the positions into x and y vars\n\t      float x = position[0];\n\t      float y = position[1];\n\n\t\t\t\treturn vec2(\n\t\t      2.0 * ((x / stageWidth) - 0.5),\n\t\t      // invert y since we think [0,0] is bottom left in pixel space\n\t\t      -(2.0 * ((y / stageHeight) - 0.5)));\n\t\t\t}\n\n\t\t\t// helper function to handle cubic easing (copied from d3 for consistency)\n\t\t\t// note there are pre-made easing functions available via glslify.\n\t\t\tfloat easeCubicInOut(float t) {\n\t\t\t\tt *= 2.0;\n        t = (t <= 1.0 ? t * t * t : (t -= 2.0) * t * t + 2.0) / 2.0;\n\n        if (t > 1.0) {\n          t = 1.0;\n        }\n\n        return t;\n\t\t\t}\n\n\t\t\tvoid main() {\n\t\t\t\tgl_PointSize = pointWidth;\n\n\t\t\t\tfloat delay = delayByIndex * index;\n\t      float t;\n\n\t      // drawing without animation, so show end state immediately\n\t      if (duration == 0.0) {\n\t        t = 1.0;\n\n\t      // still delaying before animating\n\t      } else if (elapsed < delay) {\n\t        t = 0.0;\n\t      } else {\n\t        t = easeCubicInOut((elapsed - delay) / duration);\n\t      }\n\n\t      // interpolate position\n\t      vec2 position = mix(positionStart, positionEnd, t);\n\n\t      // apply an ambient animation\n\t\t\t\t// float dir = index > numPoints / 2.0 ? 1.0 : -1.0;\n\t      // position[0] += animationRadius * cos((tick + index) * dir);\n\t      // position[1] += animationRadius * sin((tick + index) * dir);\n\n\t      // above we + index to offset how they move\n\t      // we multiply by dir to change CW vs CCW for half\n\n\n\t      // interpolate color\n\t      fragColor = mix(colorStart, colorEnd, t);\n\n\t      // scale to normalized device coordinates\n\t\t\t\t// gl_Position is a special variable that holds the position of a vertex\n\t      gl_Position = vec4(normalizeCoords(position), 0.0, 1.0);\n\t\t\t}\n\t\t\t',

      attributes: {
        positionStart: points.map(d => [d.sx, d.sy]),
        positionEnd: points.map(d => [d.tx, d.ty]),
        colorStart: points.map(d => d.colorStart),

height: (function() {
    const domain = [0, 1.6] // [0 - 1800 feet]
    const scale = scaleSequential(interpolateCool).domain(domain)
    return (val) => {
      const color = rgb(scale(val))
      return [color.r, color.g, color.b].map(v => v / 255)
    }
  })(),
  built: (function() {

built: (function() {
    const domain = [1840, 2019]
    const scale = scaleSequential(interpolateMagma).domain(domain)
    return (val) => {
      if (val < 1800) return [0, 0, 0]
      const color = rgb(scale(val))
      return [color.r, color.g, color.b].map(v => v / 255)
    }
  })()
}

const fieldsRef = useRef<{
    [id: string]: { ref: HTMLDivElement; groupId: string };
  }>({});
  const addFieldRef = (
    ref: HTMLDivElement,
    fieldId: FieldId,
    groupId: string
  ) => {
    fieldsRef.current[fieldId] = { ref, groupId };
  };
  const fieldsGroupRef = useRef<{ [id: string]: HTMLElement }>({});
  const addFieldsGroupRef = (ref: HTMLElement, id: string) => {
    fieldsGroupRef.current[id] = ref;
  };

  const colors = scaleSequential(interpolateRainbow).domain([
    0,
    mappings.length,
  ]);

  const calcLines = useCallback(() => {
    if (sourcesContainerRect && targetsContainerRect) {
      const isSourceOnTheLeft = sourcesContainerRect.left < targetsContainerRect.right;

      const makeCoords = (
        connectOnRight: boolean,
        isVisible: boolean,
        boxRect: ClientRect | DOMRect,
        elRect: ClientRect | DOMRect,
        parentRect: ClientRect | DOMRect
      ) => ({
        x: (connectOnRight ? boxRect.right : boxRect.left) - offsetLeft,

/**
 * Copyright (c) 2019 Paul Armstrong
 */
import React from 'react';
import { interpolateMagma, interpolateRainbow, interpolateRdYlGn } from 'd3-scale-chromatic';
import { scaleSequential, ScaleSequential } from 'd3-scale';

interface Scales {
  [key: string]: ScaleSequential;
}

export const scales: Scales = {
  Rainbow: scaleSequential(interpolateRainbow),
  'Red to green': scaleSequential(interpolateRdYlGn),
  Magma: scaleSequential(interpolateMagma)
};

const context = React.createContext>(scales.Rainbow);

export default context;

/**
 * Copyright (c) 2019 Paul Armstrong
 */
import { interpolateCool, interpolateMagma, interpolateRainbow, interpolateRdYlBu } from 'd3-scale-chromatic';
import { scaleSequential, ScaleSequential } from 'd3-scale';

interface Scales {
  [key: string]: ScaleSequential;
}

const scales: Scales = Object.freeze({
  Standard: scaleSequential(interpolateRdYlBu),
  Cool: scaleSequential(interpolateCool),
  Magma: scaleSequential(interpolateMagma),
  Rainbow: scaleSequential(interpolateRainbow)
});

export default scales;

componentDidMount() {
    const svgLegend = this.legend
    const parentWidth = this.container.parentNode.clientWidth

    const svg = d3Selection
      .select(svgLegend)
      .attr('width', parentWidth)
      .attr('height', BAR_HEIGHT)
      .append('g')

    const colorScale = d3Scale
      .scaleSequential(d3Scale.interpolateInferno)
      .domain([0, parentWidth])

    const bars = svg
      .selectAll('.bars')
      .data(d3Array.range(parentWidth), function(d) {
        return d
      })
      .enter()
      .append('rect')
      .attr('class', 'bars')
      .attr('x', function(d, i) {
        return i
      })
      .attr('y', 0)
      .attr('height', BAR_HEIGHT)

/**
 * Copyright (c) 2019 Paul Armstrong
 */
import React from 'react';
import { interpolateMagma, interpolateRainbow, interpolateRdYlGn } from 'd3-scale-chromatic';
import { scaleSequential, ScaleSequential } from 'd3-scale';

interface Scales {
  [key: string]: ScaleSequential;
}

export const scales: Scales = {
  Rainbow: scaleSequential(interpolateRainbow),
  'Red to green': scaleSequential(interpolateRdYlGn),
  Magma: scaleSequential(interpolateMagma)
};

const context = React.createContext>(scales.Rainbow);

export default context;

/**
 * Copyright (c) 2019 Paul Armstrong
 */
import { interpolateCool, interpolateMagma, interpolateRainbow, interpolateRdYlBu } from 'd3-scale-chromatic';
import { scaleSequential, ScaleSequential } from 'd3-scale';

interface Scales {
  [key: string]: ScaleSequential;
}

const scales: Scales = Object.freeze({
  Standard: scaleSequential(interpolateRdYlBu),
  Cool: scaleSequential(interpolateCool),
  Magma: scaleSequential(interpolateMagma),
  Rainbow: scaleSequential(interpolateRainbow)
});

export default scales;