@vx/shape

What is @vx/shape?

@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.

What are @vx/shape's main functionalities?

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>
);

Other packages similar to @vx/shape

d3-shape

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

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

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.

README

@vx/shape

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.

Installation

npm install --save @vx/shape