Mashups & Data Visualizations: The New Breed of Web Applications


Published on

Web 2.0 is opening the doors to tools and toolkits for do-it-yourself (DIY) programming that requires no knowledge about programming. Find out what mashups are and how libraries are making use of them to create rich, new information services and content. Look at some of the intriguing and robust new data visualization tools, such as IBM’s alphworks, swivel, gapminder (bought by Google), etc. that can put the power of spreadsheets online for everyone in your organization to present their information as tag clouds, bar and pie charts, bubble maps, and more.

Presented by Darlene Fichter October 31, 2007 at Internet Librarian 2007

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Mashups & Data Visualizations: The New Breed of Web Applications

    1. 1. Mashups & Data Visualizations: The New Breed of Web Applications Darlene Fichter October 31, 2007
    2. 2. Outline Mashups Library Examples Data Visualization Tools Library Opportunities Over to You
    3. 3. The eyes only see what the mind comprehends Confocal micrograph by Ludovic Collin
    4. 4. Web 1.0 <ul><li>Realm of folks that knew HTML coding </li></ul><ul><li>Programmers </li></ul>
    5. 5. Web 2.0 <ul><li>Everyone can participate </li></ul><ul><ul><li>Don’t need to know HTML </li></ul></ul><ul><ul><ul><li>Blog, wiki, .. </li></ul></ul></ul><ul><li>Citizen journalists, explosion of stock photo sites </li></ul>The rise of the amateur programmer.
    6. 6. DIY Programming <ul><li>5 minute customization of applications </li></ul><ul><ul><li>No longer the purvey of the techno elite </li></ul></ul>
    7. 7. Definition <ul><li>A mashup is a web application that uses content from more than one source to create a new service </li></ul><ul><ul><li>Content is typically sourced via an API* or a RSS Feed </li></ul></ul><ul><li>Term comes from pop music </li></ul>*API - set of routines for accessing an application or service
    8. 8. What’s a Mashup? Photo by fensterbme via flickr (CC)
    9. 9. Mashup Ecosystem <ul><li>Open data </li></ul><ul><li>Open set of services & applications (APIs) </li></ul><ul><li>Us </li></ul>
    10. 10. Mashup Ecosystem
    11. 11. <ul><li>Open Content </li></ul>Web Mashups Applications
    12. 12. 2456 Mashups Programmable Web – Mashup Dashboard
    13. 13. Mashups and Web 2.0 Implications <ul><li>Fastest growing ecosystems </li></ul><ul><li>Don’t have to get anybody’s approval to provide a new API to the Internet operating systems </li></ul><ul><li>Content that can be repurposed and remixed gets used </li></ul>
    14. 14. Mashup Tools <ul><li>Yahoo Maps </li></ul><ul><li>Frappr </li></ul><ul><li>Google Maps </li></ul><ul><li>Yahoo Pipes </li></ul><ul><li>Popfly </li></ul>
    15. 15. Earthquake API - Yahoo Maps Data - U.S. Geological Survey
    16. 16. Frappr Google API Community contributed content Easy to use of anyone
    17. 17. Google My Maps <ul><li>Go to </li></ul><ul><li>Click on My Maps </li></ul><ul><li>Add pushpins plus notes to create a map </li></ul><ul><li>Embed the code in your library site </li></ul><ul><ul><li>Library branches </li></ul></ul><ul><ul><li>Historical buildings </li></ul></ul><ul><ul><li>Locations in stories </li></ul></ul>Easy to use of anyone
    18. 18. Google API Directory data
    19. 19. McMaster Aerial Photos 5,000 aerial photographs of Hamilton, Ontario Google API Library aerial photo index
    20. 20. Western Springs History a joint project of the Thomas Ford Memorial Library and Western Springs Historical Society http:// /map/ Local data: Easy for anyone who can edit some HTML or XML files. Google API Location of Historic Buildings
    21. 22. 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; /&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;;/> <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;;/> <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;;/> <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;;/>
    22. 23. Yahoo Pipes <ul><li>Tutorial </li></ul><ul><li> </li></ul>
    23. 24. Find a Library
    24. 25. Book Carousel Syndetics - Book covers Data - Top 20 new books
    25. 26. Try More Tools
    26. 27. Unintended consequences <ul><li>Garbage in, garbage out </li></ul><ul><li>Client side scripts that modify pages </li></ul><ul><ul><ul><li>All instances of Microsoft on any site are rewritten to say “the d*!?! Microsoft” </li></ul></ul></ul>
    27. 28. Population Density of the USA
    28. 29. Web Site Structure
    29. 31.
    30. 32. Data Visualization Tools
    31. 33. Newsmap USA Canada
    32. 34. Facets as Elastic Lists
    33. 35. Social Sites for Data Visualization <ul><li>Allows new kind of data analysis </li></ul><ul><li>Both curious and serious, statistician and the citizen </li></ul><ul><li>Important new medium </li></ul>
    34. 36. Social Data Sites Photo by maqroll Slide: Tom Coates, Yahoo!
    35. 37. Social Data Tools Gapminder Swivel Many Eyes
    36. 38. Swivel
    37. 39. Swivel – Tasty Data Goodies
    38. 40. Pumpkin Production
    39. 41. Data Badge
    40. 42. Why is the Sun called a dwarf?
    41. 43. Many Eyes
    42. 44. Love
    43. 45. Many Eyes <ul><li>1. View and discuss visualizations </li></ul><ul><li>2. View and discuss data sets </li></ul><ul><li>3. Create visualizations from existing data sets </li></ul><ul><li>If you register, you can also: </li></ul><ul><li>4. Rate data sets and visualizations </li></ul><ul><li>5. Upload your own data </li></ul><ul><li>6. Create and participate in topic hubs </li></ul><ul><li>7. Select items to watch </li></ul><ul><li>8. Track your contributions, watchlist, and topic hubs </li></ul><ul><li>9. See comments that others have written to you </li></ul>
    44. 46. Amazon API -shows relationships betwen movies, actors, directors ...
    45. 47. Trendalyzer / Gapminder Hans Rosling, gapminder software, transforms global trends into lively animations
    46. 48. Getting Started is Easy <ul><li>Step 1 – Get an idea </li></ul><ul><li>Step 2 – Create an account </li></ul><ul><li>Step 3 – Read the fine print about use </li></ul><ul><li>Step 4 – Create it! </li></ul><ul><li>API: Sign up for a developer token </li></ul><ul><ul><li>http:// / </li></ul></ul><ul><ul><li>http:// / </li></ul></ul><ul><ul><li>http:// </li></ul></ul>
    47. 49. Thank you <ul><li>Darlene Fichter </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li> </li></ul></ul>