How to use the chroma-js.limits 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 plotly / react-colorscales / src / components / ColorscalePicker.js View on Github external
// helper function repeats a categorical colorscale array N times
  let repeatArray = (array, n) => {
    let arrays = Array.apply(null, new Array(n));
    arrays = arrays.map(function() {
      return array;
    });
    return [].concat.apply([], arrays);
  };

  let cs = chroma.scale(colorscale).mode('lch');

  if (log) {
    const logData = Array(nSwatches)
      .fill()
      .map((x, i) => i + 1);
    cs = cs.classes(chroma.limits(logData, 'l', logBreakpoints));
  }

  let discreteScale = cs.colors(nSwatches);

  // repeat linear categorical ("qualitative") colorscales instead of repeating them
  if (!log && colorscaleType === 'categorical') {
    discreteScale = repeatArray(colorscale, nSwatches).slice(0, nSwatches);
  }

  return discreteScale;
}
github getredash / redash / client / app / visualizations / choropleth / Renderer / utils.js View on Github external
colors: [],
      legend: [],
    };
  }
  const steps = Math.min(values.length, options.steps);
  if (steps === 1) {
    return {
      limits: values,
      colors: [options.colors.max],
      legend: [{
        color: options.colors.max,
        limit: first(values),
      }],
    };
  }
  const limits = chroma.limits(values, options.clusteringMode, steps - 1);

  // Create color buckets
  const colors = chroma.scale([options.colors.min, options.colors.max])
    .colors(limits.length);

  // Group values for legend
  const legend = map(colors, (color, index) => ({
    color,
    limit: limits[index],
  })).reverse();

  return { limits, colors, legend };
}
github spaasis / MakeMaps / app / stores / Layer.tsx View on Github external
getColors() {
        let opts = this.colorOptions;
        if (!opts.colorField) {
            return;
        }
        let values = this.values[opts.colorField.value];
        let colors = [];
        opts.limits = chroma.limits(values, opts.mode, opts.steps);
        opts.limits.splice(opts.limits.length - 1, 1); // remove maximum value
        opts.limits = opts.limits.filter(function(e, i, arr) {
            return arr.lastIndexOf(e) === i;
        }); // only unique values in limits
        colors = chroma.scale(opts.colorScheme).colors(opts.limits.length);
        opts.colors = opts.revert ? colors.reverse() : colors;
    }
github spaasis / MakeMaps / app / ui_components / menu / ColorMenu.tsx View on Github external
calculateValues = () => {
        let lyr: Layer = this.props.state.editingLayer;
        let field: Header = lyr.colorOptions.colorField;
        let limits: any[] = [];
        if (field.type === 'number') {
            let steps: number = Math.min(lyr.uniqueValues[field.value].length, lyr.colorOptions.steps);
            if (!lyr.colorOptions.useCustomScheme) {
                limits = chroma.limits(lyr.values[field.value], lyr.colorOptions.mode, steps);
                limits.splice(limits.length - 1, 1); // remove maximum value from limits
                limits = limits.filter(function(e, i, arr) {
                    return arr.lastIndexOf(e) === i;
                }); // only unique values in limits
            }
            else {
                if (steps >= lyr.uniqueValues[field.value].length) {
                    limits = lyr.uniqueValues[field.value];
                }
                else
                    limits = CalculateLimits(lyr.values[field.value][0], lyr.values[field.value][lyr.values[field.value].length - 1], steps, field.decimalAccuracy);
            }
        }
        else {
            limits = lyr.uniqueValues[field.value];
        }
github timwis / leaflet-choropleth / src / choropleth.js View on Github external
steps: 5,
    mode: 'q'
  })

  // Save what the user passed as the style property for later use (since we're overriding it)
  var userStyle = opts.style

  // Calculate limits
  var values = geojson.features.map(function (item) {
    if (typeof opts.valueProperty === 'function') {
      return opts.valueProperty(item)
    } else {
      return item.properties[opts.valueProperty]
    }
  })
  var limits = chroma.limits(values, opts.mode, opts.steps - 1)

  // Create color buckets
  var colors = opts.colors || chroma.scale(opts.scale).colors(opts.steps)

  return L.geoJson(geojson, _.extend(opts, {
    limits: limits,
    colors: colors,
    style: function (feature) {
      var style = {}
      var featureValue

      if (typeof opts.valueProperty === 'function') {
        featureValue = opts.valueProperty(feature)
      } else {
        featureValue = feature.properties[opts.valueProperty]
      }
github DefinitelyTyped / DefinitelyTyped / chroma-js / chroma-js-tests.ts View on Github external
chroma.blend('4CBBFC', 'EEEE22', 'multiply');
    chroma.blend('4CBBFC', 'EEEE22', 'darken');
    chroma.blend('4CBBFC', 'EEEE22', 'lighten');
    chroma.random();
    chroma.contrast('pink', 'hotpink');
    chroma.contrast('pink', 'purple');
    chroma.brewer.OrRd;
    var data = [3.0, 3.5, 3.6, 3.8, 3.8, 4.1, 4.3, 4.4,
        4.6, 4.9, 5.2, 5.3, 5.4, 5.7, 5.8, 5.9,
        6.2, 6.5, 6.8, 7.2, 9];
    chroma.limits(data, 'e', 5);
    chroma.limits(data, 'q', 5);
    chroma.limits(data, 'k', 5);

    myChroma(0xff3399);
    myChroma.limits(data, 'k', 5);
}
github LiveBy / react-leaflet-choropleth / choropleth.jsx View on Github external
getColors() {
    const { data, valueProperty, mode, steps, scale, colors: cl } = this.props
    const colors = {}
    const features = Array.isArray(data) ? data : data.features

    const values = features.map(item => this.isFunction(valueProperty)
      ? valueProperty(item)
      : item.properties[valueProperty])

    colors.limits = chroma.limits(values, mode, steps - 1)
    colors.colors = cl || chroma.scale(scale).colors(steps)
    return colors
  }