How to make a Data Pic

Welcome to the data pic tool which will help you create a graphic that makes the big numbers in your story stand out.

Something like this:

data pic
Let's get started

In this video, our developer Melanie will take you through making your own graphic with our data pic tool. Step by step instructions follow below the video.

Step by step guide

To start, open this link. You'll see the tool is split into two screens:

  • On the left hand side, you have the code - where you enter your numbers, text and urls.
  • The right hand side shows you how your data pic will look on the page. As you work though the data pic, sections will highlight in yellow and prompts will appear to remind you which bit of code you should be changing.
two slides
line
Troubleshooting

Before you start: Here's some things to remember and troubleshooting tips when changing HTML and CSS code:

HTML is the skeleton or structure of the page

CSS is the styling - colour, fonts and funky effects

It may look like a scary list of computer gobbledigook from The Matrix, but once you know what you're looking for it's easier to work out what to change.

  • EVERYTHING MATTERS: All the commas, quotes and brackets matter - if one is missing or accidentally deleted, the code won't run.
  • HTML COMES IN PAIRS: HTML elements have an opening tag and a closing tag eg: opening tag <h2> headline then closing tag</h2>
  • Other examples worth being familiar with are: <li>list </li> and <p>paragraph</p>
  • CHECK TAGS: If something doesn't look right, check you haven't forgotten a closing tag or deleted any by mistake
  • GO BACK A STEP: CTRL Z (on a PC) or CMD Z (on a Mac) will take you back a step if you can't find the error
  • COMPARE: If you have gone wrong you can always open the tool in a new browser and compare the code up to where you have got to. You can then copy the relevant section back across
  • DON'T REFRESH: Don't refresh the tool or press F5 until you have finished and saved out your data pic - otherwise YOU WILL LOSE YOUR WORK (worth remembering!)
  • DON'T PANIC: Even if you do have to start again - it's all good practice...

Right, let's get started. The screengrabs below show the tool in action stage by stage.

We've added arrows to the relevant parts of the code to help you out.

line
1. The title

This is the headline describing what your data pic is about.

  • Keep it short and simple - three or four words that sum up the numbers you're showing.
  • Don't go on to two lines or the data pic will break!
  • In the code, you're looking for <h2 class ="title" id="title" onkeyup="showAnnnotation()">
  • Change the text Enter Main title - keep short before the closing </h2> tag
  • See the changes appear on the preview screen

Remember the data pic will be on a page with its own headline, so readers will already be familiar with the story so try to make it different to the headline on the page.

header
line
2. Sub-header

You may want to add a line of text to give the reader a little more information than you can fit in the header.

Are these numbers up to a certain date? Are they Numbers for England and Wales only or responses from Girls at your school, or just based on Class 3B?

This will help the reader understand the numbers a little better - especially if you're using percentages: 50% of women in the United States is a lot, but 50% of Class 3B is quite a bit smaller.

  • Keep it short and on one line
  • In the code you're looking for <h3 class="subtitle" id="subtitle">
  • Change the text Enter subtitle before the closing </h3> tag
Subtitle
line
3. The BIG number

This is the big number. It doesn't always have to be your biggest number - but it should be the most important number.

If your story is about school dinners, then the big number might not be 800 children have lunch, it might be 25% of pupils who bring packed lunches have Marmite sandwiches.

Or you could use the big number as the total - 800 pupils at St Thomas's - with the following numbers as the breakdown - 400 have hot meals, 200 have Marmite sandwiches, 150 have crisps and rolls, 50 have salad.

If you are talking big, big numbers then it's ok to spell out the millions and billions eg 3.2 million etc

Although sometimes you might want to use 3,522,222 - as it looks bigger!

  • In the code you're looking for <p class="super_impact_fig">
Big number
line
4. Text for the BIG number

What is your big number? Is it number of things, or number of times, or things a number of times? Spell it out.

  • In the code you're looking for <p class="paragraph">
Big number text
line
5. List of secondary numbers

After the BIG number, you have the list of secondary numbers.

These could be a breakdown of the BIG number if you're using it as a total or a set of related figures on the same subject.

You can order them how you like. If they are a breakdown, you might want to put them in size order.

If they are a set, then go with the most interesting first.

  • In the code you're looking for <li class="impact">
  • Each entry in the list has a paragraph that starts <p><span class="impact_fig">
  • Enter the number first, then </span> then the text before the closing <p>
List
line
6. Source

Letting your reader know where your information is from is very important.

Look out of the window and ask how many birds there are in the playground. You will get different answers from different people. If someone gets paid to go and count the birds, then the people doing the paying will want to show they made an extra effort to get those numbers. Or you might want the credit yourself!

So always add your source. It makes it clear you haven't just made them up!

You may have different sources for different entries in the list. Make sure they are all entered here.

  • In the code you're looking for <div class="footer small-text ">
  • Below the code to change the source of the numbers, you can also add a credit to show where your photo is from
Source
line
7. Background photo

The photo - almost as important as the numbers, but not quite. You need a photo that stands out and will grab people as they scroll down the page.

First take or choose your photo. Things to remember:

  • Your image needs to be related to your numbers.
  • Make sure it isn't already being used elsewhere in the story
  • Make the subject quite large and in the right-hand side of the image - the numbers will be on the left-hand side, so if you're too close you'll cover up half your image.
  • Make sure you have permission to use the image - you can't just take pictures off Google or another website, as they own the copyright. You can however use any image used on the BBC News website with a credit from AP, PA, AFP, Getty or Reuters.
  • If you find an image that is 624 pixels by 351 pixels on the website: Right click and select Copy image URL then you have a published image to paste into the code
Using your own image
  • If you have your own image they need to be 624 pixels by 351 pixels and published on a server.

In the code you're looking for url( where you can paste your image url (ending .jpg) between the brackets

Image url

Then you should see your image change:

Image

Here are a few more images you can use, or have a look on the School Report index:

//news.bbcimg.co.uk/media/images/80818000/jpg/_80818402_phone.jpg

//news.bbcimg.co.uk/media/images/80314000/jpg/_80314175_142610768.jpg

//news.bbcimg.co.uk/media/images/79917000/jpg/_79917296_mobilepay.jpg

//news.bbcimg.co.uk/media/images/79926000/jpg/_79926662_488768145.jpg

//news.bbcimg.co.uk/media/images/79587000/jpg/_79587609_024938278-1.jpg

//news.bbcimg.co.uk/media/images/80878000/jpg/_80878150_ipad.jpg

//news.bbcimg.co.uk/media/images/80878000/jpg/_80878154_ipad2.jpg

We have a further selection of photographs for you here.

line
8. Copy your code

YOU CAN'T HIT SAVE so make sure you copy your code. Select all the code in the left hand window and COPY and paste it somewhere safe. (If you're building your own webpages you can add this to the page html).

REMEMBER DO NOT REFRESH or you will lose your great work!

line
9. Preview your data pic

To see how your data pic is going to look, press the Preview button top right. This opens on a new page.

Preview
line
10. The data pic!

You've done it! You've made a data pic.

  • Check your spellings - it may be easier to see mistakes here than in the code
  • If you've made a mistake (we all do sometimes..) then go back to the code and make the change
  • Preview again and if you're happy take a screenshot by pressing Ctr+Alt+Prt Scr (on a PC) or cmd+shift+3 (on a Mac)
  • Then use file preview or your photo editing tool to crop to 624px by 351px and save data pic as a jpeg.
datapic

line

More on This Story

The BBC is not responsible for the content of external Internet sites