The Digital Content Team behind Visual.ONS

In my mind, this post was meant to talk about how to use the ONS chart template, but to do that properly I need to explain how the digital content team is set up and the purpose of our work because this drives how our templates have been developed.

Our goals

The principles of the ONS strategy is laid out in the document “Better Statistics, Better Decisions”. In it, it describes many of the principles that guide our work. These include

  1. Inform decision making
  2. Support democratic debate
  3. Improve communication
  4. Challenge misuse of statistics

As a result, there is an increased focus on working to ONS’ “enquiring citizen” persona. In the same way that research is putting much focus and effort into communicating with the public, the ONS as a statistics bodies is trying to do the same. Our work aims to communicate statistics in a way that support these principles. And the area of work that mostly correlates to that is data journalism; using data and statistics to tell stories that matter to people.

ONS data are published in many many excel files. With each release, a commentary and analysis is published but these are often technical documents with enough detail for the expert user. If you are an expert you’ll be familiar with the website you’ll be able to find the data and understand everything about it. If you’re in an “information forager”, you might persist with different search terms and then eventually find your way to what you think might be the right data so you download it and see. You will probably search and download a few times until you find what you really want.

The vast majority would turn away at just opening a spreadsheet. We are failing these people. And if we really want to improve the world we need to make sure these people have the information they need to have important conversations. This is where the digital content team comes in.

How we work

The team is multidisclipinary and is made up of journalists, designers and developers.

Digital Content Team

The journalistic skills are important for transforming information about statistics in to something that accurate to the data yet understandable to average citizen. The design and coding skills are about making something that presents the data in the most readable and useful way using the best bits of digital; the ability to reach a large amount of people, in a way that is quick to produce and can be interactive.

Generating an idea

Since we are the ONS we have access to vast troves of data that the organisation collects. Each department is in charge of statistics that relate to certain aspects of life and society e.g. birth, deaths, marriages, GDP, migration. These departments (or as we refer to as “business areas”) are the expert in their data and are responsible for how their data is represented. Sometimes they will have found something interesting in their research and feel bringing this to the attention of people will benefit them so they look to us to help them. Or they’ll have a big release coming out and you know they’ll be some interesting stories to tell there. Some times we are digging around the data published and we find something interesting to we approach the business area to get their opinion of what we’ve found.

As the ONS is a large organisation, visibility is an issue to getting to know people and having regular meetings are essential. People need to understand what and why you’re trying to do so they can support you and commit enough resources.

Exploring the data

Once you’ve found a good idea, it’s time to really hone in on what the headline is going to be. What’s going to make someone stop and read your article and listen to what you have to say. This takes time, as sometimes an idea is great but when you look into it, there’s more to it. You need to analyse the data. This step uses tools like excel, python or charting tools like plotly, tableau, rawgraphs or datawrapper. It’s often best to get feedback from all sides including editorial and the business area on your idea to hone it’s focus, check it’s viability and ensure it’s rigorous.


Once your idea is firm, it is written up as a proforma and sent to an internal group Editorial and Comms Group (ECG) made up of deputy directors for each business area. The proforma contains the outline of what you want to say, how you’re going to say it, the risks, external factors, other angles. They look over the idea to ensure it’s aimed at the right level with the right focus and any concerns are addressed.


The article is written and any charts or interactives are developed. Often charts use our templates and if necessary are adjusted to fit the story. Our templates have come out of what have worked in the past and use the most common elements of interactives. The development of interactives and the article happens with regular feedback from the editorial, design and UX as well as the business area. These is the part where the disclipine of data visualisation becomes important as choosing the right chart to tell the story is paramount. I would suggest the FT’s visual vocabulary as a starting point. Not forgotten is the digital standards we are working towards including working on all devices and accessibility.


Once it’s all finished the article is published. Often we are looking for organisations to syndicate the content so elements are made to be embedded into other people’s system. We track how the content goes down with partners, through different distribution channels.

Why it works for us

So now you know how the team works we can talk about why the templates work for us. But I’ll leave that to another post.

How to embed ONS interactives

At the end of some posts on Visual.ONS is some code about how to use an iframe to embed any interactives elsewhere. This is to encourage syndication elsewhere, for example news organisations who might want to rewrite the words around an interactive to suit their style or readership.

Using an iframe to embed

In this article about house price by area it says “To embed the floorplan in your site use the following code:”

<iframe width="100%" height="1200px" src="" scrolling="no" frameborder="0"/>

If you copied this into your website or CMS, this would make an iframe which acts like a window where the view is the ONS interactive. The window view is set with the width="100%" and height="1200px". This will create a window that fills 100% of the width of where you put it and a height that’s set manually. The width is sensed when the page is loaded and set to fill the whole width. The height should be set to something that doesn’t cut off the bottom of the interactive.

This would work fine for most circumstances. But if you were changing the size of your window for example rotating your mobile or changing the resizing your browser, the width that was set when the page loaded would no longer correspond with the width of your browser.

Making your embed responsive

We use a javascript library called pym.js to make our interactives responsive. The basic idea is that on resizing, the interactives are redrawn to fit the new iframe. If the width of the interactive is small, like a mobile screen, the interactive is designed to behave differently.

To embed a responsive graphic, you need to use pym.js on the site you’re embedding on. This is quite simple to do if you can add scripts to your page. This website is referred to as the parent. The page you’re embedding is called the child.

The example on the pym.js page says use code like this

<div id="example"></div>
<script type="text/javascript" src=""></script>

var pymParent = new pym.Parent('example', '', {});


Code walkthrough

Let’s talk through what’s going on. First create a div and give it the id=example.

Next, load the pym.js script from the NPR website <script type="text/javascript" src=""></script>.

Make another <script>, make a variable and then use a function to make this page a parent for pym.js var pymParent = new pym.Parent(.

Use the div id to say where to put it, in this case the 'example', div.

Choose what will be the child page. This is going to be the interactive we’ve chosen and we get the page from the embed code in the article ''.

Then some more bit to say we’re not using any of the optional extras , {} and finally close everything );</script>.

Hopefully that made sense. Now let’s see it in action.

Responsive embed

Non-responsive embed

Try resizing your browser or rotating your phone and compare this non-responsive version where the boxes don’t resize.