@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
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({ })
const scale20 = Scale.schemeCategory20({ })
const scale20b = Scale.schemeCategory20b({ })
const scale20c = Scale.schemeCategory20c({ })
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({
});