Description
A sample set of examples may be found on the examples page. The example below demonstrates how easy it is to produce a graphic. Our graphics function provides a robust layer of indirection, allowing one to more efficiently build, say, a dashboard of interactive graphics, each of which may be pulling data from a different data source. For the complete list of options, and for download instructions, take a look at the sections below.
metrics-graphics alternatives and similar libraries
Based on the "d3" category.
Alternatively, view metrics-graphics alternatives based on common mentions on social networks and blogs.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
-
-
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
-
-
-
-
-
-
-
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
-
-
-
-
-
-
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
-
-
-
-
-
-
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser -
-
-
-
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of metrics-graphics or a related project?
README
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:
<div id="chart"></div>
Then, use the id to mount the chart:
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. Please make sure that Yarn is installed.
# 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
# inside packages/lib
yarn dev
# inside packages/examples
yarn dev