@vx/shape is a part of the vx library, which is a collection of reusable low-level visualization components. The @vx/shape package provides a set of components for creating various shapes and paths in SVG, which can be used to build complex visualizations like charts and graphs.
Bar
The Bar component allows you to create bar charts. The code sample demonstrates how to create a simple bar chart using SVG rectangles.
const Bar = ({ data }) => (
<svg width={500} height={500}>
{data.map((d, i) => (
<rect
key={i}
x={i * 30}
y={500 - d}
width={25}
height={d}
fill="teal"
/>
))}
</svg>
);LinePath
The LinePath component is used to create line charts. The code sample shows how to create a simple line chart using an SVG path element.
const LinePath = ({ data }) => (
<svg width={500} height={500}>
<path
d={`M ${data.map((d, i) => `${i * 30},${500 - d}`).join(' L ')}`}
fill="none"
stroke="blue"
/>
</svg>
);Pie
The Pie component is used to create pie charts. The code sample demonstrates how to create a simple pie chart using SVG path elements.
const Pie = ({ data }) => (
<svg width={500} height={500}>
{data.map((d, i) => (
<path
key={i}
d={`M250,250 L${250 + 200 * Math.cos(2 * Math.PI * i / data.length)},${250 + 200 * Math.sin(2 * Math.PI * i / data.length)} A200,200 0 0,1 ${250 + 200 * Math.cos(2 * Math.PI * (i + 1) / data.length)},${250 + 200 * Math.sin(2 * Math.PI * (i + 1) / data.length)} Z`}
fill={d.color}
/>
))}
</svg>
);d3-shape is a part of the D3.js library that provides functions for creating complex shapes and paths. It is more comprehensive and flexible compared to @vx/shape, but also more complex to use.
react-vis is a React-based visualization library that provides a set of high-level components for creating charts and graphs. It is easier to use compared to @vx/shape but offers less customization and flexibility.
Victory is another React-based library for creating data visualizations. It provides a wide range of pre-built components for different types of charts and is easier to use compared to @vx/shape, but it may not offer the same level of customization.
Shapes are the core elements of vx. Most of what you see on the screen, like lines, bars, and
areas are all made with shape primitives.
npm install --save @vx/shape
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 shape
The npm package @vx/shape receives a total of 23,052 weekly downloads. As such, @vx/shape popularity was classified as popular.
We found that @vx/shape 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.