How to use chroma-js - 10 common examples

let chroma = require('chroma-js');
let { map, rgb, lab: lab2 } = require('../../../');

const getLabValues = () => {
	return {
		l: Math.floor(Math.random() * 100),
		a: Math.floor(Math.random() * 200 - 100),
		b: Math.floor(Math.random() * 200 - 100)
	}
}

for (var i = 0; i < 100; i++) {
	let color = getLabValues();
	console.log('\n-----\n');
	console.log(color);
	console.log('chroma', chroma.lab(color.l, color.a, color.b));
	console.log('d3-color', lab(color.l, color.a, color.b).rgb());
	console.log('culori', map(rgb(lab2(color)), (k,v) => 'rgb'.indexOf(k) > -1 ? v * 255 : v ));

}
// 
// console.log('d3-color\n', lab("#abcdef"), lab("#abcdef").rgb());
// console.log('culori\n', lab2("#abcdef"), map(rgb(lab2("#abcdef")), (k,v) => 'rgb'.indexOf(k) > -1 ? v * 255 : v ));

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);
}

.gamma(0.7)
        .lightness([0.3, 0.8])
        .scale() // convert to chroma.scale
        .correctLightness()
        .colors(5);

    chroma.scale('RdYlBu');
    chroma.scale('RdYlBu').padding(0.15);

    chroma.scale('OrRd');
    chroma.scale('OrRd').padding([0.2, 0]);

    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);
}

coordinates.forEach(coordinate => {
          const ammount = coordinate.y
          const percent = coordinate.x * 100
          let color = chroma.mix(colors[0], colors[1], ammount, colorMode).css('hsl')

          // Round the colours to the nearest 'alphaDecimals' decimal places
          const prefix = color.indexOf('(') !== -1 ? color.substring(0, color.indexOf('(')) : color
          const values = color.match(/\((.*)\)/).pop().split(',').map(string =>
            string.indexOf('%') === -1 ? + Number(string).toFixed(alphaDecimals) : string.trim()
          )

          // Pair the colour stop with the co-ords
          color = `${prefix}(${values.join(', ')})`

          // Add the new pair to the main output array. We don't need the stop % for the first and last items in the list.
          if (Number(coordinate.x) !== 0 && Number(coordinate.x) !== 1) {
            colorStops.push(`${color} ${+percent.toFixed(2)}%`)
          } else {
            colorStops.push(color)
          }

value.forEach((val, i) => {
        a[key + i] = val
      })
    } else {
      a[key] = value
    }
    return a
  }, {})

// todo: flatten

export const colors = Object.assign({}, flattened, {
  black: '#000',
  white: '#fff',
  primary: primary,
  primary2: chroma(primary).darken().hex()

})

export default {
  ...theme,
  colors,
  palette
}

import chroma from 'chroma-js';

export const steelBlue = 'rgb(137, 175, 202)';

// For encoding gender as a color
export const male = 'rgba(41, 159, 197, 0.5)';
export const female = 'rgba(224, 99, 120, 0.5)';
export const nonBinary = 'rgba(81, 185, 86, 0.5)';
export function genderColor(gender) {
  if (gender === 'M') return male;
  if (gender === 'F') return female;
  return nonBinary;
}

export const high = chroma('green').alpha(0.5).css();
export const medium = chroma('orange').alpha(0.5).css();
export const low = chroma('red').alpha(0.5).css();

params_config.map(p => p.key).includes('startDate');
                    const hasDecodeTimeline =
                      decode_config &&
                      decode_config.map(p => p.key).includes('startDate');
                    const timelineConfig = timeline_config && {
                      ...timeline_config,
                      railStyle: {
                        background: '#d6d6d9',
                        borderRadius: '0px'
                      },
                      trackStyle: [
                        {
                          background: customColor
                        },
                        {
                          background: chroma(customColor).darken(1.3)
                        }
                      ]
                    };

                    // get params
                    const params = params_config && reduceParams(params_config);
                    const decodeParams =
                      decode_config && reduceParams(decode_config);
                    const sqlParams = sql_config && reduceSqlParams(sql_config);

                    return {
                      ...info,
                      ...l,
                      ...(d.tableName && { tableName: d.tableName }),
                      ...l.applicationConfig,
                      // sorting position

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,