repository·master·Indexed 12 days ago
https://github.com/airbnb/visxA collection of reusable, low-level visualization components that combine D3's mathematical capabilities with React's declarative DOM management. It includes specialized packages for accessibility (@visx/a11y), annotations (@visx/annotation), axes (@visx/axis), bounding rect utilities (@visx/bounds), and brushing (@visx/brush).
@visx/wordcloud package provides components for creating word clouds. Word clouds are visual representations of text data where the importance or value of each word is indicated by its font size or color.@visx/drag package provides React components and hooks designed to make items within an interface or a chart draggable.The @visx/geo package provides components for rendering geographic projections. You can use the <Projection /> component to render several preset projections or use specialized convenience components.
When using the <Projection /> component, you can specify one of the following via the projection prop:
orthographicalbersalbersUsamercatornaturalEarthequalEarth<Projection />: Renders preset projections and supports configurable <Graticule /> lines.<Mercator />: A convenience component for Mercator projections.<CustomProjection />: Used for implementing full custom projections.<Graticule />: Used for rendering graticule lines (lines of latitude and longitude).An axis component in visx consists of a line with ticks, tick labels, and an axis label to help interpret graphs.
You have two ways to implement axes:
<Axis /> element as a base.Note: If you require animated ticks, you can use the AnimatedAxis variant provided by the @visx/react-spring package.
@visx/threshold package is used to create Difference Charts in React. These charts are designed to highlight the delta (difference) between two line series.Unlike other low-level visx packages, @visx/xychart provides a high-level API for creating x,y (cartesian coordinate) charts. It abstracts common visualization engineering complexities while remaining highly expressive through modularized React.context layers for theme, canvas dimensions, scales (x/y/color), data, events, and tooltips.
Out-of-the-box support includes:
<*Series /> types (e.g., lines, bars) with optional animation.<Axis /> (animated or non-animated).<Grid /> (animated or non-animated).<Annotation /> (animated or non-animated).<Tooltip />.themeing.@visx/chord package provides components for creating chord diagrams. Chord diagrams are used to visualize directed relationships among a group of entities in a radial layout.@visx/delaunay package is a wrapper around d3-delaunay that provides React-specific utilities. It allows you to partition a two-dimensional plane into regions based on input points. Each region represents all points closer to its specific input point than to any other. This is commonly used to create invisible interaction layers to make small data points easier to hover or click.The @visx/a11y package is a semantics layer rather than a chart framework. It does not ship a complete chart component or impose a specific SVG structure. Instead, it provides spreadable props, generated descriptions, and React helpers that you attach to your existing visx primitives.
Key design principles:
useId() only when id is omitted.pointDescriptionThreshold.keyboardNavEnabled controls roving focus for point-by-point exploration.The package provides two ways to manage tooltip state (visibility, position, and data):
useTooltip() (Recommended for Functional Components): Returns an object containing state and control functions. Note: You must wrap your component in an element (e.g., div) with position: relative for correct positioning, as this HOC does not do it automatically.withTooltip(BaseComponent [, containerProps [, renderContainer]]) (Recommended for Class Components): A Higher-Order Component that wraps your component in a div with relative positioning by default and injects tooltip props.Both methods expose the following properties/functions:
| Name | Type | Description |
|---|---|---|
showTooltip | func | Call with ({ tooltipData, tooltipLeft, tooltipTop }) to open and set state. |
hideTooltip | func | Closes the tooltip. |
tooltipOpen | bool | Current visibility state. |
tooltipLeft | number | The horizontal position passed to showTooltip. |
tooltipTop | number | The vertical position passed to showTooltip. |
tooltipData | any | The data passed to showTooltip for rendering. |
updateTooltip | func | Call with ({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData }) to update state. |