@vx/scale

@vx/scale

npm install --save @vx/scale

Overview of Scaling

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 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 value (like your population per country) and spits out another value.

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

const graphHeight = 500; // We'll have a 500 pixel high graph
const maxPopulation = getMostPopulatedCountryInTheWorld();

const yScale = Scale.scaleLinear({
  rangeRound: [graphHeight, 0],
  domain: [0, maxPopulation],
});

// ...

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

Note: This example represents how to use a yScale, but skipped a lot of details about how to make a bar chart. If you're trying to do that, you should check out this example.

Current Scaling Options

Color Scaling

Color scales convert a point to a series of colors. D3 comes with a number of schemes that you can use just like any other scale.

Original d3 docs with colors

Scale 10 colors

Scale 20 colors

Scale 20b colors

Scale 20c colors

Example:

const scale10 = Scale.schemeCategory10({ /* range, domain, unknown */})
const scale20 = Scale.schemeCategory20({ /* range, domain, unknown */})
const scale20b = Scale.schemeCategory20b({ /* range, domain, unknown */})
const scale20c = Scale.schemeCategory20c({ /* range, domain, unknown */})

Band Scaling

Original d3 docs

Example:

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

Linear Scaling

Original d3 docs

Example:

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

Log Scaling

Original d3 docs

Example:

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

Ordinal Scaling

Original d3 docs

Example:

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

Point Scaling

Original d3 docs

Example:

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

Power Scaling

Original d3 docs

Example:

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

Time Scaling

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,
   */
});

Changelog

v0.0.136

• [all] add package-lock=false to .npmrc fixes #93 #129
• [demo][docs] sync vx-demo site documentation with packages #125
• [gradient][pattern] fix typos #121
• [demo] updated geo + network tiles #120
• [event] add touch point #116
• [gradient] Add minimal rendering tests #114

Changes:
- @vx/annotation: 0.0.131 => 0.0.136
- @vx/axis: 0.0.134 => 0.0.136
- @vx/bounds: 0.0.129 => 0.0.136
- @vx/boxplot: 0.0.131 => 0.0.136
- @vx/brush: 0.0.127 => 0.0.136
- @vx/clip-path: 0.0.127 => 0.0.136
- @vx/curve: 0.0.127 => 0.0.136
- @vx/demo: 0.0.135 => 0.0.136
- @vx/drag: 0.0.127 => 0.0.136
- @vx/event: 0.0.127 => 0.0.136
- @vx/geo: 0.0.135 => 0.0.136
- @vx/glyph: 0.0.127 => 0.0.136
- @vx/gradient: 0.0.129 => 0.0.136
- @vx/grid: 0.0.131 => 0.0.136
- @vx/group: 0.0.127 => 0.0.136
- @vx/heatmap: 0.0.127 => 0.0.136
- @vx/hierarchy: 0.0.127 => 0.0.136
- @vx/legend: 0.0.127 => 0.0.136
- @vx/marker: 0.0.131 => 0.0.136
- @vx/mock-data: 0.0.135 => 0.0.136
- @vx/network: 0.0.135 => 0.0.136
- @vx/pattern: 0.0.127 => 0.0.136
- @vx/point: 0.0.127 => 0.0.136
- @vx/responsive: 0.0.127 => 0.0.136
- @vx/scale: 0.0.127 => 0.0.136
- @vx/shape: 0.0.131 => 0.0.136
- @vx/text: 0.0.127 => 0.0.136
- @vx/tooltip: 0.0.134 => 0.0.136
- @vx/voronoi: 0.0.127 => 0.0.136
- @vx/zoom: 0.0.127 => 0.0.136