Jason has a degree in Business Information Systems and spent much of his Uni days writing code for various websites- bringing lots of new coding and data hacking skills to the office. Very happy to have you on the team Jason!

There’s more information here on the rest of the OCSI team, also our living wage internships (we’re hiring).

Video from the session is now also available

The main objective in developing the site was to create a flexible interface presenting a variety of data - and types of data - in a number of ways, using simple technology that could be updated quickly. We thought it’d be useful - and fun - to take a quick look at how we turned the results from the survey into the charts you can see on the site.

To do this, we used a bit of PHP, jQuery, and the Highcharts Javascript library. These are all tools that can be downloaded by anyone for free. What’s more, by using jQuery and Highcharts, the website is viewable across most modern browsers - including on tablets and mobile phones - without having to develop separate code.

Step 1: Raw data

We started by putting the survey results into a MySQL database, with a few extra fields calculated from existing columns to make it easier to group indicators together and filter them. This is always a useful step if the data won’t be changing much, as it makes the code that follows simpler to write and easier to understand.

While the aim of the site is to let users explore the data as they want to, it’s important to present useful and interesting indicators as the main choices, to avoid overwhelming a user. To make the options clearer, we grouped indicators into three types: a) totals to display, b) categories to break the data down by, and c) categories to filter by.¹ Each group of indicators can then be shown in a different menu, letting the user focus on each group, one at a time.

After fetching the user-requested data from the database, we turned the results into a table using basic PHP-to-HTML code. It’s always useful to have access to the data behind a visualisation, so we decided to give users the option to show the table of data being used on a page. You can see this by viewing any indicator and clicking the “Show/hide data table” link at the bottom of the page. For instance, the data for Source of income broken down by Theme looks like this:

Step 2: The Science Bit

Now that the data for every page gets output as an HTML table, we can create our visualisation by adapting the Highchart demo to turn tables into charts. This varied slightly between pages, as the table format depended on the indicator and breakdown selected, but was largely a case of cycling through table headers and data in Javascript, and setting up values for Highcharts based on each.

For example, to set up the groups of data in the table above, we used:

// Use jQuery's each() function to loop through the table's
// header cells, adding each to the list of categories

var table = document.getElementById('data_table');

$('thead th', table).each( function(i) {
  options.xAxis.categories.push($("<div/>").html(this.innerHTML).text());
});

To add the data from each row into a new series, with the name taken from the left-most cell, we used:

// Set up options.series as an empty array
options.series = [];

// Use jQuery's each() function to loop through the rows in the table
$('tr', table).each( function(i) {
  var tr = this;

  // Skip the first row (index = 0) as this contains group names
  if (i > 0) {

    // Set up some empty defaults for this series
    options.series[i - 1] = { name: '', data: [] };

    // Loop through the TH and TD cells on this row
    $('th, td', tr).each( function(j) {

      if (j == 0) {

        // If on the first, left-most cell, set the series name to
        // this cell's value
        options.series[i - 1].name =
            $("<div/>").html(this.innerHTML).text();

      } else {

        // Otherwise add this cell's value as data to the current series
        options.series[i - 1].data.push(parseFloat(this.innerHTML));

      }
    });
  }
});

Everything after this is fairly standard Highcharts functionality, namely:

• Setting up options for displaying the chart - titles, colours, axis options, and so on
• Creating a space on the page for the chart to fit into
• Actually displaying the chart, and updating it if certain filters are changed (when showing opinion pie charts, for example)

$(document).ready(function() {         

  // Set up options
  options = {

    chart: {

      // Choose which HTML element to render the chart in
      renderTo: 'hc_container',

      // Choose the type of chart to show
      defaultSeriesType: 'bar'
    },

    // ... more settings here

  };

  // ... Set up options.series as described above here

  // Show chart
  chart = Highcharts.Chart(options);

});

And below is one that we made earlier. Hopefully this demonstrates how quick and simple visualising data in the browser can be, when the right content and the right tools are available.

Footnote

1. [return] In technical terms, this basically gives us our SQL statement: SELECT [measure a] WHERE [measure c is filtered] GROUP BY [selected breakdown b]

Emma Plunkett has a degree in Philosophy and Politics from Bristol, and stints as a researcher for Anthony Seldon on his book “Brown at 10″, and a policy intern for David Lammy MP  - so brings all sorts of research goodness to the office. Welcome to the team Emma !

There’s more information here on the rest of the OCSI team, also our living wage internships (we’re hiring).

Infographics and interactive tools from the Commission on Living Standards run by the Resolution Foundation, doing some good work with data and interaction:

• www.livingstandards.org/features/where-do-i-stand/
• www.livingstandards.org/features/pay/
• www.resolutionfoundation.org/portraits/infographics/

The one and only Hans Rosling of Gapminder talking statistics and sword swallowing (an oldie but a goodie) - www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty.html (it’s all worth watching, although swords appear at 17 mins if that’s your thing).

Moving home in Norway, courtesy of individual level tax records (how about that for open and transparent data). www.guardian.co.uk/news/datablog/interactive/2012/feb/08/norwegian-move-home-animation.

US Data on health inequalities, showing how different age, sex and ethnic groups fare on particular health issues. www.healthypeople.gov/2020/ChartAccess.aspx. Some really stark differences shown up by the data, would be good to see the Department of Health doing something similar here.

For more information about Data Engagement, have a look at Tim Davies’ blogpost.

We are now right by Brighton station, so do pop in for a coffee anytime you’re passing and want to talk data, see some great data visualisations, or just look at our goldfish.

We are looking for interns to work under any of the roles below. You will be working closely with the OCSI team, but need to think on your feet and take the initiative when required.

The positions are three month contracts working 35 hours a week at our central Brighton office. Interns are paid the Brighton Living wage (currently £7.20 per hour).

About us

Oxford Consultants for Social Inclusion (OCSI) is a social research ’spin-out’ consultancy from the University of Oxford. We’ve worked with more than 100 public and third sector organisations to improve their evidence-base for decision-making and delivering better services.

Based in central Brighton, we work with clients around the UK. For more about OCSI and our projects, see www.ocsi.co.uk.

How to apply for the living wage intern programme

We’re always on the lookout for great people, so there’s no particular deadline to apply.

To apply, please email Emma.James@ocsi.co.uk sending the usual info (covering letter and CV). For a chat about the programme or roles, please ring Emma on 01273 810 270.

OCSI is an Equal Opportunities Employer and we encourage people from all backgrounds to apply. Applicants must have the legal right to work in Britain.

[A printable version of this ad is available at http://www.ocsi.co.uk/news/wp-content/uploads/ocsi-internprogramme-feb2012.pdf]

Data4nr (www.data4nr.net) is a well-used, trusted and freely-available source to help users find data & information to support targeting, monitoring, priority setting and performance management at local level. Data4nr also underpins national services such as Data.gov.uk and the academic data liaison service.

We are surveying Data4nr users to find out which parts of the service provide real value, and which future developments should be prioritised.

Please help by taking the 5-minute survey at https://www.surveymonkey.com/s/data4nr - thank you!