@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.
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)); // 250Band 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')); // 110Ordinal 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))); // 50d3-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 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 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.
npm install --save @vx/scale
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
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} />;
});
Example:
const scale = Scale.scaleBand({
/*
range,
round,
domain,
padding,
nice = false
*/
});
Example:
const scale = Scale.scaleLinear({
/*
range,
round,
domain,
nice = false,
clamp = false,
*/
});
Example:
const scale = Scale.scaleLog({
/*
range,
round,
domain,
base,
nice = false,
clamp = false,
*/
});
Example:
const scale = Scale.scaleOrdinal({
/*
range,
domain,
unknown,
*/
});
Example:
const scale = Scale.scalePoint({
/*
range,
round,
domain,
padding,
align,
nice = false,
*/
});
Example:
const scale = Scale.scalePower({
/*
range,
round,
domain,
exponent,
nice = false,
clamp = false,
*/
});
Example:
// No need to set the exponent, It is always 0.5
const scale = Scale.scaleSqrt({
/*
range,
round,
domain,
nice = false,
clamp = false,
*/
});
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,
*/
});
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.
v0.0.199
rangeRound field in the input of scaleLinear(), scaleLog(), scalePoint(), scalePower(), scaleSqrt(), scaleTime() and scaleUtc(). #766
Instead of
scaleLinear({ rangeRound: xxx })
scaleLinear({ range: xxx, round: true });
ticks and tickFormat in the input of scaleQuantize(). It was not really doing anything anyway as both scale.ticks() and scale.tickFormat() do not mutate the scale. #766scale.type field that was attached to the d3 scales. #766@vx/grid components now accept D3 Scale as generic type instead of ScaleInput. Developers should not expect to specify this generic type as it can be inferred from the passed scale. #775GridColumnProps => GridColumnsProps (+s) to match GridRowsProps. #787<Marker /> implementation of a Line and some Text. #783AnyD3Scale, InferD3ScaleOutput, InferD3ScaleDiscreteInput, InferD3ScaleThresholdInput and ScaleInput. Add new utilities functions: getTicks, coerceNumber and toString. #773@vx/legend shapes from the index for convenience / non-deep imports. #772children prop to GridRows + GridColumns to support animated rendering. #787<BarRounded /> shape. #774d3-shape and export as part of vx/shape (arc, area, line, pie, radialLine),
similar to vx/scale has factories for d3-scale. #776SplitLinePath component to @vx/shape that allows you to create a line path split into multiple smaller line paths that can be styled independently. #778vx/scale and vx/axis. More fields passed to child render props of Axis. #773Axis is refactored to accept a ticksComponent which allows us to animate them. #779values to tickFormat(value, index, values) so that format logic can more easily leverage all ticks (because numTicks is approximate, lib consumers do not know how many tick values exist a priori). #779<Marker /> that matches actual SVG <marker>. #783<MarkerArrow />, <MarkerCross />, <MarkerX />, <MarkerCircle />, <MarkerLine />. #783@vx/react-spring that includes react-spring as a peerDep and can be a home for things that depend on react-spring. #779<AnimatedAxis /> and <AnimatedTicksRender /> in @vx/react-spring. #779vx-demo/axis demo to use <AnimatedAxis />. #779AnimatedGridRows + AnimatedGridColumns. #787AnimatedTicks/useAnimatedTicksConfig to spring-configs/useAnimatedLineTransitionConfig so it can power both animated tick + grid lines. #787animationTrajectory=outside | inside | min | max to AnimatedAxis and AnimatedGridRows/Columns. #787enableDebounceLeadingCall prop being passed into div. #763vx/scale package has 100% test coverage. #766<Marker>. #783/axis demo to include AnimatedGrid* and a animationTrajectory config. #787 - @vx/annotation: 0.0.198 => 0.0.199
- @vx/axis: 0.0.198 => 0.0.199
- @vx/bounds: 0.0.198 => 0.0.199
- @vx/brush: 0.0.198 => 0.0.199
- @vx/chord: 0.0.198 => 0.0.199
- @vx/clip-path: 0.0.198 => 0.0.199
- @vx/curve: 0.0.198 => 0.0.199
- @vx/demo: 0.0.198 => 0.0.199
- @vx/drag: 0.0.198 => 0.0.199
- @vx/event: 0.0.198 => 0.0.199
- @vx/geo: 0.0.198 => 0.0.199
- @vx/glyph: 0.0.198 => 0.0.199
- @vx/gradient: 0.0.198 => 0.0.199
- @vx/grid: 0.0.198 => 0.0.199
- @vx/group: 0.0.198 => 0.0.199
- @vx/heatmap: 0.0.198 => 0.0.199
- @vx/hierarchy: 0.0.198 => 0.0.199
- @vx/legend: 0.0.198 => 0.0.199
- @vx/marker: 0.0.198 => 0.0.199
- @vx/mock-data: 0.0.198 => 0.0.199
- @vx/network: 0.0.198 => 0.0.199
- @vx/pattern: 0.0.198 => 0.0.199
- @vx/point: 0.0.198 => 0.0.199
- @vx/react-spring: 0.0.198 => 0.0.199
- @vx/responsive: 0.0.198 => 0.0.199
- @vx/scale: 0.0.198 => 0.0.199
- @vx/shape: 0.0.198 => 0.0.199
- @vx/stats: 0.0.198 => 0.0.199
- @vx/text: 0.0.198 => 0.0.199
- @vx/threshold: 0.0.198 => 0.0.199
- @vx/tooltip: 0.0.198 => 0.0.199
- @vx/voronoi: 0.0.198 => 0.0.199
- @vx/vx: 0.0.198 => 0.0.199
- @vx/xychart: 0.0.0 => 0.0.199 (private)
- @vx/zoom: 0.0.198 => 0.0.199
FAQs
vx scale
The npm package @vx/scale receives a total of 113,552 weekly downloads. As such, @vx/scale popularity was classified as popular.
We found that @vx/scale demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.