Beginners tutorial for making interactive visualizations
This post contains the tutorials for my workshop at Nordic Data Journalism Conference in Ã…lesund, 30-31 jan 2015. This is an update on my previous post on the subject.
All these tools are free to use and to embed to media websites. Datawrapper is bit complicated and Fusion Tables has some very good alternatives, like CartoDB.
INTERACTIVE MAP OF YOUTH UNEMPLOYMENT
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 “Unemployment, youth male (% of male labor force ages 15-24) (national estimate)” . 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 2010. Â (Do not remove country code)
– If you want, you can leave more years and calculate difference between 2011 and 2004.
– Save the file to your desktop.
3)Â Upload data to Google Fusion Tables
–Â Open Google Drive and click “New”. Select Google Fusion Tables (if you don’t have it as an option, click connect more apps in the bottom)
– 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. Future you will thank you for this.
– 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, go to File menu and select Merge
– The file you just uploaded should be first in the list. If not, use search (surely you renamed the file). Choose the file.
– Select “ISO 3 Letter Code” from the left and “Country Code” from the right. Check the match.
– Select all to be merged.
– Click “Merge tables”, and click “View table”
6) Open the “Map of Geometry” tab. If it’s not present, add a map tab. Â (Click on the red + button).
– Zoom in to see borders instead of dots
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 “2” 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: GRAPH OF YOUTH UNEMPLOYMENT
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 top 10 countries with highest youth unemployment (Use the data from previous excercise). First row must contain headlines Country and Youth unemployment
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 “Proceed”.
6) Select chart type. Click tab “Refine” to sort data, if necessary. Click tab “Annotate” to put headlines in place.
7) Click proceed to publish the chart. Download it for your own server or buy single license.
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ä