Home

MetricsGraphics.js is a library optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled and consistent way.

We're encapsulating what we see as best practices for effective data presentation, of which charts are one component. We're not aiming to be competitive with libraries that already exist, but to make a library that meets our needs. We also happen to think that the world needs a principled data presentation library, and that many of our needs are the same as other people's.

The API is simple. All that's needed to create a graphic is to specify a few default parameters and then, if desired, override one or more of the optional parameters on offer. We don't maintain state. In order to update a graphic, one would call MG.data_graphic on the same target element.

The library is data-source agnostic. While it provides a number of convenience functions and options that allow for graphics to better handle things like missing observations, it doesn't care where the data comes from.

http://metricsgraphicsjs.org

Quick-start guide

1. Download the latest release from here.
2. Follow the examples in examples/index.htm and examples/js/main.js to see how graphics are laid out and built. The examples use json data from examples/data, though you may easily pull data from elsewhere.

Dependencies

The library depends on D3 and jQuery.

Contributing

If you would like to help extend MetricsGraphics.js or fix bugs, please fork the library and install Node.js. Then, from the project's root directory install gulp:

install gulp

Then, install the library's dependencies:

npm install

To build the library from source, type:

gulp build:js

To run tests, type:

gulp test

Resources

• Examples
• Interactive demo
• List of options
• Chart types
• Building a button layout

Release process

1. Copy over any changes made in examples/dev.htm to examples/examples.htm
2. Run gulp build:js
3. Commit newly generated js/metricsgraphics.js and js/metricsgraphics.min.js files and index.htm (if applicable) with a message such as, “v0.5 prepared files for release”
4. Deploy all files under examples to metricsgraphicsjs.org

Note: The js file will be regenerated between releases any time we add a new chart type.