MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive way. The library currently supports line charts, scatterplots, histograms, bar charts and data tables as well as features like rug plots and basic linear regression.

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. 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.

The library makes it easy to construct narratives by providing a layout template based on Bootstrap. Take a look at the examples to see that in action.

MetricsGraphics.js takes the misery out of creating beautiful interactive graphics. Read our blog post for more details.

A bit about the library's design philosophy

MetricsGraphics.js is an opinionated library that aims to take the mystery and complication out of presenting simple data. It offers only line charts, scatterplots, bar charts, histograms and data tables, while maintaining a wide variety of options for each, and elevates the layout and explanation of these graphics to the same level of priority as the graphics themselves. 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.

Creating your first graphic

Here's a quick tutorial to get you started. Say that we have some data on a scholarly topic like UFO sightings. We decide that we're interested in creating a line chart of yearly sightings.

We create a JSON file called data/ufo-sightings.json based on the original dataset, where we aggregate yearly sightings. The data doesn't have to be JSON of course, but that will mean less work later on.

The next thing we do is load the data:

d3.json('data/ufo-sightings.json', function(data) { })

MG.data_graphic expects the data object to be an array of objects, which is already the case for us. That's good. It also needs dates to be timestamps if they're in a format like yyyy-mm-dd. We've got aggregated yearly data, so we don't need to worry about that. Otherwise, we'd add a line like this one.

d3.json('data/ufo-sightings.json', function(data) { data = MG.convert.date(data, 'year'); })

Finally, we create the graphic and place it in the element specified in target.

d3.json('data/ufo-sightings.json', function(data) { MG.data_graphic({ title: "UFO Sightings", description: "Yearly UFO sightings from the year 1945 to 2010.", data: data, width: 650, height: 150, target: '#ufo-sightings', x_accessor: 'year', y_accessor: 'sightings', markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}] }) })

And this is what we end up with. In this example, we're adding a marker to draw attention to a particular data point. This is optional of course.

It's as easy as that. If for whatever reason we decide to update the data in the graphic, we call MG.data_graphic with the updated data object on the same target element. The library will gracefully transition the existing plot to the new one. It's ridiculously easy to modify every aspect of the graphic by setting one or more of the available options.

Still not convinced?

We've set up an interactive version of this example that you can play around with. You don't need to download anything. Check it out.

Take the library out for a spin, file bugs and don't forget to star the project on Github!