01 Oct 2015

When we started our Red Box politics vertical at The Times, we needed the ability to quickly generate charts for the web in a style that was consistent with the site’s design. There had been a few attempts to build things like this; we considered using Quartz’s Chartbuilder project for quite some time, but ultimately felt its focus on static charts was a bit limiting. From this, Axis was born, which is both a customisable chart building web application and a framework for building brand new applications that generate interactive charts. It’s also totally open source, and free for anyone to use.


Axismaker (use.axisjs.org)

Design considerations

From the outset, we set a few broader project goals, which have persisted over the last year as we’ve developed Axis:

  1. Enable easy creation of charts via a simple interface
  2. Accept a wide array of data input methods
  3. Be modular enough to allow chart frameworks to easily be replaced
  4. Allow for straightforward customisation and styling
  5. Allow for easy integration into existing content management systems
  6. Allow journalists to easily create charts that are embeddable across a wide array of devices and media

At the moment, the only D3-based charting framework Axis supports is C3.js (which I’m also a co-maintainer of), though work is underway to provide adapters for NVD3 and Vega. This means Axis supports all the basic chart types (line, bar, area, stacked, pie, donut and gauge charts) and will gain new functionality as C3 evolves. Of course, once other charting libraries are integrated and adding new ones is more straightforward than it currently is, the sky’s the limit in terms of the types of charts Axis will be able to produce.


This is all possible because Axis isn’t so much a standalone webapp as a chart application framework. In order to achieve this level of modularity, Axis was built as an AngularJS app making extensive use of services and providers, meaning it’s relatively simple to swap around various components. As a nice side effect of this, it’s really easy to embed Axis in a wide variety of content management systems — at present, we’ve created a WordPress plugin that integrates really nicely with the media library and is currently one of the more feature-rich chart plugins out there for WordPress, plus a Drupal implementation is being developed by the Axis community. Integrating Axis into a new content management system is as difficult as extending the default export service — for instance, Axisbuilder is a Node-based server app that saves charts directly to a GitHub repo supplied by the user and is intended more for general public use, whereas Axis Server saves chart configurations into a MongoDB database and is intended more for news organisations who want to use it as a centralised internal tool. It can also be used entirely without a server component, depending on the needs of the organisation using it.



Main interface for Axis


Output is king

Charts are used universally by news organisations, whether that be in print, on the website or in a mobile app. As such, Axis was built to provide for a very wide variety of use cases — you can save Axis charts as a standalone embed code that can be pasted into a blog or forum post, Axis charts can be exported to a CMS, they can be saved as PNG for the web or SVG for print. In fact, print output is an important feature we’ve been developing recently so that chart output is ready to be placed in InDesign or Methode with little-or-no further tweaking. At the moment, basic charts for print at The Times and Sunday Times are produced by hand in Adobe Illustrator. The hope is that we can save our talented illustrators countless hours by dramatically reducing the time it takes to produce the large number of simple line graphs or pie charts needed for a single edition. The extensible configuration system means that customising the design of the output for a new section or title is as difficult as copying a config and CSS file and then customising to suit.


Proudly open source

Although Axis has been in development for just over a year, it’s really feature-rich — mainly as a result of working directly with journalists across The Times and Sunday Times to create the functionality they need. There are still a few sundry features we want to implement here and there, but ultimately the rest of version 1 will focus on stability and performance improvements. Version 2 — release date rather far into the future; we’re only in the pre-planning stages — will break away from this, with a restructuring of the internals, a redesign of the interface, and a whole boatload of new features.

Although we’ve built Axis with Times journalists in mind, we truly want it to grow as an open source project and welcome contributions both large and small (for example, we recently added i18n support, and are currently looking for translators to help internationalise the interface into different languages). Though designed to be powerful enough to support major news organisations, Axis is simple enough for anyone to use, and we particularly hope that student newspapers running WordPress will be encouraged to explore data journalism and visualisation using Axis.

For more about Axis and its related projects, please visit axisjs.org or follow us on Twitter at @axisjs. To try using Axis, visit use.axisjs.org.





Ændrew Rininsland is a senior newsroom developer at The Times and Sunday Times and all-around data visualisation enthusiast. In addition to Axis, he’s the lead developer for Doctop.js, generator-strong-d3, Github.js and a ludicrous number of other projects. His work has also been featured by The Guardian, The Economist and the Hackney Citizen, and he recently contributed a chapter to Data Journalism: Mapping the Future?, edited by John Mair and Damian Radcliffe and published by Abramis. Follow him on Twitter and GitHub at @aendrew.

03 May 2012


This heat map, produced on Google Fusion Tables presents the levels of overcrowding in London, as in 2010. The data was published by the London datastore in March 2012 and presented figures for both the base figure (number of houses overcrowded) and that number as a percentage of the whole borough. The information mapped here is the percentage figures, however, the map is interactive, and clicking on each borough will give you the base figure information.

Overcrowding for the purposes of this data set is defined by the ‘bedroom standard’, explained on the London Datastore website:

‘Bedroom standard’ is used as an indicator of occupation density. A standard number of bedrooms is allocated to each household in accordance with its age/sex/marital status composition and the relationship of the members to one another. A separate bedroom is allocated to each married or cohabiting couple, any other person aged 21 or over, each pair of adolescents aged 10 – 20 of the same sex, and each pair of children under 10. Any unpaired person aged 10 – 20 is paired, if possible with a child under 10 of the same sex, or, if that is not possible, he or she is given a separate bedroom, as is any unpaired child under 10. This standard is then compared with the actual number of bedrooms (including bed-sitters) available for the sole use of the household, and differences are tabulated. Bedrooms converted to other uses are not counted as available unless they have been denoted as bedrooms by the informants; bedrooms not actually in use are counted unless uninhabitable.

Overcrowding figures include households with at least one bedroom too few.

The map clearly shows that the borough of Newham has the worst overcrowding situation with 17.9 per cent of households in the borough overcrowded; a figure of 506 households. However, the borough with the highest base rate figure was Enfield, with 670 households being overcrowded, 7.1 per cent of the borough.

In July 2011, Shelter Housing charity announced that their analysis of the English Housing Survey revealed that 391,000 children (24 per cent) in London suffered from overcrowding, which they said was an 18 per cent rise since 2008. Unfortunately the data provided by the Datastore did not break down the data into person specification categories, however, it is clear from the figures that overcrowding in London is a growing problem.

The Fusion Map was created by importing data from a spreadsheet into Google Fusion Tables and then merging this data with KML shape files for London, to get the heat map effect. Each Borough has an identification code, which my original data did not have, so I had to input this manually for each borough in my original data set before merging the two files – this provides a point of reference for the merge, so there are two identical pieces of information for each row to match up with.

I then chose the column I wanted the map to represent, in this case the percentage data. To get the map to show a range of colours related to the data, I set the map to have what are called “buckets”, this is the range of numbers represented by each colour. I then modified the colours I wanted to use with a system called colorbrewer, which allows you to customize colours showing specific colour ranges for heat maps. Finally I modified the information windows for each borough to show specifically the information I wanted, and in the style I wanted – this takes a small amount of HTML know-how.

I hope you enjoy this data map, and are inspired to create your own maps using Google Fusion in the future.


03 Apr 2012

Simon Rogers has created a visualisation showing death penalty statistics, country by country, for the Guardian Data Blog.



The visualisation uses a bubble graph on a map of the world to depict how many people have been given death sentences and how many people have been executed in 2011. This is then broken down by country, giving users the opportunity to compare and contrast regions.


03 Apr 2012

Following on from my earlier post exploring different ways to present data, I have decided to analyse two examples of visualisations from the Guardian Data Store.


The first is a map of UK fuel shortages; ‘The Petrol Panic Mapped’. The map works because it is clear, simple and easy to use. The map is interactive, giving the user control and allowing them to display the information in the way that best suits them, prioritising data that they find most interesting. It also makes viewing the map a more entertaining experience, keeping users on the page for longer.


13 Feb 2012

Data journalism has enjoyed increasing exposure both within and without journalistic circles in recent years. One of the most visible examples of this has been the proliferation of infographics – a broad term covering a variety of visual story-telling tools and techniques. The quality of infographics you will find online today is very wide ranging, but increasingly some of the best examples have come from analysis of sporting events.

One such example is this effort, shown below, created by Phil Nottingham. This infographic allows users to view key statistics from every Super Bowl in NFL history, right back to Super Bowl I, where the Green Bay Packers beat the Kansas City Chiefs by 35 points to 10 at the Coliseum in 1967.

Super Bowl XXV saw the Giants overturn a 9 point deficit to beat the Bills


Interactivity is often key to the success of an infographic, particularly when it is not being used to communicate a news story. In this example, users can engage with the tool by choosing from which Super Bowl to view key statistics.

If you’re a Colts fan, simply select the team and you can then either dissect the defeat to the Saints, or scour the success over the Bears back in 2007. Alternatively, if you’re a neutral, or just want a more holistic experience, browse by year rather than team, and pore over any match-up from Super Bowl I to last year’s clash between the Packers and the Steelers.

For every year, a comprehensive list of statistics allows the user to see how the respective teams fared in offense and defense, with data shown for a whole host of factors, including rushing, first downs, fumbles and interceptions.

As well as the individual stats, users can get a clear idea of how a match progressed through the infographic’s main panel. Here, the teams’ scores are plotted over the course of the match, which provides a great way of reliving some of the great comebacks. Take Super Bowl XXV for example, where the chart shows the Giants’ yellow line well below the Bills’ line in the second quarter, but then soaring up and overtaking in the dying minutes.

Since the turn of the millennium, the number of people providing statistical analysis of sporting events has grown enormously, and below are two more of the Data Blog’s favourite sports infographics (they’re both from the world of football (soccer), but I assure you this is because of their brilliance, rather than any underlying bias):

  • Using Tableau Public, Graham MacAree created this spectacularly detailed visual analysis of Chelsea FC’s match against Norwich on 27 August last year. Users can see exactly where each Chelsea player directed every one of their passes, at what point in the game each one was played and whether or not it was complete.
  • The guys at Visual Evolution have put together this fascinating infographic illustrating the nationalities of football’s top 100 earners (based on their annual salaries), breaking the figures down to show – among other things – which leagues and clubs have most representatives in the top 100, the average age of the top earners and the number of homes Wayne Rooney could buy in his home district of Croxteth with his year’s pay packet.
18 Nov 2011



It has been the rallying cry of the Occupy movement for the past two months – but is the US really split 99% v 1%? As poverty and inequality reach record levels, how much richer have the rich got? This animation explains what the key data says about the state of America today

• Explore the data behind this animation and read the script


Click on the picture below to watch the video on The Guardian’s website:



06 Nov 2011

THE TELEGRAPH – By Michael Norrish

In the build-up to Sir Alex Ferguson’s 25th anniversary at Manchester United, we chart the key data which have defined his managerial career at Old Trafford

Sunday marks a quarter of a century since Sir Alex Ferguson moved from Aberdeen to join Manchester United, who were then in the relegation zone and without a title since 1967. The next quarter of a century has reaped 12 league titles, two European Cups and five FA Cups.

The tales of Robins, Rotterdam and Ronaldo are now so familiar, they hardly need recounting again, but the longevity of his reign at United can hardly be overemphasised. When he began at Old Trafford, Chelsea manager Andre Villas Boas was eight years old. [Read more…]

05 Nov 2011


The New York City Marathon course has changed little since it first wound its way through all five boroughs in 1976. But the neighborhoods along the route have seen significant change: they are mostly richer and the ethnic makeup of many of them has shifted.

 [Read more…]

30 Oct 2011

BBC News editor Steve Herrmann announced at the News:Rewired event earlier this month that the BBC News website will be developing more data journalism projects. “The World at Seven Billion” is a great example of what we could expect from them in the future, and it is really exciting! Have a play with it and tell us what you think in the comment section…

“The world’s population is expected to hit seven billion in the next few weeks. After growing very slowly for most of human history, the number of people on Earth has more than doubled in the last 50 years. Where do you fit into this story of human life? Fill in your date of birth below to find out.”