Tom Hohenstein experiments and thoughts

Using MetricsGraphics.js

MetricsGraphics.js is a nice JavaScript library for quickly plotting time series data. Built on top of D3, MetricsGraphics.js is designed to keep plotting simple data easy. It largely achieves this goal. With a little copying and pasting I was able to create the line graph below fairly quickly. Just make sure you include D3 and MetricsGraphics.js when follow the given example.

The code looks like:

d3.json('/assets/data/metricsGraphics-Demo1.json', function(data) {
    data =, 'date');
        title: "Tom's Copy and Paste Example",
        description: false,
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('line-chart'),
        x_accessor: 'date',
        y_accessor: 'value'

Next I tried it with some real data. I downloaded a stock data set for DaVita from Google and used this Jupyter notebook to wrangle it into a json file for visualization. The process highlighted a few ‘gotchas’ worth noting.

MetricsGraphics.js anticipates getting data in a specific format. Anything outside of that format resulted in errors - which were not always super helpful. The json file should look like:

            "date": "2014-01-01",
            "value": 190000000
            "date": "2014-01-02",
            "value": 190379978

Any variation in that format results in an error and your JavaScript breaking - something that took me a good 15 minutes to figure out.

Also be careful with how your date strings are formatted. An annoying detail but it did help me find, a great tool for formating time in Python. I was using Pandas and the default export to json tweaked how the date was formatted - causing things to break.

The last thing worth mentioning are other resources available. In addition to hooks, examples, there is also a list of options for tweaking the color and style of your plot.