3.12.0 • Published 18 days ago

@visx/scale v3.12.0

Weekly downloads
26,307
License
MIT
Repository
github
Last release
18 days ago

@visx/scale

Installation

npm install --save @visx/scale

Overview of scales

The @visx/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 visx 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
  range: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right
  round: true,
});

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
  range: [graphHeight, 0],
  round: true,
});

// ...

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,
    round,
    domain,
    padding,
    nice = false
  */
});

Linear scale

Original d3 docs

Example:

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

Log scale

Original d3 docs

Example:

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

Important note: As log(0) = -∞, a log scale domain must be strictly-positive or strictly-negative; the domain must not include or cross zero.

Radial scale

Original d3 docs

Example:

const scale = Scale.scaleRadial({
  /*
    range,
    round,
    domain,
    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,
    round,
    domain,
    padding,
    align,
    nice = false,
  */
});

Power scale

Original d3 docs

Example:

const scale = Scale.scalePower({
  /*
    range,
    round,
    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,
    round,
    domain,
    nice = false,
    clamp = false,
  */
});

Time scale

Original d3 docs

Example:

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

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

Example:

const scale = Scale.scaleUtc({
  /*
    range,
    round,
    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 visx'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 '@visx/scale';
import { schemeSet1 } from 'd3-scale-chromatic';

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

This generates a color scale with the following colors:

d3-scale-chromatic schemeSet1

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

@graphique/gg@graphique/geom-smoothpan-lyrahce-saas@everything-registry/sub-chunk-987@persoonlijke-regelingen-assistent/componentsterriajswidgets_nntcvz-trade-tsrick-ui-packageleylinesjskey-esg-component-libraryhx-chartshp-fabricinfografikareact-d-componentui-kit-roi4turniloturn-to-chart@apia/charts@arkitema/visualizations@asphalt-react/data-viz@atlaskit/charts@baffinbay/bchart@blockchain-com/constellation@carnallfarrar/cf-react-chart-library@carnallfarrar/fitzroy@cdc/chart@cdc/waffle-chart@centreon/ui@21epub-ui/charts@actnowcoalition/ui-components@actnowcoalition/ui-components-test@actnowcoalition/actnow.js@diamondlightsource/ui-components@h5web/lib@gsmlg/visx@groww-tech/react-charts@foo-software/react-charts-time-series@eeacms/search@frontify/fondue-charts@functionland/component-library@functionland/fx-components@grafarg/ui@looker/visualization-playground@looker/visualizations-visx@luminati-io/uikit@metyis-ds/donut@motor-js/core@maticoapp/matico_components@neuvernetzung/design-system@nightvisi0n/terriajs@eqworks/chart-system@equinor/ioc-common-frontend@eeacms/volto-searchlib@dynatrace/strato-components-preview@metabase/embedding-sdk-react@mondra/ui-components@intoto-dev/bibliotheca-graph@itsobvioustech/embed@imbertech/chad-ui@pplsohampatel/terriajs@rango-dev/charts@quellen-sol/xychart@sanity-visx/ui@stepfinance/xychart@pokt-foundation/pocket-blocks@penumbra-zone/ui@spotify/backstage-plugin-insights@siafoundation/design-system@revolut/ui-kit@spscommerce/ds-react-charts@dkkoval/react-ua-map@cutting/website@persoonlijke-regelingen-assistent/components-react@robocorp/ds@zalastax/nolb-_vis@wonderflow/charts@visx/axis@visx/brush@visx/demo@visx/grid@visx/react-spring@visx/stats@visx/xychart@visx/visx@visx/shape@visx/legend@urkellabs/uchl@urkel/uchl@totango-app-team/totango-uiclever-audit-libraryclever-reactchatjet-aicolumns-graphdiamond-componentsetchartevictions-dashboardfurya-chain-web
3.12.0

18 days ago

3.3.0

1 year ago

3.5.0

1 year ago

3.2.0

1 year ago

3.2.0-alpha.0

1 year ago

2.17.0

2 years ago

2.18.0

2 years ago

3.0.0

2 years ago

2.17.0-alpha.0

2 years ago

2.2.2

3 years ago

2.1.2

3 years ago

2.1.0

3 years ago

1.14.0

3 years ago

1.11.1

4 years ago

1.7.0

4 years ago

1.6.1

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.3.0-alpha.0

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago

0.0.200-alpha.0

4 years ago