Five tutorials for news:rewired workshop

This post contains the tutorials for my workshop at news:rewired conference in London.

MAP WITH GOOGLE FUSION TABLES

This exercise is to make interactive map with Google Fusion Tables. The idea is to get data on life expectancy from World Bank, merge the data with country borders and style it.

1) Go to world bank website: data.worldbank.org. Get data “Life expectancy at birth, total (years)” . You have to download the excel file. (Click “Download data” on upper right hand corner and choose “Excel file”.) Direct link to data here.

2) Clean the data.
– Remove empty and unnecessary rows so that the years are in row one. (Right mouse click on row number, choose delete)
– Remove unnecessary columns: years from 1962 to 2005.  (Do not remove country code)
– If you want, calculate difference between 1962 and 20011.
– Save the file to your desktop.

3) Open Google Fusion tables here.
– Click “Create”.
– Select the Excel file have saved to your desktop. Click Next.
– If column names are on the first row, your data is good. Click next.
– Give the dataset a proper name.
– Click Finish and the file will be uploaded.

4) Next you have to get borders for countries to make the actual map. Do the following:
– Search for “IMF / ISO country codes with KML”. Direct link here.
– Click on first hit. The file should open on Google Fusion Tables

5) Next you have to merge the World bank data with country borders. Do the following:
- On the border data file you just opened, Choose File / Find a table to merge with. (Merge is on the top menu on old version)
– Enter the name of the data you uploaded previously. A autocomplete will appear. Choose your file.
- Select “ISO 3 Letter Code” from the left and “Country Code” from the right. Check the match.
– Give the merged table a proper name.
- Click “Merge tables”, and click view table

6) Open the Map tab. If it’s not present, add a map tab.  (Click on the red + button).

7) To change map colors, do the following:
- On left sidebar, click “Change feature styles”
– Choose Polygon Fill Color
– Go to Buckets tab. Select Divide into buckets and choose 2011 as the variable.
– Click “Use this range” to select range based on data
– Click Save. A styled map will appear.

8) To style popup, do the following:
– On left sidebar, choose Change info window
– Select country name and 2010 to be only active fields
– You can style the popup more, if you know HTML. Use the Custom tab.

9) To publish the map, you must make it public. Use Share button on the upper right corner. Then use Tools/Publish to have the link.

DATAWRAPPER

This excercise shows how to use Datawrapper.

1) First log on to Datawrapper.de and make an account. You have to provide a working email to verify your account.

2) With Excel, make data that contains 10 countries and their life expectancies (Use the data from previous excercise). First row must contain headlines Country and Life Expectancy.

3) Go to datawrapper. Click Create chart

4) Paste your data to the field. Click Upload and continue

5) Describe your data in tab 2. Put the link to the world bank data here. Click Visualize.

6) Select chart type. Click tab “2 Refine the chart” to sort data, if necessary. Click tab “3 tell the story” to put headlines in place.

7) Click proceed to publish the chart and get Iframe code.

 

MAKE A TIMELINE WITH TIMELINEJS

This is tutorial for making interactive timeline with TimelineJS. You’ll need a Google account for this.

1) Go to TimelineJS page here

2) Go to “Make a timeline”. Click on the button that says Google Spreadsheet Template

3) When the window has opened, click “Use this template”. You will see a Google Spreadsheet document. This document contains the content of the timeline. One row is one slide.

4) Remove rows 5 to 9 from the file.

5) Enter some content for first slide.
– Go to row 2 in the spreadsheet.
– On row 2, in column “Headline”: Write a headline for the timeline. (“Battle of Britain”)
– To cell “Text”, write content for the cell. (“Our timeline shows events of WW2.”)
– Add image by adding valid url to “media” field. (Use: http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Battle_of_britain_air_observer.jpg/300px-Battle_of_britain_air_observer.jpg)

7) Repeat part 5 for rows 3 and 4. Make up some content and images from Wikipedia.

8) Click “Publish to the web” from pull down menu “File”. When a dialog opens, click “Start publishing”

9) An url will appear to the bottom of dialog window. Copy it to clipboard. The URL looks like this: https://docs.google.com/spreadsheet…

10) Go back to TimelineJS page. Paste the link you copied to field “Google Spreadsheet URL”

11) Click “Link to preview”. You’ll be seeing a working timeline.

12) You can add rows to Google Spreadsheet. When you reload the timeline, it should reflect the changes.

 

GOOGLE FORMS

This is an excercise to make small crowdsourcing project with Google Forms. Remember, that Google won’t accept very large data sets: size limit is 400 000 cells.

1) Go to Google Drive and select Create Form.

2) Enter name and select the default theme.

3) To Form Description enter the headline and some explanation. Be clear: what you are asking the users?

4) Enter the first question.
– Put the question to field “Question Title”. (“When and how did you meet your spouse?”)
– Select type of question from “Question type”. (“Use Paragraph text”)
– Click “Required question”. It forces the users to fill this field
– Click Done

5) Enter question for Email.
– Click “Add item” and select “Text”
– Enter “What is your email” to Question title
– Click “Data validation”. Select “Text” and “Email address”. This is to verify that users really enter email.
– Click Done

6) Edit the confirmation page to reflect what the user will see when he or she sends the form.
– Edit the text in “Your response has been recorded.” field.

7) Send form or embed it in your page.
– Click “Send form in the bottom”
– Copy the link and send it or share in social media
– If you want to embed the form, click embed button in the dialog. Copy the Iframe.

 

 INTERACTIVE IMAGES WITH THINGLINK

This is an excercise to add interactivity to image with Thinglink.

1) Sign up an account: www.thinglink.com

2) Click “Create” on top right corner. Upload an image or choose “web” from top menu and enter an address for image.

3) Click on the image to create first hotspot. Enter some text.

4) On left top corner, enter search term. Select some video from Youtube.

5) On top right corner, click + or -. You can also drag the image around, if you want to crop it.

6) On sharing settings, select “unlisted”. You can make your image ready before the story is published.

7) Click save. There’s a share button on right hand side. Get the embed code there.

Seven Imporant Issues Data Journalists Should Discuss Now

Fusion Tables tutorial, how antique!

This was my first impression when I looked at the program of Nordic Data Journalism Conference held at Stockholm, Sweden.

I´m attending the conference as invited speaker. I have a slot of 30 mins to tell about best practises in Helsingin Sanomat data desk, which I run.

After that, I´ll have plenty of time to listen to others. In the program, there are topics like “what is a data desk” and “using excel”.

These are good things to learn for beginners. But for once, I´d like to discuss real everyday problems about my work with seasoned colleagues in the same field. (And like in every conference, that happens also here in evening sessions.)

If I would organize a professional data journalism conference, there would be presentations on these topics:

IN APP-ANALYTICS
One of my main concerns is: do our news apps work?

We know, that the headline determines the click rate and people spend more time in articles with news apps. What we don´t know is: Do our readers click and use our apps?

We just made our first trial to record user behavior few weeks ago. We basically attached a logging event to every possible click in one of our news apps.

People did click it, 96% of all entries to article page clicked on the app. So result was good. But there were problems with the logging, so this high result cannot be trusted.

From a presentation, I´d like to hear: How to measure in-app clicks? What is a good conversion percentage?

ARE SNOW FALLS A FAD?
“Avalance it!”

This is the new hip slogan in digital newsrooms. After NYT published the avalanche piece Snow Fall, our bosses have been demanding us to do the same.

They look great. South China Sea piece, Tomato Can Blues and also the things we´ve made are visually impressive.

But the real issue is: have you actually read the whole Snow Fall?

For readers, are they better than text? Do Snow Falls work? Do we make these things just to get the WOW! -effect, not to tell the stories best way possible. Perhaps text and images would still be a better way, just like Medium does it.

My hypothesis is, that they are just thought to be nice, but in the long run our readers don´t like them more than regular well-written articles.

ETHICS OF DATA JOURNALISM
In the wake of Snowden revelations of NSA spying on everyone, the tools of data journalists need closer scrutiny.

By combining data bases we have a strong tool to get info even on individual people. As an emerging profession, we have not thought what lies in the end of this road.

All that is public and open data cannot be published, if we are to remain ethical in our work. This applies to names of real people, but also information gathering and crowdsourcing.

For example: is it ok for a (digital) newspaper to publish a database of 160000 richest people in Finland and their income since 1999? I think it is, but there could be good arguments against this.

MOBILE FRIENDLY NEWS APPS
As mobile penetration nears half of all users, we need to focus on making news apps mobile friendly. Actually, this has been so for the last two years.

It´s not easy. We have to make things work with IE8 (thanks a lot Jquery 2.0 and D3) and at the same time have things work in mobile.

Our solution is to make everything responsive between 298 and 560 pixels (our text area min and max width). We do the app in 560 and then scale it.

So, how to cope with small screens?

DATA IS GOOD, IDEAS ARE BETTER
Open data folks are obsessed with getting the data. It has been an important issue for many years and the opening of data in Finland is not yet complete.

But at the same time, we should look forward. Analyzing the data is quite primitive still almong journalists.

Where could we get better ideas from?

PUBLISHING YOUR STUFF
To Iframe or not to Iframe? That it the question everybody must answer and both replies come with a price.

We have opted for using Iframes. It gives us speed and flexibility, but the price is that we have no control of the whole (parent location href parameters, anyone?).

How should we publish our things? Are there tools to make Iframes better?

ORGANIZING THE WORKFLOW
We use Trello to organize our projects. We have a development and production servers to test and deploy our stuff. We are starting to use Git as version control tool.

I´d like to know what kind of advanced tools and workflows are used in day to day business in datadesks worldwide.

Use Google Docs and TabletopJS to Host Data for News Apps

Our data desk uses templates to make News Apps quickly. We have a Style Book that contains a set of News App templates we can modify and publish very fast.

One problem of this approach has been how to get the data from the journalist to an app template smoothly. Journalists usually don’t code, so we needed some easy, flexible tool for this.

Our solution is to use Google Docs and TabletopJS as CMS for News Apps. Basically we try to separate News App code and content from each other.

When journalist wants to make a News App from a template, he or she enters the data to a preformatted Google Spreadsheet (with our help). The app then gets the data from Google Docs. Journalists can concentrate on the content and coders can make any twists to template that might be needed.

Benefits for this approach are tangible.  Journalists can do their work in their own pace and they see instantly the preview of the changes they make. This also reduces our work, as we don’t need to hardcode the content. Plus, the the journalist can make as many revisions as they please just until the deadline. Many people can work on one  spreadsheet, so it makes work faster and there are no problems with version control.

Technically, an app fetches data from Google Spreadsheets using TabletopJS by Jonathan Soma. Data is in JSON and later an array in Javascript. When we push the app to production, we pull the data from Google Docs to a local proxy. This is done by simple Ruby program from Tabletop package. Sometimes we also have a cron script updating the proxy if the data is changing regularly.

Using proxy is important, as Google Docs API has rate limits. Before we implemented proxy, one very popular app failed during the first rush after it was published.

Google Docs  and TabletopJS work best with numeric data and short texts. For example our quiz template stores all question texts in Google Docs. With longer texts this approach is not very flexible. Texts in our web layouts (like this) are still hard-coded. We are still looking for a solution that would allow us to use texts in similar way.