Digital Scholarship Training Session 2: 21 January 2014

By Rory McNicholl of ULCC

Exercise 1 – When? Arranging data on a timeline

In this exercise, we are going to use TimelineJS to arrange our data on a timeline. Timeline JS is a service run by NorthWestern university and is a nice combination of usability, complexity and style (in my opinion anyway). Other timeline creating web applications abound and here is a useful comparison chart:

TimelineJS is also “open source” so if you ever find yourself with the funds to engage a developer you can really go to town! It also gives you control over your data which is held in a google spreadsheet. With TimelineJS, you can be up and running in four steps allowing you to concentrate on filling your timeline with interesting data and resources that beautifully narrate the story you are telling.

a) Got to and click on “Make timeline now”.

b) Follow the 4 steps (they explain it better than I ever could)

c) Click “Link to preview” opening in a new tab or window

Here is one I prepared earlier for the Language of access events and the data from which it was created. Timeline:


d) Try defining a “title” and an “era” using the type column at the end of the spreadsheet. (NB Eras do won’t show any descriptive text or media, they are just a name and two dates)

e) TimelineJS tags allow you to categorise events. You can add tags into the tags column in your google spreadsheet. There is a limit to the number of different tags you can use. The tags will be manifested as horizontal “bands” in your timeline.

f) Go back to your google spreadsheet and add some more stuff. Try referencing images, video, audio. You will need reference your media resources with a URL. If they don’t already have one (ie they are stored on your hard drive) you can upload them into the media library of your blog and take the image URL from there.

g) TimelineJS also handles a number of other web applications as media, so you can drop a link into the media column. This is possible for websites (it will automatically generate a thumbnail using pagepeeker). Also links to tweets, youtube and vimeo videos, flickr images, google maps (more on this later) and soundcloud tracks will be automatically rendered alongside your descriptive text if they are correctly referenced in the media column.


If you need to change the content of your timeline you simply edit the content of your google spreadsheet.

h) Finally go to your blog and on the edit page for your post you should be able to see an

Add Timeline button. This will bring up a form into which you can paste the same URL for your timeline spreadsheet as you used in b).


Check out the “more options” part of step 3 of timelineJS. Here there are some configuration options such as allowing hash bookmarks, so that you send links that go to a particular slide in your timeline eg


You can also copy and paste the “embed code” into a blog post or blog page, remembering to switch your blog editing box from visual to text before pasting. This can give you a little more control over how the timeline appears. For example you may wish to apply your own CSS stylesheet to the timeline and a reference to this can be added to the <iframe> tag.

Exercise 2 – Where? Mapping your data

In the second exercise we will plot our data as points on a map. You will be aware of numerous instances of “pins” and “info-bubbles” appearing all over on-line maps. Services such as historyPin allow contributors to place images on a map and date them to create a picture archive referenceable by space and time.

Navigating Nightingale


In this exercise we will learn how we can package our data such that it can be loaded into maps and used by others. We will use google Keyhole Markup language (KML) to hopefully achieve results a bit like this.

a) First of all go to and log in to your Google account.

b) Click on My places you may already have a number of maps from here. Here we have a choice when creating a new map – the red Create Map button and the link for Classic My Maps just below. For now we will click on the Classic My Maps link below the red button.

c) Firstly give your map a memorable name and if you like a short description. Now manoeuvre the map to the location and zoom that suits your dataset. In the top left hand corner of the map are some symbols you can use to edit the map and add data points.

Click the placemark (blue thing in the middle) and drop it at the location you wish to associate with your datum. This will bring up an edit box in to which you can enter your data. Use the rich text option to add links and images, and if you are feeling fruity you can try further styling with the edit HTML option. The placemark icon itself can be edited by clicking on it in the top right hand corner of the info-window when in edit mode. Choose from the menu or reference your own 64×64 pixel image (will need a URL).

d) Add a line or polygon using the right-most menu of the edit icons. Like placemarks, lines or areas are similarly associated with info-windows. Polygons and lines are styled by clicking on the blue square in the top right hand corner of their info-window

e) Click on save and done, you will now be looking at what the rest of the world will see when viewing your map. The KML link (circled below) allows you to download embed and distribute your mapped data.

Right click on this link and “copy link address” to the clipboard. Now we can embed our map in our blog.

f) Go to your blog dashboard. You will notice an item called Google Map on both the top and left hand menus. Choose the Shortcode Builder. There are various options you can explore later, but for now choose a title (anything memorable) and add a reference to you KML in the box circled below

Your KML reference should still be on your clipboard, if not you can go back to my maps and grab it again.

Now you can insert your map into a post or page whenever you choose. From your blog dashboard find the Saved shortcode option in the Google Map menu.

Maps Engine Challenge If you have a lot of data to plot you may want to choose the big red button that says Create Map from the My places part of Google maps. Then you’ll have options for importing your data from a simple spreadsheet (CSV). This data can be arranged into layers and styled according to values (numeric ranges etc).

If you don’t have a lot of data I have prepared some world bank data on CO2 emissions. Use the Maps Engine to highlight the differences between different countries’ emission rates.

(NB unfortunately there is a 100 row limit on the data import. Also in Maps Engine you cannot use the KML link to embed into your blog, but you can embed using an <iframe>)


Cross reference your map and timeline You can include your map in the media column of your timelineJS spreadsheet, though you will need to reference the KML address.

 In your map data points, you can also include links to specific items in your timeline by using the hash bookmarks.



StoryMapJSFrom the same stable as TimelineJS comes this rather lovely thing: Could be a very useful visualisation for those with a strong spatial narrative in their data.

Google Maps – GroundOverlays

In the archaeological example at the start of the exercise an image has been overlayed on a Google map to show location of certain sites of interest. To do this you need to edit your KML file (a type of XML). If you have an image that you think would work in this way look at these instructions. Add the necessary to your KML file. To appreciate the “drape” effect you may want to open your KML file in Google Earth (if available).


Even staying within the paradigm of timeline and map visualisations there are a host of other applications and standards available for use. Some are simple enough for the non-techie to get stuck in, others may need some development input. However the most important element for a compelling visualisation is the narrative that comes from those immersed in their field of interest. Below are just a taste of those worth looking into…


Tiki toki Simple to use timeline generator with even whizzier display
Simile Open source timeline project from MIT, very flexible, would need a javascript and/or css expert to make it really takeoff
Open street map Open source map data and API (Google insist that google map data is only used with their maps product)
Stamen maps A series of open map designs that can be used to make your maps even more beautiful
Styled Maps Wizard With this you can really customise the look and feel of your map. This style wizard is also available from within the WordPress Google Maps plugin.


Unfortunately the Google Map shortcode builder is not working so follow the instructions below to embed your map in a blog.

Replace the red part with the link to YOUR KML file and then paste that into a blog post (or page) and preview to see your map embedded in your blog.

[google-map-v3 shortcodeid=”TO_BE_GENERATED” width=”350″ height=”350″ zoom=”12″ maptype=”roadmap” mapalign=”center” directionhint=”false” language=”default” poweredby=”false” maptypecontrol=”true” pancontrol=”true” zoomcontrol=”true” scalecontrol=”true” streetviewcontrol=”true” scrollwheelcontrol=”false” draggable=”true” tiltfourtyfive=”false” enablegeolocationmarker=”false” enablemarkerclustering=”false” addmarkermashup=”false” addmarkermashupbubble=”false” kml=”” bubbleautopan=”true” distanceunits=”miles” showbike=”false” showtraffic=”false” showpanoramio=”false”]