How to use the d3-scale.scaleQuantize function in d3-scale

To help you get started, we’ve selected a few d3-scale 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 DefinitelyTyped / DefinitelyTyped / d3-scale / d3-scale-tests.ts View on Github external
colorInterpolator = d3Scale.interpolateCool;

colorInterpolator = d3Scale.interpolateCubehelixDefault;


// -------------------------------------------------------------------------------
// Quantize Scale Factory
// -------------------------------------------------------------------------------

// scaleQuantize() -----------------------------------------------------------------

let quantizeScaleNumber: d3Scale.ScaleQuantize;
let quantizeScaleString: d3Scale.ScaleQuantize;

quantizeScaleNumber = d3Scale.scaleQuantize();
quantizeScaleString = d3Scale.scaleQuantize();


// ScaleQuantize Interface ========================================================

// domain(...) -----------------------------------------------------------------

quantizeScaleNumber = quantizeScaleNumber.domain([0, 1]);
quantizeScaleNumber = quantizeScaleNumber.domain([new NumCoercible(0), new NumCoercible(100)]);
let domainQuantize: [number, number] = quantizeScaleNumber.domain();

// range(...) -----------------------------------------------------------------

quantizeScaleNumber = quantizeScaleNumber.range(rangeNumbers);
rangeNumbers = quantizeScaleNumber.range();

quantizeScaleString = quantizeScaleString.range(['steelblue', 'brown']);
github DefinitelyTyped / DefinitelyTyped / d3-scale / d3-scale-tests.ts View on Github external
colorInterpolator = d3Scale.interpolateCool;

colorInterpolator = d3Scale.interpolateCubehelixDefault;


// -------------------------------------------------------------------------------
// Quantize Scale Factory
// -------------------------------------------------------------------------------

// scaleQuantize() -----------------------------------------------------------------

let quantizeScaleNumber: d3Scale.ScaleQuantize;
let quantizeScaleString: d3Scale.ScaleQuantize;

quantizeScaleNumber = d3Scale.scaleQuantize();
quantizeScaleString = d3Scale.scaleQuantize();


// ScaleQuantize Interface ========================================================

// domain(...) -----------------------------------------------------------------

quantizeScaleNumber = quantizeScaleNumber.domain([0, 1]);
quantizeScaleNumber = quantizeScaleNumber.domain([new NumCoercible(0), new NumCoercible(100)]);
let domainQuantize: [number, number] = quantizeScaleNumber.domain();

// range(...) -----------------------------------------------------------------

quantizeScaleNumber = quantizeScaleNumber.range(rangeNumbers);
rangeNumbers = quantizeScaleNumber.range();
github tmrowco / electricitymap-contrib / web / src / helpers / scales.js View on Github external
'rgba(236, 109, 255, 1.0)',
    'rgba(255,  30, 219, 1.0)',
    'rgba(255,  30, 219, 1.0)',
  ])
  .clamp(true);


// ** Solar
export const solarColor = scaleLinear()
  .domain([0, 500, 1000])
  .range(['black', 'transparent', 'gold'])
  .clamp(true);

// ** Exchange

export const quantizedCo2IntensityScale = scaleQuantize()
  .domain([0, 800])
  .range([0, 80, 160, 240, 320, 400, 480, 560, 640, 720, 800])
  .unknown('nan');

export const quantizedExchangeSpeedScale = scaleLinear()
  .domain([500, 5000])
  .rangeRound([0, 2])
  .unknown(0)
  .clamp(true);
github elastic / elastic-charts / src / utils / scales / scale_band.ts View on Github external
this.d3Scale.range(range);
    const safeBarPadding = clamp(barsPadding, 0, 1);
    this.barsPadding = safeBarPadding;
    this.d3Scale.paddingInner(safeBarPadding);
    this.d3Scale.paddingOuter(safeBarPadding / 2);
    this.bandwidth = this.d3Scale.bandwidth() || 0;
    this.step = this.d3Scale.step();
    this.domain = this.d3Scale.domain();
    this.range = range.slice();
    if (overrideBandwidth) {
      this.bandwidth = overrideBandwidth * (1 - safeBarPadding);
    }
    this.bandwidthPadding = this.bandwidth;
    // TO FIX: we are assiming that it's ordered
    this.isInverted = this.domain[0] > this.domain[1];
    this.invertedScale = scaleQuantize()
      .domain(range)
      .range(this.domain);
    this.minInterval = 0;
  }
github plouc / nivo / packages / core / src / lib / colors / quantize.js View on Github external
if (!isFunction(colors.domain)) {
            throw new Error(
                `Provided colors should be a valid quantize scale providing a 'domain()' function`
            )
        }

        return colors
    }

    if (quantizeColorScales[colors]) {
        // use predefined d3 quantize color scale
        return scaleQuantize().range(quantizeColorScales[colors])
    }

    // user defined colors
    if (isArray(colors)) return scaleQuantize().range(colors)

    throw new Error(
        `Unable to guess quantize color scale from '${colors}',\nmust be a function or one of:\n'${quantizeColorScalesKeys.join(
            `', '`
        )}'`
    )
}
github orbiting / styleguide / src / components / Chart / Maps.layout.js View on Github external
? props.colorRanges.discrete
          : props.colorRanges.sequential3
    }
    colorScale.domain(domain).range(colorRange)
  } else {
    const dataValues = data.map(d => d.value)
    const valuesExtent = props.extent || extent(dataValues)

    if (props.thresholds) {
      colorScale = scaleThreshold()
      domain = props.thresholds
      if (!colorRange) {
        colorRange = props.colorRanges.sequential.slice(0, domain.length + 1)
      }
    } else {
      colorScale = scaleQuantize()
      domain = valuesExtent
    }

    colorScale.domain(domain).range(colorRange || props.colorRanges.sequential)

    colorValues = colorScale.range().map(value => {
      const extent = colorScale.invertExtent(value)
      const safeExtent = [
        extent[0] === undefined ? valuesExtent[0] : extent[0],
        extent[1] === undefined ? valuesExtent[1] : extent[1]
      ]
      return {
        value: safeExtent[0],
        label: `${numberFormat(safeExtent[0])} ${tLabel('bis')} ${numberFormat(
          safeExtent[1]
        )}`
github react-d3 / react-d3-core / src / utils / scale.jsx View on Github external
} = props;

  var func;

  if(scale === 'linear')
    func = D3Scale.scaleLinear();
  else if(scale === 'identity')
    func = D3Scale.scaleIdentity();
  else if(scale === 'sqrt')
    func = D3Scale.scaleSqrt();
  else if(scale === 'pow')
    func = D3Scale.scalePow();
  else if(scale === 'log')
    func = D3Scale.scaleLog();
  else if(scale === 'quantize')
    func = D3Scale.scaleQuantize();
  else if(scale === 'quantile')
    func = D3Scale.scaleQuantile();
  else if(scale === 'ordinal')
    func = D3Scale.scaleOrdinal()
  else if(scale === 'band')
    func = D3Scale.scaleBand();
  else if(scale === 'time')
    func = D3Scale.scaleTime();
  else
    new Error(`Please check your axis scale setting. "${scale}" scale is invalid. `)

  func = _mkScaleSettings(props, func);

  return func;
}
github apache-superset / superset-ui-plugins / packages / superset-ui-preset-chart-xy / src / encodeable / parsers / extractScale.ts View on Github external
case ScaleType.LOG:
      return scaleLog<output>();
    case ScaleType.POW:
      return scalePow<output>();
    case ScaleType.SQRT:
      return scaleSqrt<output>();
    case ScaleType.SYMLOG:
      return undefined;
    case ScaleType.TIME:
      return scaleTime<output>();
    case ScaleType.UTC:
      return scaleUtc<output>();
    case ScaleType.QUANTILE:
      return scaleQuantile<output>();
    case ScaleType.QUANTIZE:
      return scaleQuantize<output>();
    case ScaleType.THRESHOLD:
      return scaleThreshold();
    case ScaleType.BIN_ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.POINT:
      return scalePoint&lt;{ toString(): string }&gt;();
    case ScaleType.BAND:
      return scaleBand&lt;{ toString(): string }&gt;();
    default:
      return undefined;
  }
}
</output></output></output></output></output></output></output>
github BigFatDog / auth-flow-react-apollo-saga / app / containers / Vartan / algs.js View on Github external
const areaLayout = (points, width, height, citiesData) => {
  colorDataByContinent(points, citiesData);
  const rng = randomNormal(0, 0.2);
  const pointWidth = Math.round(width / 800);
  const pointMargin = 1;
  const pointHeight = pointWidth * 0.375;
  const latExtent = extent(citiesData, d => d.lat);
  const xScale = scaleQuantize()
    .domain(latExtent)
    .range(range(0, width, pointWidth + pointMargin));
  const binCounts = xScale.range().reduce((accum, binNum) => {
    accum[binNum] = 0;
    return accum;
  }, {});
  const byContinent = nest()
    .key(d => d.continent)
    .entries(citiesData);
  citiesData.forEach((city, i) => {
    city.d = points[i];
  });
  byContinent.forEach((continent, i) => {
    continent.values.forEach((city, j) => {
      const d = city.d;
      const binNum = xScale(city.lat);
github samccone / bundle-buddy / viz / src / color.js View on Github external
import { scaleQuantize } from "d3-scale";
import { teal100 } from "material-ui/styles/colors";

export const colorScale = scaleQuantize()
  .domain([1, 5])
  .range([teal100, "#ffafb6", "#ff616f", "#d21c5b", "#6d253e"]);