@visx/glyph

What is @visx/glyph?

@visx/glyph is a part of the VisX library, which provides a collection of low-level visualization components for building custom visualizations in React. The @visx/glyph package specifically focuses on rendering various types of glyphs (shapes) such as circles, lines, and custom SVG paths, which can be used to represent data points in a visualization.

What are @visx/glyph's main functionalities?

Circle Glyph

This feature allows you to render a circle glyph at a specified position with a given size and color. The example demonstrates how to create a blue circle glyph centered at (250, 250) with a size of 100.

import { GlyphCircle } from '@visx/glyph';

const CircleGlyphExample = () => (
  <svg width={500} height={500}>
    <GlyphCircle left={250} top={250} size={100} fill="blue" />
  </svg>
);

Line Glyph

This feature allows you to render line glyphs, which are essentially dots that can be connected to form lines. The example demonstrates how to create three dots at different positions with different colors.

import { GlyphDot } from '@visx/glyph';

const LineGlyphExample = () => (
  <svg width={500} height={500}>
    <GlyphDot left={100} top={100} size={50} fill="red" />
    <GlyphDot left={200} top={200} size={50} fill="green" />
    <GlyphDot left={300} top={300} size={50} fill="blue" />
  </svg>
);

Custom SVG Path Glyph

This feature allows you to render custom SVG path glyphs. The example demonstrates how to create a custom path glyph with a specified SVG path string.

import { Glyph } from '@visx/glyph';

const CustomPathGlyphExample = () => (
  <svg width={500} height={500}>
    <Glyph top={250} left={250} size={100} fill="purple">
      {({ path }) => (
        <path d={path('M10 10 H 90 V 90 H 10 Z')} />
      )}
    </Glyph>
  </svg>
);

Other packages similar to @visx/glyph

d3-shape

d3-shape is a part of the D3.js library that provides functions for creating and manipulating shapes such as lines, arcs, and polygons. It is more low-level compared to @visx/glyph and requires more manual setup, but offers greater flexibility and control over the shapes.

react-spring

react-spring is a spring-physics-based animation library for React that can be used to animate shapes and other elements. While it is not specifically focused on glyphs, it can be used in conjunction with SVG elements to create animated visualizations.

victory

Victory is a collection of composable React components for building interactive data visualizations. It provides higher-level abstractions for creating charts and graphs, including support for various types of glyphs. It is more opinionated and easier to use out-of-the-box compared to @visx/glyph.

README

@visx/glyph

Glyphs are small marks or symbols that you can use in your charts. Example: https://airbnb.io/visx/glyphs

Installation

npm install --save @visx/glyph

Changelog

v3.12.0 (2024-11-07)

:rocket: Enhancements

• feat(sankey): add @visx/sankey #1880

:memo: Documentation

• Fix small error in the code example in the "Theming" section #1863

:trophy: Contributors

• jacksonhardaker
• maurer2