# f5/unovis

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/f5-unovis).**

2,730 stars · 61 forks · TypeScript · apache-2.0

## Links

- GitHub: https://github.com/f5/unovis
- Homepage: https://unovis.dev
- awesome-repositories: https://awesome-repositories.com/repository/f5-unovis.md

## Topics

`angular` `charts` `data-visualization` `graphs` `maps` `react` `solid` `svelte` `vue`

## Description

Unovis is a modular SVG and Canvas data visualization library used to build interactive charts, maps, and network graphs. It provides a framework-agnostic set of primitives for creating data dashboards and specialized visualizations.

The library is distinguished by its dedicated toolkits for different visualization domains, including an XY charting library for coordinated plots, a network graph framework for relational data, and a geospatial visualization toolkit for TopoJSON-based mapping.

Its capability surface covers a wide range of data representations, including linear, area, and bar charts, as well as circular diagrams and Sankey flow maps. It includes specialized features for geospatial rendering such as point clustering, geographic heatmaps, and animated data flow. Network visualizations are supported through various layout algorithms, including force-directed, circular, and hierarchical systems.

Visual customization is managed through CSS variable styling and custom SVG definitions for advanced effects and patterns.

## Tags

### Data & Databases

- [XY Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/xy-charts.md) — Provides a comprehensive framework for rendering line, area, bar, and scatter plots using a shared coordinate system. ([source](https://unovis.dev/docs/category/component-reference))
- [Interactive Data Charting](https://awesome-repositories.com/f/data-databases/interactive-data-charting.md) — Transforms datasets into interactive visual charts, maps, and network graphs for frontend applications.
- [Bar Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts.md) — Provides visual widgets for representing categorical data as bar charts. ([source](https://unovis.dev/gallery))
- [Stacked and Grouped Bar Plots](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts/stacked-and-grouped-bar-plots.md) — Renders bar charts that support grouping and stacking for comparative data display. ([source](https://unovis.dev/docs/xy-charts/GroupedBar))
- [Animated Flow Visualizations](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/animated-visualizations/animated-flow-visualizations.md) — Draws links between map points with animated particles to visualize directional relationships. ([source](https://unovis.dev/docs/maps/TopoJSONMap))
- [Chart Annotations](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/custom-data-line-visualization/chart-annotations.md) — Provides custom labels, lines, and shapes such as axes and legends to highlight chart areas. ([source](https://unovis.dev/docs/category/component-reference))
- [Proportional Data Plots](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/proportional-data-plots.md) — Displays proportional data distributions at specific map points using pie or donut diagrams. ([source](https://unovis.dev/docs/maps/LeafletMap))
- [Ordinal Axis Mapping](https://awesome-repositories.com/f/data-databases/data-mapping/coordinate-system-mapping/visualization-coordinate-mapping/chart-axis-mappings/ordinal-axis-mapping.md) — Renders non-numeric categories on a chart axis by mapping data indices to specific labels. ([source](https://unovis.dev/docs/guides/tips-and-tricks))
- [Interactive Chart Overlays](https://awesome-repositories.com/f/data-databases/interactive-data-charting/interactive-chart-overlays.md) — Provides interactive overlays including annotations, synced crosshairs, and brush selectors for data filtering. ([source](https://unovis.dev/gallery))
- [Missing Value Visual Representations](https://awesome-repositories.com/f/data-databases/missing-value-visual-representations.md) — Controls how missing or null data points are visually represented in charts using gaps or dashed lines. ([source](https://unovis.dev/docs/xy-charts/Line))

### Graphics & Multimedia

- [SVG Data Visualization](https://awesome-repositories.com/f/graphics-multimedia/svg-data-visualization.md) — Serves as a modular library for building interactive charts, maps, and network graphs using SVG and Canvas.
- [Geospatial Data Mapping](https://awesome-repositories.com/f/graphics-multimedia/geospatial-data-mapping.md) — Visualizes geographic information using TopoJSON and vector tiles to create choropleths, heatmaps, and flow maps.
- [Graph Node Visualizations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/custom-shape-rendering/graph-node-visualizations.md) — Visualizes nodes and links using various shapes and labels to represent complex relational structures. ([source](https://unovis.dev/docs/networks-and-flows/Graph))
- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Utilizes scalable vector graphics to represent and display visualization primitives and custom visual styles.
- [Network Flow Visualizers](https://awesome-repositories.com/f/graphics-multimedia/network-flow-visualizers.md) — Illustrates the volume and direction of movement between nodes using Sankey diagrams and flow maps. ([source](https://unovis.dev/gallery))
- [Scatter Plot Rendering](https://awesome-repositories.com/f/graphics-multimedia/scatter-plot-rendering.md) — Plots X/Y data points on a two-dimensional coordinate system with customizable markers and styles. ([source](https://unovis.dev/docs/xy-charts/Scatter))
- [Geospatial Visualizations](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/geospatial-visualizations.md) — Provides a comprehensive toolkit for geospatial visualizations, including TopoJSON maps and geographic heatmaps.
- [Data Visualization Scales](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/mapping-libraries/data-visualization-scales.md) — Provides mapping functions that translate abstract data domains into visual ranges for chart dimensions. ([source](https://unovis.dev/docs/containers/XY_Container))
- [Scale-Based Coordinate Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/scale-based-coordinate-mappings.md) — Provides systems that translate abstract data values into pixel coordinates using configurable mathematical scales.
- [Area Charts](https://awesome-repositories.com/f/graphics-multimedia/chart-geometry-renderers/area-charts.md) — Renders data as a series of connected points or filled areas to show cumulative totals. ([source](https://unovis.dev/gallery))
- [Geospatial Overlays](https://awesome-repositories.com/f/graphics-multimedia/composite-visual-overlays/geospatial-overlays.md) — Renders custom TopoJSON layers as spatial overlays on top of base maps to display boundaries and shapes. ([source](https://unovis.dev/docs/maps/LeafletMap))
- [Edge Flow Animations](https://awesome-repositories.com/f/graphics-multimedia/edge-flow-animations.md) — Adds arrows and animated particles to network links to visualize active traffic or data flow. ([source](https://unovis.dev/docs/networks-and-flows/Graph))
- [Raster and Vector Tile Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/tile-map-renderers/raster-and-vector-tile-renderers.md) — Renders detailed geographical base maps using raster and vector tile sources. ([source](https://unovis.dev/docs/maps/LeafletMap))
- [Interactive Map Visualizations](https://awesome-repositories.com/f/graphics-multimedia/interactive-map-visualizations.md) — Implements interactive map visualizations using TopoJSON with support for projections and zooming. ([source](https://unovis.dev/docs/maps/TopoJSONMap))
- [Geographic Point Clustering](https://awesome-repositories.com/f/graphics-multimedia/point-cloud-clustering/geographic-point-clustering.md) — Groups nearby geographic map points into aggregate clusters that expand during zooming. ([source](https://unovis.dev/docs/maps/TopoJSONMap))
- [Point Maps](https://awesome-repositories.com/f/graphics-multimedia/point-cloud-clustering/map-point-clustering/point-maps.md) — Renders geographical coordinates as a set of points on an interactive map. ([source](https://unovis.dev/docs/maps/LeafletMap))

### Programming Languages & Runtimes

- [Relationship Graph Visualizers](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures/relationship-graph-visualizers.md) — Maps complex connections between entities using force-directed, circular, or layered graph layouts and Sankey diagrams.
- [Hierarchical Tree Visualizers](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures/hierarchical-tree-visualizers.md) — Displays nodes in concentric layers to visualize nested hierarchical relationships. ([source](https://unovis.dev/docs/networks-and-flows/ChordDiagram))

### Scientific & Mathematical Computing

- [Network Graph Layouts](https://awesome-repositories.com/f/scientific-mathematical-computing/network-graph-layouts.md) — Provides diverse graph layout algorithms including force-directed, circular, concentric, and layered systems. ([source](https://unovis.dev/docs/networks-and-flows/Graph))
- [Frameworks](https://awesome-repositories.com/f/scientific-mathematical-computing/network-graph-layouts/frameworks.md) — Provides a full framework for visualizing complex relationships via force-directed, circular, and Sankey layouts.
- [Circular Layouts](https://awesome-repositories.com/f/scientific-mathematical-computing/network-graph-layouts/circular-layouts.md) — Implements circular layouts for network nodes to effectively illustrate connections between entities. ([source](https://unovis.dev/docs/networks-and-flows/ChordDiagram))

### Software Engineering & Architecture

- [Shared Coordinate Contexts](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/component-context-sharing/shared-coordinate-contexts.md) — Synchronizes multiple visualization components by linking them to a single shared data context and axis scale.
- [Diagram Link Styles](https://awesome-repositories.com/f/software-engineering-architecture/diagram-link-styles.md) — Configures network links with textual labels and semi-transparent bands to emphasize connections. ([source](https://unovis.dev/docs/networks-and-flows/Graph))

### User Interface & Experience

- [Multi-Chart Coordination](https://awesome-repositories.com/f/user-interface-experience/chart-components/multi-chart-coordination.md) — Manages shared data contexts and coordinate systems to synchronize multiple chart components within a single view. ([source](https://unovis.dev/docs/containers/XY_Container))
- [Circular Visualizations](https://awesome-repositories.com/f/user-interface-experience/dashboard-widgets/circular-visualizations.md) — Provides D3-based representation of proportional or hierarchical data using donut charts, chord diagrams, and sunbursts. ([source](https://unovis.dev/gallery))
- [Line Charts](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/specific-chart-types/line-charts.md) — Implements line charts to visualize data trends over time or categories. ([source](https://unovis.dev/docs/quick-start))
- [Force-Directed Layouts](https://awesome-repositories.com/f/user-interface-experience/element-positioning/layout-engines/force-directed-layouts.md) — Implements layout systems that use physical simulations of attraction and repulsion to position network nodes.
- [Geographic Projections](https://awesome-repositories.com/f/user-interface-experience/grid-systems/coordinate-transformation-utilities/geographic-projections.md) — Implements algorithms for transforming spherical earth coordinates into flat two-dimensional planes for map rendering.
- [Visualization Primitives](https://awesome-repositories.com/f/user-interface-experience/visualization-primitives.md) — Offers a framework-agnostic set of primitives for building custom dashboards with synchronized interactive elements.
- [Geographic Flow Particles](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/particle/geographic-flow-particles.md) — Provides high-performance canvas-layered particle animations to visualize directional flow between geographic points.
- [Chart Axis Rendering](https://awesome-repositories.com/f/user-interface-experience/chart-axis-rendering.md) — Implements logic for rendering scaled coordinate systems and formatted labels for data visualization axes. ([source](https://unovis.dev/docs/auxiliary/Axis))
- [Donut Charts](https://awesome-repositories.com/f/user-interface-experience/dashboard-widgets/donut-charts.md) — Renders circular statistical graphics to represent proportional data as donut charts. ([source](https://unovis.dev/docs/misc/Donut))
- [Diagram Viewport Management](https://awesome-repositories.com/f/user-interface-experience/diagram-viewport-management.md) — Implements scaling and shifting of the diagram view while preserving the visual consistency of labels and strokes. ([source](https://unovis.dev/docs/networks-and-flows/Sankey))
- [Graph Interactions](https://awesome-repositories.com/f/user-interface-experience/graph-interactions.md) — Supports interactive panning, zooming, and node dragging, including a brush tool for mass movement. ([source](https://unovis.dev/docs/networks-and-flows/Graph))
- [Interactive Coordinate Overlays](https://awesome-repositories.com/f/user-interface-experience/interactive-data-renderers/interactive-coordinate-overlays.md) — Provides interactive vertical lines and markers that follow user interaction to pinpoint specific data values. ([source](https://unovis.dev/docs/auxiliary/Crosshair))
- [Interactive Tooltips](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-tooltips.md) — Ships interactive tooltip components that display custom text content tied to a crosshair cursor. ([source](https://unovis.dev/docs/auxiliary/Crosshair))
- [Map Element Interaction Systems](https://awesome-repositories.com/f/user-interface-experience/map-element-interaction-systems.md) — Implements event-driven mechanisms for triggering custom callbacks on map point selection and interaction. ([source](https://unovis.dev/docs/maps/LeafletMap))
- [Map View Controllers](https://awesome-repositories.com/f/user-interface-experience/map-view-controllers.md) — Provides programmatic control over the map viewport, including bounds, panning, zooming, and automatic data-fitting. ([source](https://unovis.dev/docs/maps/LeafletMap))
- [CSS Variable Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems.md) — Leverages native CSS variables for theme propagation and dynamic property management of visualization components.

### Part of an Awesome List

- [Multi-Dimensional Charting](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization/multi-dimensional-charting.md) — Builds complex XY charts and proportional diagrams to visualize trends and relationships between multiple variables.
- [GPS Heatmaps](https://awesome-repositories.com/f/awesome-lists/data/heatmap-visualization/gps-heatmaps.md) — Converts dense collections of geographic points into blurred heatmaps to visualize concentration and density. ([source](https://unovis.dev/docs/maps/TopoJSONMap))
- [Data Visualization](https://awesome-repositories.com/f/awesome-lists/data/data-visualization.md) — Modular data visualization framework for multiple platforms.

### DevOps & Infrastructure

- [Sankey Diagram Generators](https://awesome-repositories.com/f/devops-infrastructure/automation-orchestration/task-execution-frameworks/workflow-engines/visual-data-flow-systems/sankey-diagram-generators.md) — Renders Sankey flow diagrams connecting multiple nodes to visualize the volume of data movement. ([source](https://unovis.dev/docs/networks-and-flows/Sankey))