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

To help you get started, we’ve selected a few chroma-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github palantir / blueprint / packages / docs-app / src / components / colorSchemes.tsx View on Github external
const rightColors = chroma
                .bezier(basePalette.slice(2, 5))
                .scale()
                .mode("lab")
                .correctLightness(true);

            const result: string[] = [];
            for (let i = 0; i < steps; i++) {
                // Calculate the position of the step as a value between 0 and 1.
                // If it's below 0.5 use the left color scale, otherwise use right scale.
                const t = i / (steps - 1);
                result.push(t < 0.5 ? leftColors(t * 2).hex() : rightColors(t * 2 - 1).hex());
            }
            return result;
        } else {
            return chroma
                .bezier(basePalette)
                .scale()
                .correctLightness(true)
                .colors(steps);
        }
    };
github palantir / blueprint / packages / docs-app / src / components / colorSchemes.tsx View on Github external
private generateColorPalette = (basePalette: string[], diverging?: boolean, steps = this.state.steps) => {
        if (diverging) {
            // Split the basePalette into left and right, including the middle color in both.
            // Create individual bezier scales for each side. We'll choose which to use later.
            const leftColors = chroma
                .bezier(basePalette.slice(0, 3))
                .scale()
                .mode("lab")
                .correctLightness(true);
            const rightColors = chroma
                .bezier(basePalette.slice(2, 5))
                .scale()
                .mode("lab")
                .correctLightness(true);

            const result: string[] = [];
            for (let i = 0; i < steps; i++) {
                // Calculate the position of the step as a value between 0 and 1.
                // If it's below 0.5 use the left color scale, otherwise use right scale.
                const t = i / (steps - 1);
                result.push(t < 0.5 ? leftColors(t * 2).hex() : rightColors(t * 2 - 1).hex());
github BinaryStudioAcademy / bsa-2018-watcher / frontend / src / app / dashboards / charts / chart-builder / chart-builder.component.ts View on Github external
private getColorScale(colors: string, bezier: boolean, lightness: boolean): string[] {
    const cleanColors = clean(colors);
    const scale = bezier ? chroma.bezier(cleanColors.slice(0, 5)).scale() : chroma.scale(cleanColors);
    return scale.mode('lab').correctLightness(lightness).colors(this.steps);

    function clean(s: string): string[] {
      return s.trim().replace(/(, *| +)/g, ',').replace(/['"]/g, '').split(',');
    }
  }
}
github transcranial / keras-js / demos / src / data / colormaps.js View on Github external
import chroma from 'chroma-js'

export const COLORMAPS = [
  { text: 'Transparency', value: 'transparency' },
  {
    text: 'Jet',
    value: chroma.scale([[0, 0, 131], [0, 60, 170], [5, 255, 255], [255, 255, 0], [250, 0, 0], [128, 0, 0]])
  },
  {
    text: 'Hot',
    value: chroma.bezier([[0, 0, 0], [230, 0, 0], [255, 210, 0], [255, 255, 255]])
  },
  {
    text: 'Viridis',
    value: chroma.scale([
      [68, 1, 84],
      [71, 44, 122],
      [59, 81, 139],
      [44, 113, 142],
      [33, 144, 141],
      [39, 173, 129],
      [92, 200, 99],
      [170, 220, 50],
      [253, 231, 37]
    ])
  },
  {
github elastic / eui / src-docs / src / views / elastic_charts / shared.js View on Github external
function createSteps(colors, steps) {
    return colors.length
      ? chroma
          .scale(bezier && colors.length > 1 ? chroma.bezier(colors) : colors)
          .correctLightness(correctLightness)
          .colors(steps)
      : [];
  }
github swimlane / ngx-charts-builder / src / app / app.component.ts View on Github external
function getColorScale(colors: string, bezier: boolean, lightness: boolean) {
  const cleanColors = clean(colors);
  const scale = bezier ? chroma.bezier(cleanColors.slice(0, 5)).scale() : chroma.scale(cleanColors);
  return scale.mode('lab').correctLightness(lightness);
}