How to create data-centric, interactive web pages with Silk

In a recent talk at the News Impact Summit in Berlin, Nicolas Kayser-Bril, chief executive of Journalism++, said data journalism has become a commonplace practice in most newsrooms, and asked whether this leads to it no longer being considered a specialism.

But at the same time, he pointed out the data journalism training available on courses nowadays does not necessarily fill in all the skills gaps.

Working with numbers and spreadsheets can be overwhelming if you have a large or complex data set, if you are just starting out in data journalism, or if you are uncertain of what your angle should be for interrogating a specific set of information.

Here at Journalism.co.uk, we have written before about Atlas, Quartz's platform for creating and hosting charts, and MapHub, a mapping tool to draw connections between points of interests, so today we will be looking at Silk, a tool which brings the two together, allowing journalists to build data-centric web pages with maps, charts, multimedia embeds and more.

Silk is a freemium tool – signing up for free will allow users to build public, shareable Silks, collaborate with others on their projects, and use up to 1000 datacards for your visualisation. If you are planning to use Silk extensively and need a larger number of data cards and the ability to work privately on project, those features are available at a cost.

Here's how to get started with Silk:

1. Go to silk.co and sign up for a free account. After giving your project a title, Silk will provide you with different options to choose the data you want to work with.

This data can be manually entered, uploaded as a .csv file, uploaded from Google Sheets, pasted from a document or automatically extracted from a website of your choice.

You can also practice on one of Silk's example data sets, such as data on highest paid athletes or Kickstarter projects. I have chosen to use their sample for Environmental Protection Agency (EPA) violations.

2. In Silk, each column of a regular spreadsheet can be a 'datacard'. As my chosen dataset contains facts and figures related to EPA violations across 47 US states, each state, with its corresponding information that can be previewed on the right hand side, is a datacard. This means my project will use 47 datacards from the 1000 available for free.

Click on the 'state' column and select 'start import' on the top right of the page – it should only take a few minutes for your data to be imported.

3. You will now see the Silk menu at the top, with four tabs. The first one is your dashboard, where you can visualise your data in different formats, such as table, list, groups, map, mosaic.

For the state data I chose to lead with, only these visualisation options are available, as the rest of the formats – column, scatter plot or pie chart for example, require more numeric data in your datacards to produce said visualisations.

At this point, you can navigate to the 'datacards' menu tab to add more numeric data. You will see a carousel of all your datacards. If you are not using a default Silk dataset, clicking edit on any of these cards will allow you to add more facts, for example more numbers about the level of pollution in each state.

(If you are keen to have a line graph or pie chart in your project, I would recommend using the dataset on highest paid athletes, which contains more numeric data.)

4. In the 'explore' section, I have chosen to display the data as an interactive map of US states, which I can further personalise by toggling the 'location', 'number plot', 'colour by' and 'show on click' features.

For the location, I selected the state option.

For 'number plot', which places pins or dots on each state, I chose 'average penalty', so the numbers displayed on the map now are how much each state has paid, on average, for EPA violations.

The 'colour by' feature introduces a set of colours for each state pin according to how many EPA-violating facilities the state has – for example, Utah and Nebraska both have 8 violating facilities, so they are marked purple.

Finally, you can choose tags for what you want the visualisation to display when a user clicks on a state. I went with 'total penalties' and 'state flag'.

By now, your map should show the average penalty of state datacards, mapped by page name and coloured by number of EPA violating facilities, and it should look like this:

5. Once you're happy with it, click 'use this visualisation' at the top. You can now share your visualisation on Twitter, Facebook and other platforms, embed it or choose to publish it to a page.

If you choose to publish it to the homepage, on the following screen you can preview the map and use the '+' buttons in between to add further elements to your web page, such as text, images, videos, audio or tweets.

I have added a paragraph of text and embedded the feed from the United States' EPA Twitter account, but you can add more to essentially build a website with one or more pages around this specific topic and dataset.

The map, the section containing the state datacards, and the two interactive graphs at the end of my page can all be individually embedded to a website, shared or further edited if you would like to amend some of the features.

Here's what my finished test page with Silk about EPA violations looks like:

Have you tried Silk? If you experiment with the tool, let us know how you get on by tweeting us at @journalismnews. Get in touch if you'd like to recommend a tool or an app that could be useful to journalists.

Free daily newsletter

If you like our news and feature articles, you can sign up to receive our free daily (Mon-Fri) email newsletter (mobile friendly).