How to use the chroma-js.scale function in chroma-js

chroma.scale('OrRd').classes(5);
    chroma.scale('OrRd').classes(8);

    myChroma.cubehelix()
        .start(200)
        .rotations(-0.35)
        .gamma(0.7)
        .lightness([0.3, 0.8])
        .scale() // convert to chroma.scale

        .correctLightness()
        .colors(5);

    myChroma.scale('RdYlBu');
    myChroma.scale('RdYlBu').padding(0.15);
}

var recalculateColors = function (options) {
    var ActiveFilterColor = app.filters.getId( options.InfoBarModel.filter );
    var records = ActiveFilterColor.top(Infinity);
    var scale = chroma.scale(["#022A08", "#35FE57"]); // ['lightyellow', 'navy']); http://tristen.ca/hcl-picker/#/hlc/5/1.82/022A08/35FE57
    var idToColor = {}; // keys -> model.id, values -> rgba value

    var min = Infinity;
    var max = -Infinity;

    // Find range [min, max]
    for(var r=0; r < records.length; r++) {

        var value = parseFloat( records[r][ options.InfoBarModel.filter.toLowerCase() ] );
        if ( typeof value != "undefined" ) {
            if ( value > -9999999 ) { // FIXME document missing data values
                if (value < min ) {
                    min = value;
                }
                if (value > max ) {
                    max = value;

constructor(props) {
    super(props);
    this.state = {
      texture: props.texture,
      height: props.height,
      width: props.width,
      markers: [],
      lights: [],
      selectedMarker: null
    };

    this.raycaster = new Raycaster(); // create once
    this.mouse = new Vector2();

    this.redGreenScale = chroma.scale(['red', 'lightgreen']).domain([-10, 10]);

    // Bindings
    this.onMouseDown = this.onMouseDown.bind(this);
    this.onMouseUp = this.onMouseUp.bind(this);
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onResize = debounce(this.onResize.bind(this), 250);
  }

this.vizState.initialMinPrice = props.minPrice;
    this.vizState.initialMaxPrice = props.maxPrice;
    this.vizState.maxVisibleBandVolume = getMaxVisibleBandVolume(
      this.vizState,
      props.initialBook,
      props.minPrice,
      props.maxPrice,
      this.vizState.priceGranularity,
      this.vizState.pricePrecision
    );
    this.vizState.latestMaxVolumeChange = this.vizState.maxVisibleBandVolume;
    this.vizState.askTradeLineExtended = false;
    this.vizState.bidTradeLineExtended = false;

    // calculate color scheme and set up chroma.js color scale function
    this.vizState.scaleColor = chroma
      .scale(this.vizState.colorScheme)
      .mode('lch')
      .domain([0, +this.vizState.maxVisibleBandVolume]);

    // populate the active prices from the initial book image
    this.vizState.activePrices = props.initialBook;

    // get the initial top-of-book bid and ask prices
    // const {bestBid, bestAsk} = getTopOfBook(this.vizState.activePrices, this.vizState.pricePrecision);
    // this.vizState.bestBid = bestBid;
    // this.vizState.bestAsk = bestAsk;

    // create the initial band values using the initial book image
    this.vizState.activeBands = getInitialBandValues(
      props.initialTimestamp,
      props.initialBook,

render() {
    const { data, id, height, width, url, attribution, interactive, locked, viewport, onChange, markerRadiusSize, markerRadiusIncrementSize } = this.props;

    const noOfKeys = data.length;
    const chromaScale = chroma.scale('Spectral');
    const markers = [];
    data.forEach(({ keys, name, values }, idx) => {
      const y = Object.values(values);
      const min = Math.min(...y);
      const max = Math.max(...y);
      const color = chromaScale(idx * (1 / noOfKeys));
      Object.entries(values)
        .forEach(([coord, value], valueIdx) => markers
          .push(this._formatMarker(coord, value, min, max, markerRadiusSize, markerRadiusIncrementSize, color, name, keys[valueIdx])));
    });

    return (
      <div style="{{">
        {locked &amp;&amp; <div width="" style="{{">}
        <map> { this._map = c; }}
             id={`visualization-${id}`}</map></div></div>

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"
import chroma from "chroma-js"

const wrapperStyles = {
  width: "100%",
  maxWidth: 980,
  margin: "0 auto",
}

const colorScale = chroma
  .scale([
    '#FF6E40',
    'FFD740',
    '#00B8D4',
  ])
  .mode('lch')
  .colors(24)

  const subregions = [
    "Southern Asia",
    "Polynesia",
    "Micronesia",
    "Southern Africa",
    "Central Asia",
    "Melanesia",
    "Western Europe",

private updateColorSchemeDiv(): string[] {
    const domainL = this.getColorScale(this.colors, this.bezier, this.lightness);
    const domainR = this.getColorScale(this.colorsRight, this.bezierRight, this.lightnessRight);

    if (domainL[domainL.length - 1] === domainR[0]) {
      domainL.pop();
    }

    return chroma.scale([...domainL, ...domainR]).colors(this.steps);
  }

export const getColorPalette = (theme) => {
	const accentColor = Platform.OS === 'ios' ? '#007AFF' : '#009688';

	const scale = chroma.scale([accentColor, theme !== 'light' ? 'black' : 'white']);
	const accent = scale(0.1).hex();

	const shades = chroma.scale([accent, 'black']);
	const statusBar = shades(0.3).hex();
	const icons = shades(0.3).desaturate(0.6).hex();

	const light = {
		header: Platform.OS === 'ios' ? '#F7F7F7' : accent,
		headerSeparator: '#A7A7AA',
		headerText: Platform.OS === 'ios' ? '#000000' : '#ffffff',
		headerIcon: '#1F1F1F',
	};

	const dark = {
		header: Platform.OS === 'ios' ? '#1B1B1B' : accent,
		headerSeparator: '#3A3A3A',
		headerText: '#ffffff',
		headerIcon: '#E0E0E0',
	};

export const ColoredGrid = ({ children, ...otherProps }) => {
  const colors = chroma.scale(['rgb(152,251,152)', 'rgb(58,97,58)']).colors(React.Children.count(children));
  return (
    
      {React.Children.map(children, (child, index) => React.cloneElement(child, {
        color: colors[index]
      }))}
    
  );
};;