@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

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

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.189

:boom: Breaking Changes

• [shape] <Arc /> and <Pie pieValue={} /> props now check for !== undefined. Before 0 wouldn't set the prop to 0 because if (0) is false. This is only a breaking change if you were passing 0 before and happy with <Arc /> treating that as undefined and using d3.arc() defaults. #464
• [zoom] make wheel event active by default. fixes Chrome 73 scroll intervention warning. #456
  • To keep the default behavior before Chrome 73 and remove console warnings in Chrome 73, remove:

    <MyComponent
    - onWheel={zoom.handleWheel}
    />
    

  • To make the onWheel events passive, add:

    <Zoom
    + passive={true}
    >
      {zoom => {
        return (
          <MyComponent
    +      onWheel={zoom.handleWheel}
          /> 
        );
      }}
    </Zoom>
    

:rocket: Enhancements

• [responsive][shape][text][geo] update innerRef propType to include PropType.object. #446

:bug: Bug Fix

• [text] move Babel dependencies to dev only. #461
• [shape] <Arc /> now respects 0 as an allowed prop value. #464
• [shape] <Pie /> pieValue now respects 0 as an allowed prop value. #464

:memo: Documentation

• [docs] update docs. #446
• [glyph] fixes outdated @vx/glyph examples in the readme docs. #454

:house: Internal

• [internal] fix jest code coverage, update jest, move to babel.config.js + jest.config.js. #439
• [internal] babel preset env target explorer => ie. #446
• [internal] babel preset env target remove ucandroid. #446
• [shape] add more <Arc /> tests. #464
• [shape] convert Arc.test from CRLF => LF. #464

:trophy: Contributors

• hshoff
• milesj

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