https://github.com/metricsgraphics/metrics-graphics

A library optimized for concise and principled data graphics and layouts.
https://github.com/metricsgraphics/metrics-graphics

Last synced: 5 days ago
JSON representation

A library optimized for concise and principled data graphics and layouts.

• Host: GitHub
• URL: https://github.com/metricsgraphics/metrics-graphics
• Owner: metricsgraphics
• Created: 2014-05-01T18:25:52.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2022-05-31T15:05:59.000Z (over 2 years ago)
• Last Synced: 2024-12-31T02:04:32.901Z (12 days ago)
• Language: TypeScript
• Homepage: http://metricsgraphicsjs.org
• Size: 8.13 MB
• Stars: 7,450
• Watchers: 199
• Forks: 473
• Open Issues: 131
• Metadata Files:
  • Readme: README.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• awesome-d3 - metrics-graphics - Optimized for visualizing time-series data [line, scatter, area] (Charts)
• awesome-d3 - metrics-graphics - Optimized for visualizing time-series data [line, scatter, area] (Charts)
• awesome-d3 - metrics-graphics - Optimized for visualizing time-series data [line, scatter, area] (Charts)
• starred-awesome - metrics-graphics - A library optimized for concise and principled data graphics and layouts. (JavaScript)
• awesome-starred - metricsgraphics/metrics-graphics - A library optimized for concise and principled data graphics and layouts. (others)

README

        
[![MetricsGraphics Logo](.github/logo.svg)](https://metricsgraphicsjs.org)

[![BundlePhobia](https://badgen.net/bundlephobia/minzip/mg2)](https://bundlephobia.com/result?p=mg2) [![CodeClimate](https://api.codeclimate.com/v1/badges/dc22d28ce4d8bece4504/maintainability)](https://codeclimate.com/github/jens-ox/metrics-graphics/maintainability) [![Netlify Status](https://api.netlify.com/api/v1/badges/797ef16b-da9e-461f-851b-e50ddfd905ab/deploy-status)](https://app.netlify.com/sites/affectionate-benz-6e3cf9/deploys)

*MetricsGraphics* is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce common types of graphics in a principled and consistent way. The library currently supports line charts, scatterplots and histograms, as well as features like rug plots.

## Example

All you need to do is add an entry node to your document:

```html



```


Then, use the id to mount the chart:

```js

import LineChart from 'metrics-graphics'

new LineChart({

  data, // some array of data objects

  width: 600,

  height: 200,

  target: '#chart',

  area: true,

  xAccessor: 'date',

  yAccessor: 'value'

})

```

That's it!

![Sample Screenshot](.img/screenshot.png)

The raw data for this example can be found [here](packages/examples/src/assets/data/ufoSightings.js)

## Documentation

If you want to use *MetricsGraphics*, you can find the public API [here](packages/lib/docs/API.md).

If you want to extend *MetricsGraphics*, you can read up on the [components](packages/lib/docs/Components.md) and [utilities](packages/lib/docs/Utility.md).

## Development Setup

This project uses [Yarn Workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/). Please make sure that Yarn is installed.

```bash

# clone and setup

git clone https://github.com/metricsgraphics/metrics-graphics

cd metrics-graphics

yarn install

```

Run both the development setup of the library and the development setup of the examples

```bash

# inside packages/lib

yarn dev

# inside packages/examples

yarn dev

```