# mozilla/metrics-graphics

**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/mozilla-metrics-graphics).**

7,403 stars · 463 forks · TypeScript

## Links

- GitHub: https://github.com/mozilla/metrics-graphics
- Homepage: http://metricsgraphicsjs.org
- awesome-repositories: https://awesome-repositories.com/repository/mozilla-metrics-graphics.md

## Description

metrics-graphics is a data visualization library and declarative graphics framework designed to create principled data graphics and layouts. It functions as a statistical graphics engine that maps raw data to geometric shapes and structured objects to render complex, data-driven layouts.

The toolkit specializes in rendering time-series data through line charts and scatterplots using a consistent layout system. It also provides capabilities for statistical distribution mapping, including the creation of rug plots to represent one-dimensional data density.

The system covers a broad surface of data visualization engineering, including custom chart layout design and declarative data visualization. It utilizes a compositional model to translate structured specifications into final pixels.

## Tags

### Data & Databases

- [Time-Series Visualizers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/time-series-visualizers.md) — Provides a comprehensive toolkit for rendering time-series data as line charts, scatterplots, and histograms.
- [Statistical Plotting Libraries](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/statistical-plotting-libraries.md) — Maps raw data to geometric shapes and statistical distributions like rug plots and histograms.
- [Visualization Engines](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/visualization-engines.md) — Builds principled charts and layouts to represent complex datasets in a visual format.
- [Data Visualization Libraries](https://awesome-repositories.com/f/data-databases/data-engineering/data-visualization-libraries.md) — Provides a library for creating principled data graphics and layouts optimized for concise representations of complex datasets.
- [Rug Plots](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/statistical-plotting-libraries/plot-axis-customizers/rug-plots.md) — Provides the capability to represent data point density along a specific axis using rug plots. ([source](https://github.com/mozilla/metrics-graphics#readme))

### Graphics & Multimedia

- [Geometric Data Mappings](https://awesome-repositories.com/f/graphics-multimedia/geometric-data-mappings.md) — Translates input arrays into geometric shapes like lines or rectangles based on defined mapping rules.
- [Data-Driven Shape Generators](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/data-driven-shape-generators.md) — Builds complex visual layouts by mapping raw data arrays to geometric shapes and screen coordinates.
- [Declarative Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/declarative-rendering.md) — Separates visual properties from rendering implementation by translating structured object definitions into final pixels.
- [Declarative Visualization Grammars](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/declarative-visualization-grammars.md) — Defines visual properties through structured specifications that a rendering engine translates into pixels.
- [Scale-Based Coordinate Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/scale-based-coordinate-mappings.md) — Maps raw data values to screen coordinates using linear and logarithmic scales to ensure geometric accuracy.
- [Axis-Relative Positioning](https://awesome-repositories.com/f/graphics-multimedia/axis-relative-positioning.md) — Implements a system for calculating marker and label placements relative to data boundaries to maintain alignment across chart types.
- [Hierarchical Layouts](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/layout-algorithms/hierarchical-layouts.md) — Organizes nested graphical elements into a parent-child structure to coordinate scaling and positioning across the canvas.

### User Interface & Experience

- [Chart Layout Components](https://awesome-repositories.com/f/user-interface-experience/chart-layout-components.md) — Creates precise and consistent data graphics using a compositional system of nested elements and axis-relative positioning.
- [Component Composition Patterns](https://awesome-repositories.com/f/user-interface-experience/component-composition-patterns.md) — Utilizes a compositional model that builds complex graphics by nesting small primitive elements into a hierarchical tree structure.
- [Declarative Visualization Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-visualization-frameworks.md) — Implements a compositional model that defines visual properties via structured objects to render complex data-driven layouts.
- [Data-Driven Layouts](https://awesome-repositories.com/f/user-interface-experience/view-layouts/data-driven-layouts.md) — Develops precise layouts for data-driven graphics that follow a consistent design system.
- [Statistical Distribution Visualizers](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/immediate-mode-plotting-libraries/statistical-distribution-visualizers.md) — Visualizes data density and frequency through rug plots and histograms to understand dataset spread.

### Part of an Awesome List

- [Game Engines](https://awesome-repositories.com/f/awesome-lists/devtools/game-engines.md) — Library for concise data graphics and layouts.