If you're new to working with data, or unsure about the best way to represent your data on a BBC story, here is a quick guide to best practice.
If you're familiar with producing data visualisations or working with graphs and charts, make sure you've been added to the IDT user list - to get on the list go to iSite and submit an access request.
The toolkit is not designed to work with huge datasets. If your data has many hundreds of lines, it will probably break.
Note: Currently Google AMP, Facebook Instant Articles and syndicated feeds strip out includes from CPS stories, so the current advice is that you export charts as PNG files and add them to the stories as images, instead of using includes. Using the IDT Image generator will give a high quality PNG, which won't be compressed when published in CPS. Please use this rather than your own screen capture tools
Step By Step Guide
Watch the video and/or follow the steps below.
- Step 1: Log into iSite, and click on 'Create New->Datasets and Charts' (top-right):
- Step 2: Add a name for your chart/dataset:
- Step 3: Click ‘Launch' within the ‘Upload your data’ section:
- Step 4: Click 'Import Data' and choose a .csv file, or add the labels and data yourself. Save & Close when ready.
- Pie Chart Example: For pie charts, labels will be created from Column A:
- Line/bar Chart Example: For line and bar charts, labels will be created from Row 1. Column A will be your x-axis.
- Step 5: Click ‘Launch' within the ‘Build your chart’ section:
- Step 6: Customise your chart as needed, click refresh to review the animation.
- Step 7: When ready, click 'Save & Close' (top-right) to return to the iSite form.
- Step 8: Now, in iSite, click 'Save' and 'Preview' to view your chart in a responsive format. If you are happy, click 'Publish'.
- Step 9: Click ‘Launch' within the ‘Generate an image’ section.
- Step 10: Select the size of image that you wish to download (if you are creating an image for the app – leave as default and go to step 12):
- Step 11: Download your image:
You can now use this image in your content on CPS, Vivo or social media. The name of image file will end "-nc.png". This is important "-nc" means no compression: it ensures that the image remains crisp! Please do not add anything after the -nc (eg -nc2.png or -nc2thisisthefinalversion.png). When adding the PNG image in CPS, make sure you click the Cancel button if the image editor pops up.
If you still want to add this content as an include on your story please add text to the top of the page that says something like: “If you can’t see any of the images/charts below, please go to [hyperlink to the url of the CPS story you are publishing]”.
This will enable people who get to the story through the Google AMP url to go to the bbc.co.uk story where includes will work.
Includes Step1: Copy the include path from iSite, and add it to your CPS story as an 'include'.
Note: If you use the News or Sport include, it will automatically be converted to an image on the mobile app to ensure it can be viewed.
Now, add an 'Include File' to your page in CPS:
Then paste the include path from iSite into the 'Web' field, and a name in 'Title':
- Sanity check on small screens: Have a look at the chart on mobile as well as desktop, to make sure it looks OK.
Using data in a story
More and more data is available to journalists: Health data, schools data, spending data, sports data, data on pretty much anything. Often a simple graph is all you need in a story to really give the numbers some context. If a billion pounds was spent on a project this year, is that more or less than in previous years? What percentage is it of the department's total budget? How does that compare a similar in Denmark or France?
The IDT Charts tool allows journalists to enter or upload a simple dataset and generate line-graphs, bar-charts and pie-charts.
WARNING: IT IS EASY TO CREATE CONFUSING OR EVEN MISLEADING CHARTS. IF YOU'RE UNSURE ABOUT THE WAY YOU'RE USING DATA, CONSULT AN EDITOR OR SOMEONE IN THE VISUAL JOURNALISM TEAM.
Some example charts are shown below, with some information on their ideal usage.
Vertical Bar Charts
These are good for showing trends over time, and for grouping mulitple data sets:
Horizontal Bar Charts
Use these if you need many or long labels, or don't need to track data over time:
Use these for larger data sets, with many data points:
WARNING: This toolkit is not designed to work with huge datasets. If your data has many hundreds of lines, it will probably break.
These help to visualise/compare proportions or percentages. Use fewer than 5 groups: