How to use the @vx/scale.scaleQuantize function in @vx/scale

LegendLabel,
} from '@vx/legend';

const oneDecimalFormat = format('.1f');

const sizeScale = scaleLinear({
  domain: [0, 10],
  range: [10, 30],
});

const sizeColorScale = scaleLinear({
  domain: [0, 10],
  range: ['#75fcfc', '#3236b8'],
});

const quantileScale = scaleQuantize({
  domain: [0, 0.15],
  range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
});

const linearScale = scaleLinear({
  domain: [0, 10],
  range: ['#ed4fbb', '#e9a039'],
});

const thresholdScale = scaleThreshold({
  domain: [0.01, 0.02, 0.04, 0.06, 0.08, 0.1],
  range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
});

const ordinalColorScale = scaleOrdinal({
  domain: ['a', 'b', 'c', 'd'],

export default ({ width, height, events = false }) => {
  if (width &lt; 10) return <div>;

  const world = topojson.feature(topology, topology.objects.units);

  const color = scaleQuantize({
    domain: [
      Math.min(...world.features.map(f =&gt; f.geometry.coordinates.length)),
      Math.max(...world.features.map(f =&gt; f.geometry.coordinates.length))
    ],
    range: ['#ffb01d', '#ffa020', '#ff9221', '#ff8424', '#ff7425', '#fc5e2f', '#f94b3a', '#f63a48']
  });

  return (
    <svg height="{height}" width="{width}">
      <linearGradient r="{'80%'}" id="geo_mercator_radial"></linearGradient>
      <rect rx="{14}" fill="{`#f9f7e8`}" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
      </svg></div>

import { Group } from '@vx/group';
import { Pack } from '@vx/hierarchy';
import { hierarchy } from 'd3-hierarchy';
import { scaleQuantize } from '@vx/scale';
import { exoplanets as data } from '@vx/mock-data';

const extent = (allData, value = d => d) => [
  Math.min(...allData.map(value)),
  Math.max(...allData.map(value)),
];

const exoplanets = data.filter(d => d.distance === 0);
const planets = data.filter(d => d.distance !== 0);
const pack = { children: [{ children: planets }].concat(exoplanets) };

const colorScale = scaleQuantize({
  domain: extent(data, d => d.radius),
  range: ['#ffe108', '#ffc10e', '#fd6d6f', '#855af2', '#11d2f9', '#49f4e7'],
});

export default ({
  width,
  height,
  margin = {
    top: 10,
    left: 30,
    right: 40,
    bottom: 80,
  },
}) => {
  if (width < 10) return null;

import { CustomProjection, Graticule } from '@vx/geo';
import {
  geoConicConformal,
  geoTransverseMercator,
  geoNaturalEarth1,
  geoConicEquidistant,
  geoOrthographic,
  geoStereographic,
} from 'd3-geo';
import topology from '../../static/vx-geo/world-topo.json';

const bg = '#252b7e';
const purple = '#201c4e';

const world = topojson.feature(topology, topology.objects.units);
const color = scaleQuantize({
  domain: [
    Math.min(...world.features.map(f => f.geometry.coordinates.length)),
    Math.max(...world.features.map(f => f.geometry.coordinates.length)),
  ],
  range: [
    '#019ece',
    '#f4448b',
    '#fccf35',
    '#82b75d',
    '#b33c88',
    '#fc5e2f',
    '#f94b3a',
    '#f63a48',
    '#dde1fe',
    '#8993f9',
    '#b6c8fb',

const Cartogram = ({
  maxWidth,
  data,
  renderTooltip,
  valueAccessor,
  idAccessor,
  mapStroke,
  mapFill,
  colors,
  numStops
}) => {
  const dataMap = map(data, idAccessor);
  const colorArray = quantize(interpolateRgb(colors[0], colors[1]), numStops);
  const colorScale = scaleQuantize({
    domain: extent(data, valueAccessor),
    range: colorArray
  });
  const x = d => d.x;
  const y = d => d.y;
  const boxesWide = max(layout, x) + 1;
  const boxesTall = max(layout, y) + 1;
  const ratio = boxesTall / boxesWide;
  return (
    
      {({ width, height, handleMouseMove, handleMouseLeave }) => {
        if (width < 10) return;

height,
  handleMouseMove,
  handleMouseLeave,
  data,
  valueAccessor,
  geometry,
  projection,
  colors,
  numStops,
  mapStroke,
  mapFill,
  idAccessor
}) => {
  const dataMap = map(data, idAccessor);
  const colorArray = quantize(interpolateRgb(colors[0], colors[1]), numStops);
  const colorScale = scaleQuantize({
    domain: extent(data, valueAccessor),
    range: colorArray
  });
  return (
    
      {feature => (
        
          {topo => (