@vx/scale

@vx/scale

Installation

npm install --save @vx/scale

Overview of scales

The @vx/scale package aims to provide a wrapper around existing d3 scaling originally defined in the d3-scale package.

Scales are functions that help you map your data values to the physical pixel size that your graph requires. For example, let's say you wanted to create a bar chart to show populations per country. If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about 321.4 million pixels high!

Instead, you can tell vx a function to use that takes a data value (like your population per country) and quantitatively maps to another dimensional space, like pixels.

For example, we could create a linear scale like this:

const graphWidth = 500;
const graphHeight = 200;
const [minX, maxX] = getXMinAndMax();
const [minY, maxY] = getYMinAndMax();

const xScale = Scale.scaleLinear({
  domain: [minX, maxX], // x-coordinate data values
  rangeRound: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right
});

const yScale = Scale.scaleLinear({
  domain: [minY, maxY], // y-coordinate data values
  // svg y-coordinates, these increase from top to bottom so we reverse the order
  // so that minY in data space maps to graphHeight in svg y-coordinate space
  rangeRound: [graphHeight, 0],
});

// ...

const points = data.map((d, i) => {
  const barHeight = graphHeight - yScale(d.y);
  return <Shape.Bar height={barHeight} y={graphHeight - barHeight} />;
});

Different types of scales

Band scale

Original d3 docs

Example:

const scale = Scale.scaleBand({
  /*
    range,
    rangeRound,
    domain,
    padding,
    nice = false
  */
});

Linear scale

Original d3 docs

Example:

const scale = Scale.scaleLinear({
  /*
    range,
    rangeRound,
    domain,
    nice = false,
    clamp = false,
  */
});

Log scale

Original d3 docs

Example:

const scale = Scale.scaleLog({
  /*
    range,
    rangeRound,
    domain,
    base,
    nice = false,
    clamp = false,
  */
});

Ordinal scale

Original d3 docs

Example:

const scale = Scale.scaleOrdinal({
  /*
    range,
    domain,
    unknown,
  */
});

Point scale

Original d3 docs

Example:

const scale = Scale.scalePoint({
  /*
    range,
    rangeRound,
    domain,
    padding,
    align,
    nice = false,
  */
});

Power scale

Original d3 docs

Example:

const scale = Scale.scalePower({
  /*
    range,
    rangeRound,
    domain,
    exponent,
    nice = false,
    clamp = false,
  */
});

Square Root scale

Original d3 docs

Example:

// No need to set the exponent, It is always 0.5
const scale = Scale.scaleSqrt({
  /*
    range,
    rangeRound,
    domain,
    nice = false,
    clamp = false,
  */
});

Time scale

Original d3 docs

Example:

const scale = Scale.scaleTime({
  /*
    range,
    rangeRound,
    domain,
    nice = false,
    clamp = false,
   */
});

You also can scale time with Coordinated Universal Time via scaleUtc.

Example:

const scale = Scale.scaleUtc({
  /*
    range,
    rangeRound,
    domain,
    nice = false,
    clamp = false,
   */
});

Color Scales

D3 scales offer the ability to map points to colors. You can use d3-scale-chromatic in conjunction with vx's scaleOrdinal to make color scales.

You can install d3-scale-chromatic with npm:

npm install --save d3-scale-chromatic

You create a color scale like so:

import { scaleOrdinal } from '@vx/scale';
import { schemeSet1 } from 'd3-scale-chromatic';

const colorScale = scaleOrdinal({
  domain: arrayOfThings,
  range: schemeSet1,
});

This generates a color scale with the following colors:

There are a number of other categorical color schemes available, along with other continuous color schemes.

Changelog

v0.0.198

:rocket: Enhancements

• feat(tooltip): add Portal and useTooltipInPortal #756
• feat(responsive): add leading option to resize debounce #754
• feat(axis): use numTicks when falling back on scale.domain #752
• feat(pattern): add diagonal right to left pattern #744
• feat(legend): add Line shape, legendLabelProps, and more props in renderShape #749

💥 Breaking Changes

• feat(responsive): resize debounce now defaults to true which will result in an additional render #754
• feat(tooltip): add offsetLeft/Top to TooltipProps, making TooltipProps === TooltipWithBoundsProps, adds additional 10px of padding to Tooltip left/top #756

:bug: Bug Fix

• fix(responsive): remove debounced calls after unmounnt #558

:house: Internal

• (demo): add static export deploys #741

:trophy: Contributors

• claisne
• dennisja
• hshoff
• Pringels
• williaster

Changes: 
 - @vx/annotation: 0.0.197 => 0.0.198
 - @vx/axis: 0.0.197 => 0.0.198
 - @vx/bounds: 0.0.197 => 0.0.198
 - @vx/brush: 0.0.197 => 0.0.198
 - @vx/chord: 0.0.197 => 0.0.198
 - @vx/clip-path: 0.0.197 => 0.0.198
 - @vx/curve: 0.0.197 => 0.0.198
 - @vx/demo: 0.0.197 => 0.0.198
 - @vx/drag: 0.0.197 => 0.0.198
 - @vx/event: 0.0.197 => 0.0.198
 - @vx/geo: 0.0.197 => 0.0.198
 - @vx/glyph: 0.0.197 => 0.0.198
 - @vx/gradient: 0.0.197 => 0.0.198
 - @vx/grid: 0.0.197 => 0.0.198
 - @vx/group: 0.0.197 => 0.0.198
 - @vx/heatmap: 0.0.197 => 0.0.198
 - @vx/hierarchy: 0.0.197 => 0.0.198
 - @vx/legend: 0.0.197 => 0.0.198
 - @vx/marker: 0.0.197 => 0.0.198
 - @vx/mock-data: 0.0.197 => 0.0.198
 - @vx/network: 0.0.197 => 0.0.198
 - @vx/pattern: 0.0.197 => 0.0.198
 - @vx/point: 0.0.197 => 0.0.198
 - @vx/responsive: 0.0.197 => 0.0.198
 - @vx/scale: 0.0.197 => 0.0.198
 - @vx/shape: 0.0.197 => 0.0.198
 - @vx/stats: 0.0.197 => 0.0.198
 - @vx/text: 0.0.197 => 0.0.198
 - @vx/threshold: 0.0.197 => 0.0.198
 - @vx/tooltip: 0.0.197 => 0.0.198
 - @vx/voronoi: 0.0.197 => 0.0.198
 - @vx/vx: 0.0.197 => 0.0.198
 - @vx/zoom: 0.0.197 => 0.0.198