![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
@vx/scale
Advanced tools
Changelog
v0.0.199
rangeRound
field in the input of scaleLinear()
, scaleLog()
, scalePoint()
, scalePower()
, scaleSqrt()
, scaleTime()
and scaleUtc()
. #766
Instead of
scaleLinear({ rangeRound: xxx })
Do this instead
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
Readme
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.
FAQs
vx scale
The npm package @vx/scale receives a total of 76,880 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
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.