React Vis

react-vis is a declarative, component-based React data visualization library. It provides a framework of reusable building blocks for rendering interactive charts and graphs by mapping raw data to visual attributes such as position, color, and size. The system leverages D3 for its scaling and layout logic.

The library is distinguished by its ability to handle complex data relationships, including hierarchical data via tree maps and circle packing, as well as multidimensional analysis using parallel axes and radar charts. It also supports network flow mapping to illustrate the volume and direction of data movement between nodes.

The framework covers general charting capabilities such as histograms and circular renderings, alongside interactive exploration tools like data brushing, crosshairs, and tooltips. It includes systems for axis configuration, localized time labels, and the generation of color and size legends.

Features

Interactive Visualization Rendering - Provides a framework for rendering dynamic, interactive charts and graphs that update in response to user input.

React Charting Libraries - Offers a comprehensive set of visualization components specifically designed for the React ecosystem.

Interactive Data Charting - Ships a framework of building blocks for transforming datasets into interactive charts like histograms and radar charts.

Interactive Data Exploration Tools - Provides interactive interfaces for analyzing data relationships using brushing, crosshairs, and tooltips.

SVG Data Visualization - Programmatically generates vector graphics via SVG to represent quantitative information and datasets.

Scale-Based Coordinate Mappings - Translates abstract data values into pixel coordinates and visual attributes using configurable mathematical scales.

Coordinate Systems - Implements utilities for defining and rendering mathematical axes and coordinate grids to position graphical marks.

Hierarchical Tree Visualizers - Provides visual components for rendering nested part-to-whole relationships through treemaps and circle packing.

Chart Axis Configurations - Provides tools for defining axis orientation, padding, and visual boundaries to align with specific data layouts.

Visualization Component Hierarchies - Provides a modular React component hierarchy specifically designed to map and manage data-driven visual states.

Charting Libraries - Provides a library for rendering interactive graphical representations of complex datasets using D3 for scaling logic.

Declarative Charting Components - Implements modular building blocks for constructing charts through a declarative mapping of data to visual attributes.

Visual Attribute Mappings - Transforms raw data properties into visual attributes like color, size, and angle during the render loop.

Multidimensional Array Visualization - Implements visual inspection and slicing of high-dimensional data using radar charts and parallel axes.

Pie Charts - Supports rendering pie and donut charts to display proportional data segments as slices of a whole.

Brush Interaction Utilities - Ships components that allow users to select and highlight specific ranges of data by dragging a selection brush.

Legend Management - Provides utilities for organizing and controlling data series labels within chart legends.

Color Legend Generators - Ships a system for displaying guides that map colors to specific data series.

Size Legend Generators - Provides visual guides for gradual changes in marker size to communicate data scale.

Data - Renders rectangles with custom edge positions on a continuous axis to represent data buckets.

Radar Chart Renderers - Renders multi-variable data as polygons on a circular grid to compare multiple dimensions.

Network Flow Visualizers - Illustrates the volume and direction of data movement between nodes using flow diagrams.

Parallel Axis Renderers - Renders multiple variables as parallel axes to enable rapid comparisons across several dimensions.

Flow Pattern Visualizers - Visualizes the volume and direction of flows between nodes in a network using origin-destination flow patterns.

Hierarchical Layouts - Implements algorithms for arranging tree-structured data into visual representations like circle packing.

Spatial Partitioning Layouts - Organizes nested data structures into spatial layouts such as treemaps or circle packing through recursive area division.

Visualization Layouts - Implements patterns for organizing the spatial arrangement of chart elements, legends, and axes.

Layout Interpolators - Calculates intermediate layout properties between data states to produce fluid visual transitions for chart elements.

Chart Animations - Provides tools for defining motion, duration, and easing to create fluid transitions between data states in visualizations.

Chart Crosshairs - Renders intersecting lines that follow the cursor to pinpoint precise values across multiple axes.

Data Point Tooltips - Shows labels or tooltips at specific coordinates to provide detailed information about data points.

Charts - Collection of data visualization components.

Charts and Visualization - Data Visualization Components

Charts - Listed in the “Charts” section of the Awesome React awesome list.

Data Visualization - Data visualization library based on React and D3.

Framework Integrations - Collection of React components for rendering visualizations.

Framework Specific Libraries - Visualization system for building composable React charts.

React Components - Collection of React components for building data visualizations.

Graphics and Animation - Data visualization components for web apps.

uberreact-vis

Features

Star history