How to use colormap - 9 common examples

import Snap from 'ol/interaction/Snap';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import sync from 'ol-hashed';
import {Fill, Stroke, Style} from 'ol/style';
//! [imports]
import {getArea} from 'ol/sphere';
import colormap from 'colormap';
//! [imports]

//! [color]
const min = 1e8; // the smallest area
const max = 2e13; // the biggest area
const steps = 50;
const ramp = colormap({
  colormap: 'blackbody',
  nshades: steps
});

function clamp(value, low, high) {
  return Math.max(low, Math.min(value, high));
}

function getColor(feature) {
  const area = getArea(feature.getGeometry());
  const f = Math.pow(clamp((area - min) / (max - min), 0, 1), 1 / 2);
  const index = Math.round(f * (steps - 1));
  return ramp[index];
}
//! [color]

colorize(tokensWithWeights, topKIdx) {
    const {colormapProps} = this.props
    // colormap package takes minimum of 6 shades
    colormapProps.nshades =  Math.min(Math.max(colormapProps.nshades, 6), 72);
    const colors = colormap(colormapProps)

    let colorizedString = [];
    tokensWithWeights.forEach((obj, idx) => {
      colorizedString.push(
        // Again, 1 -, in this case because low extreme is blue and high extreme is red
        <label style="{{" data-tip="{(1">
            
                {obj.token}
            
        </label>
      )
    })
    return colorizedString
  }

function getRandomColor() {
    // Generate a random color from a colormap (and convert it to hash).
    var ncolors = 72
    var index = Math.floor(Math.random() * ncolors)
    var col = colormap('nature', ncolors, 'hex')[index]
    return col
  }

let limits = []
    let barLimits = []

    if (data.type === 'sequential') {
      // Set a 0 to max ranged colorscheme
      this.cmap = colormap({
        colormap: 'YIOrRd',
        nshades: 50,
        format: 'rgbaString'
      })

      limits = [maxData, 0]
      barLimits = [0, maxData]
    } else if (data.type === 'diverging') {
      this.cmap = colormap({
        colormap: 'RdBu',
        nshades: 50,
        format: 'rgbaString'
      }).reverse()

      let extreme = Math.max(Math.abs(maxData), Math.abs(minData))

      limits = [extreme, -extreme]
      barLimits = [-extreme, extreme]
    }

    this.colorScale = d3.scaleLinear()
      .domain(limits)
      .range([0, this.cmap.length - 0.01])

    // Setup color bar

plot (data) {
    let svg = this.svg
    let regionHook = this.regionHook
    let tooltip = this.tooltip

    let minData = data.range[0]
    let maxData = data.range[1]

    let limits = []
    let barLimits = []

    if (data.type === 'sequential') {
      // Set a 0 to max ranged colorscheme
      this.cmap = colormap({
        colormap: 'YIOrRd',
        nshades: 50,
        format: 'rgbaString'
      })

      limits = [maxData, 0]
      barLimits = [0, maxData]
    } else if (data.type === 'diverging') {
      this.cmap = colormap({
        colormap: 'RdBu',
        nshades: 50,
        format: 'rgbaString'
      }).reverse()

      let extreme = Math.max(Math.abs(maxData), Math.abs(minData))

defaultFill: '#ccc'
      },
      geographyConfig: {
        highlightOnHover: false,
        popupTemplate: (geo, data) => {
          return ['<div class="hoverinfo">',
                  '<strong>State</strong><br>',
                  '<strong>Region</strong><br>',
                  'Weighted ILI (%)',
                  '</div>'].join('')
        }
      }
    })

    let nCmap = 50
    this.cmap = colormap({
      colormap: 'YIOrRd',
      nshades: nCmap,
      format: 'rgbaString'
    })

    let svg = this.d3.select('#' + this.elementId + ' svg')
    this.width = svg.node().getBoundingClientRect().width
    this.height = svg.node().getBoundingClientRect().height
    this.svg = svg
    this.nCmap = nCmap

    this.setupInfo()
    this.setupColorBar()
  }

constructor(
    options: {
      title: string,
      datapoint: string,
      colormap: string,
      showLegend?: boolean,
    },
    worldMap: WorldMap
  ) {
    this.title = options.title;
    this.worldMap = worldMap;
    this.datapoint = options.datapoint;
    this.colormap = options.colormap;
    this.showLegend = options.showLegend !== false;

    const colors: [number, number, number, number][] = colormap({
      nshades: 101,
      format: 'rba',
      colormap: this.colormap
    });
    let item;
    let min = Infinity;
    let max = -Infinity;
    const data = [];
    for (const cell of worldMap.world.cells) {
      item = cell[options.datapoint];
      data.push(item);
      if (item < min) {
        min = item;
      } else if (item > max) {
        max = item;
      }

importTestData = () => {
      this.log = Log.load(raw)

      this.props.enqueueSnackbar(
        'test log data successfully imported: ' + this.log.records.length + ' records found',
        {variant: 'info'},
      )

      var colors = colormap({
        colormap: 'hsv',
        nshades: this.log.modules.length > 10 ? this.log.modules.length : 11,
        format: 'hex',
        alpha: 1,
      })

      this.setState({
        nodes: this.log.nodes,
        msgs: this.log.msgs,
        levels: this.log.levels,
        modules: this.log.modules,
        moduleColors: colors,
      })

#!/usr/bin/env node
var data = require('colormap/colorScales.js')
var colors = Object.keys(data)
var gen = require('../index.js')
var fs = require('fs')
var path = require('path')

var file = path.join(__dirname, '..', 'colors.json')
fs.writeFile(file, JSON.stringify(colors))
colors.forEach(function (name) {
  var file = path.join(__dirname, '..', name + '.glsl')
  fs.writeFile(file, gen(name, data[name]))
})