Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@visx/scale
Advanced tools
Changelog
Readme
npm install --save @visx/scale
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} />;
});
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,
*/
});
Important note: As log(0) = -∞, a log scale domain must be strictly-positive or strictly-negative; the domain must not include or cross zero.
Example:
const scale = Scale.scaleRadial({
/*
range,
round,
domain,
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 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:
There are a number of other categorical color schemes available, along with other continuous color schemes.
FAQs
visx scale
We found that @visx/scale demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).