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.
Jaa Twitterissä