Mashups & Data Visualizations: The New Breed of Web Applications Darlene Fichter October 31, 2007

Outline Mashups Library Examples Data Visualization Tools Library Opportunities Over to You

The eyes only see what the mind comprehends Confocal micrograph by Ludovic Collin

Web 1.0 Realm of folks that knew HTML coding Programmers

Realm of folks that knew HTML coding

Programmers

Web 2.0 Everyone can participate Don’t need to know HTML Blog, wiki, .. Citizen journalists, explosion of stock photo sites The rise of the amateur programmer.

Everyone can participate

Don’t need to know HTML

Blog, wiki, ..

Citizen journalists, explosion of stock photo sites

DIY Programming 5 minute customization of applications No longer the purvey of the techno elite

5 minute customization of applications

No longer the purvey of the techno elite

Definition A mashup is a web application that uses content from more than one source to create a new service Content is typically sourced via an API* or a RSS Feed Term comes from pop music *API - set of routines for accessing an application or service

A mashup is a web application that uses content from more than one source to create a new service

Content is typically sourced via an API* or a RSS Feed

Term comes from pop music

What’s a Mashup? Photo by fensterbme via flickr (CC)

Mashup Ecosystem Open data Open set of services & applications (APIs) Us

Open data

Open set of services & applications (APIs)

Us

Mashup Ecosystem

Open Content Web Mashups Applications

Open Content

2456 Mashups Programmable Web – Mashup Dashboard http://www.programmableweb.com/mashups

Mashups and Web 2.0 Implications Fastest growing ecosystems Don’t have to get anybody’s approval to provide a new API to the Internet operating systems Content that can be repurposed and remixed gets used

Fastest growing ecosystems

Don’t have to get anybody’s approval to provide a new API to the Internet operating systems

Content that can be repurposed and remixed gets used

Mashup Tools Yahoo Maps Frappr Google Maps Yahoo Pipes Popfly

Yahoo Maps

Frappr

Google Maps

Yahoo Pipes

Popfly

Earthquake API - Yahoo Maps Data - U.S. Geological Survey

Frappr http://www.frappr.com/blogginglibrarians/ Google API Community contributed content Easy to use of anyone

Google My Maps Go to maps.google.com Click on My Maps Add pushpins plus notes to create a map Embed the code in your library site Library branches Historical buildings Locations in stories Easy to use of anyone

Go to maps.google.com

Click on My Maps

Add pushpins plus notes to create a map

Embed the code in your library site

Library branches

Historical buildings

Locations in stories

Chocomap.com Google API Directory data

McMaster Aerial Photos 5,000 aerial photographs of Hamilton, Ontario Google API Library aerial photo index

Western Springs History a joint project of the Thomas Ford Memorial Library and Western Springs Historical Society http:// www.westernspringshistory.org /map/ Local data: http://www.westernspringshistory.org/map/data.xml Easy for anyone who can edit some HTML or XML files. Google API Location of Historic Buildings

data.xml <markers> <marker lat=&quot;41.809488&quot; lng=&quot;-87.903845&quot; img=&quot;&quot; descr=&quot; Benezette Williams House &quot; addr=&quot;4380 Central&quot; url=&quot; http://www.westernspringshistory.org/4380-central /&quot;/> <marker lat=&quot;41.813353&quot; lng=&quot;-87.903827&quot; img=&quot;&quot; descr=&quot;Bonham House&quot; addr=&quot;4210 Central&quot; url=&quot;http://www.westernspringshistory.org/4210-central/&quot;/> <marker lat=&quot;41.813000&quot; lng=&quot;-87.899300&quot; img=&quot;4636woodland.gif&quot; descr=&quot;Claes Arbeen House&quot; addr=&quot;4636 Woodland&quot; url=&quot;http://www.westernspringshistory.org/4636-woodland/&quot;/> <marker lat=&quot;41.809578&quot; lng=&quot;-87.903822&quot; img=&quot;&quot; descr=&quot;Cropp House&quot; addr=&quot;4381 Central&quot; url=&quot;http://www.westernspringshistory.org/4381-central/&quot;/> <marker lat=&quot;41.813400 &quot; lng=&quot;-87.903839&quot; img=&quot;&quot; descr=&quot;Eagleston-Blair House&quot; addr=&quot;4206 Central&quot; url=&quot;http://www.westernspringshistory.org/4206-central/&quot;/>

Yahoo Pipes Tutorial http://mrspeaker.webeisteddfod.com/2007/02/10/yahoo-pipes/

Tutorial

http://mrspeaker.webeisteddfod.com/2007/02/10/yahoo-pipes/

Find a Library

Book Carousel Syndetics - Book covers Data - Top 20 new books http://www.cambridgelibraries.ca/hot/carousel.cfm

Try More Tools

Unintended consequences Garbage in, garbage out Client side scripts that modify pages All instances of Microsoft on any site are rewritten to say “the d*!?! Microsoft”

Garbage in, garbage out

Client side scripts that modify pages

All instances of Microsoft on any site are rewritten to say “the d*!?! Microsoft”

Population Density of the USA http://www.time.com/time/covers/20061030/where_we_live/

Web Site Structure http://www.aharef.info/2006/05/websites_as_graphs.htm

Wired.com

Data Visualization Tools

Newsmap http://www.marumushi.com/apps/newsmap/newsmap.cfm USA Canada

Facets as Elastic Lists http://well-formed-data.net/experiments/elastic_lists/

Social Sites for Data Visualization Allows new kind of data analysis Both curious and serious, statistician and the citizen Important new medium

Allows new kind of data analysis

Both curious and serious, statistician and the citizen

Important new medium

Social Data Sites Photo by maqroll Slide: Tom Coates, Yahoo!

Social Data Tools Gapminder Swivel Many Eyes

Swivel

Swivel – Tasty Data Goodies http://www.swivel.com

Pumpkin Production

Data Badge

Why is the Sun called a dwarf? http://services.alphaworks.ibm.com/manyeyes/view/SJjqGFsOtha6ICEU6EQIF2-

Many Eyes

Love

Many Eyes 1. View and discuss visualizations 2. View and discuss data sets 3. Create visualizations from existing data sets If you register, you can also: 4. Rate data sets and visualizations 5. Upload your own data 6. Create and participate in topic hubs 7. Select items to watch 8. Track your contributions, watchlist, and topic hubs 9. See comments that others have written to you

1. View and discuss visualizations

2. View and discuss data sets

3. Create visualizations from existing data sets

If you register, you can also:

4. Rate data sets and visualizations

5. Upload your own data

6. Create and participate in topic hubs

7. Select items to watch

8. Track your contributions, watchlist, and topic hubs

9. See comments that others have written to you

Amazon API -shows relationships betwen movies, actors, directors ...

Trendalyzer / Gapminder Hans Rosling, gapminder software, transforms global trends into lively animations

Getting Started is Easy Step 1 – Get an idea Step 2 – Create an account Step 3 – Read the fine print about use Step 4 – Create it! API: Sign up for a developer token http:// aws.amazon.com / http:// www.google.com/apis/maps / http:// api.search.yahoo.com/webservices/register_application

Step 1 – Get an idea

Step 2 – Create an account

Step 3 – Read the fine print about use

Step 4 – Create it!

API: Sign up for a developer token

http:// aws.amazon.com /

http:// www.google.com/apis/maps /

http:// api.search.yahoo.com/webservices/register_application

Thank you Darlene Fichter [email_address] library2.usask.ca/~fichter/

Darlene Fichter

[email_address]

library2.usask.ca/~fichter/