metrics-graphics - GitLite

KO | EN

gitlite — search

#ai #typescript #go #rust #deep-learning #macos #java #nodejs #windows #kubernetes #awesome-list #vue #openai #open-source

metrics-graphics

(★ 7,395)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - gh-pages.yml
  - pr-gate.yml
  - publish.yml
- CODEOWNERS
- logo.svg
- screenshot.png
- - Layout.tsx
  - Logo.tsx
  - NavLink.tsx
  - ParameterTable.tsx
- - confidenceBand.json
  - fakeUsers1.json
  - fakeUsers2.json
  - missing.json
  - points1.json
  - ufoDates.json
  - ufoSightings.json
- - format.ts
- - _app.tsx
  - _document.tsx
  - histogram.mdx
  - index.tsx
  - line.mdx
  - mg-api.mdx
  - scatter.mdx
- - favicon.svg
- - globals.css
- .gitignore
- next-env.d.ts
- next.config.js
- package.json
- postcss.config.js
- README.md
- tailwind.config.js
- tsconfig.json
- - index.ts
  - mg.css
- .gitignore
- esbuild.mjs
- package.json
- tsconfig.json
.codeclimate.yml
.eslintrc.js
.gitignore
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![MetricsGraphics Logo](https://raw.githubusercontent.com/metricsgraphics/metrics-graphics/main/.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
<div id="chart"></div>
```

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](https://raw.githubusercontent.com/metricsgraphics/metrics-graphics/main/.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
```