What is @vx/scale?
@vx/scale is a part of the vx (now known as visx) collection of visualization components for React. It provides a set of utilities for creating scales, which are functions that map from an input domain to an output range. These scales are essential for creating visualizations as they help in mapping data values to visual properties like position, color, and size.
What are @vx/scale's main functionalities?
Linear Scale
Linear scales map a continuous input domain to a continuous output range. This is useful for creating visualizations where you need a direct proportional mapping, such as bar charts or scatter plots.
const scaleLinear = require('@vx/scale').scaleLinear;
const linear = scaleLinear({
domain: [0, 100],
range: [0, 500]
});
console.log(linear(50)); // 250
Band Scale
Band scales are useful for creating visualizations with discrete bands, such as bar charts with categorical data. They map a discrete domain to a continuous range with optional padding between bands.
const scaleBand = require('@vx/scale').scaleBand;
const band = scaleBand({
domain: ['A', 'B', 'C'],
range: [0, 300],
padding: 0.1
});
console.log(band('B')); // 110
Ordinal Scale
Ordinal scales map a discrete domain to a discrete range. This is useful for mapping categories to colors or other visual properties.
const scaleOrdinal = require('@vx/scale').scaleOrdinal;
const ordinal = scaleOrdinal({
domain: ['apple', 'banana', 'cherry'],
range: ['red', 'yellow', 'purple']
});
console.log(ordinal('banana')); // 'yellow'
Time Scale
Time scales are used for mapping dates and times to a continuous range. This is particularly useful for time series data.
const scaleTime = require('@vx/scale').scaleTime;
const time = scaleTime({
domain: [new Date(2020, 0, 1), new Date(2020, 11, 31)],
range: [0, 100]
});
console.log(time(new Date(2020, 5, 1))); // 50
Other packages similar to @vx/scale
d3-scale
d3-scale is a part of the D3.js library and provides similar functionality for creating scales. It is highly flexible and widely used in the data visualization community. Compared to @vx/scale, d3-scale is more mature and has a larger user base, but @vx/scale is designed to integrate more seamlessly with React applications.
victory
Victory is a collection of composable React components for building interactive data visualizations. It includes its own set of scale utilities similar to @vx/scale. Victory is more opinionated and provides higher-level components, making it easier to get started with, but potentially less flexible than @vx/scale for custom visualizations.
recharts
Recharts is another library for building charts with React. It provides built-in scales and is designed to be easy to use with a focus on simplicity and performance. While it offers less flexibility compared to @vx/scale, it is a good choice for quickly building standard chart types.
@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;
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({
});
Linear Scaling
Original d3 docs
Example:
const scale = Scale.scaleLinear({
});
Log Scaling
Original d3 docs
Example:
const scale = Scale.scaleLog({
});
Ordinal Scaling
Original d3 docs
Example:
const scale = Scale.scaleOrdinal({
});
Point Scaling
Original d3 docs
Example:
const scale = Scale.scalePoint({
});
Power Scaling
Original d3 docs
Example:
const scale = Scale.scalePower({
});
Time Scaling
Original d3 docs
Example:
const scale = Scale.scaleTime({
});
You also can scale time with Coordinated Universal Time via scaleUtc
.
Example:
const scale = Scale.scaleUtc({
});
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.