Weeks 5-6

This past fortnight I have been getting well and truly stuck into graphs. As you can imagine, there are many graphs on the crash-stats site, displaying various data about browser crashes. At the moment they all look quite different and have different degrees of interactivity, but my task is to redraw them using a single graph library.

I’m not entirely new to making graphs. At university I recently did a project using the JavaScript graph library D3. The project involved drawing interactive chord diagrams to help researchers investigate relationships between genes. D3 was great for this, because it gave me lots of control, meaning that I could easily respond to requests from researchers to change the appearance or add new functionality.

The graphs I have been making at Mozilla are more straightforward, such as bar charts and line graphs, and the problem with using D3 for these is that you have to do a lot of work to achieve something that has been done many times before. So we chose to use MetricsGraphics, a Mozilla-made graph library that uses D3, but hides the complicated mechanics from behind a simple API. Of course you pay for this by reducing the control you have over your graphs, but for straightforward graphs this doesn’t matter too much.

To illustrate my point, here is a worked example of a multi-line graph that’s very similar to one I was working on this week. I have altered the data in honour of today’s strike action by train drivers on the London Underground (apologies to any browser-crash-data enthusiasts reading this). I compare the salary of a train driver on the London Underground to that of a doctor, to help clear up some of the questions that were raised in today’s media about the respective salaries for these two professions. First of all, here’s the graph:

Screenshot from 2015-07-09 20:00:12

And now I’ll show you how easy it was to make. For a multi-line graph, we need two HTML elements: one for the graph and one for the legend explaining which line is which:

<div id="graph" style="width: 600px; height: 200px;"></div>
<div id="legend" style="width: 600px; text-align: center;"></div>

The tube driver salary data (taken from this BBC article) and the doctor salary data (taken from the NHS careers and British Medical Association websites) are structured as an array of data-point objects for each line on the graph:

var graphData = [
    [
        {'date': '2015', 'salary': 49673},
        {'date': '2043', 'salary': 49673}
    ],
    [
        {'date': '2015', 'salary': 22636},
        {'date': '2016', 'salary': 28076},
        {'date': '2024', 'salary': 75249},
        {'date': '2025', 'salary': 77605},
        {'date': '2026', 'salary': 79961},
        {'date': '2027', 'salary': 82318},
        {'date': '2028', 'salary': 84667},
        {'date': '2032', 'salary': 90263},
        {'date': '2038', 'salary': 95860},
        {'date': '2043', 'salary': 101451}
    ]
];

var legend = ['Train driver', 'Doctor'];

All that is left to do is to draw the graph, which involves calling the graph drawing function and passing in an object with some options. Notice how simple this call is, compared to drawing a multi-line graph from scratch in D3.

MG.data_graphic({
    title: 'Projected salaries for a train driver on the London Underground and a doctor over 30 years',
    data: graphData,
    full_width: true,
    target: '#graph',
    x_accessor: 'date',
    y_accessor: 'salary',
    interpolate: 'basic',
    area: false,
    legend: legend,
    legend_target: '#legend'
});

It’s not always exactly this straightforward: it’s sometimes been a bit tricky to get the data into the correct format, and I’ve run into a few problems with automatic positioning of axis labels and ticks, but there is no doubt that this library and others like it make life a whole lot easier.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s