Introducing MetricsGraphics.js

MetricsGraphics.js is an opinionated library that aims to take the mystery and complication out of presenting and visualizing data. It offers line charts, scatterplots, bar charts, histograms and data tables* and elevates the layout and explanation of these graphics to the same level of priority as the graphics. The emergent philosophy is one of efficiency and practicality. By following the standards embodied by the library, you will make beautiful, concise and impactful presentations and dashboards.

Today marks the release of v1.0—our first public release. We began building the library somewhat inadvertently earlier this year, during which time we found ourselves copy-and-pasting bits of code in various projects. Naturally, this led to errors and inconsistent features. We decided that it made sense to develop a single library that provides common functionality and aesthetics to all of our internal projects.

With that in mind, MetricsGraphics.js was born. The library encapsulates what we believe are best practices for effective data presentation, practices that have guided our development process. MetricsGraphics.js follows four principles:

  1. You only need a few types of graphics to tell most business stories.
  2. Usability and conciseness are absolutely necessary in making a successful data graphic. Users should be guided toward customization options that enhance the data presentation, not superfluous visual tweaks.
  3. Layout, annotation, and explanation are as important as graphing and should be given as high a priority as the data. Presentations should work across a wide variety of contexts and devices.
  4. Development of the library should follow real needs, not imagined ones.

MetricsGraphics.js focuses on a few types of graphics that we believe are important. We have deliberately left out a number of common graphic types because we feel that they aren’t particularly useful and can sometimes be liable to misinterpretation. Each of the graphic types that we offer comes with a wealth of useful options that cover a wide range of use-cases. Our API is very straightforward. Producing a simple line chart, for instance, is as simple as:

var data = [{'date': new Date('2014-10-01'), 'value': 434034},...]

  target: 'div#line-plot',
  data:   data,
  title: "The first line plot.",
  description: "This is a line plot, for sure.", // appears in tooltip
  x_accessor: 'date',
  y_accessor: 'value'

Updating an existing graphic’s options or data is just as easy, seeing as the same function that’s used to create the data graphic is also used to update it. We don’t maintain state. 

We consider layout to be just as important as visualization. This is an aspect that many charting libraries leave out. The library ships with tooltips and textual descriptions, as well as a custom layout that you may wish to use in your own project. We believe that a good layout and a concise story are vital to acclimating customers to the data, and so the sample layout in the demo aims to do just that.

As a final point, we follow a ‘real needs’ approach to development. Right now, we have mostly implemented features that have been important to us internally. Having said that, our work is available on Github, as are many of our discussions, and we take any and all pull requests and issues seriously.

There is still a lot of work to be done. But this little library already has serious teeth. We invite you to try it out!

Check out the MetricsGraphics.js repository on Github.

*Data tables aren’t available just yet, but they are on the horizon.