The folks over at Google Chrome  have teamed up with Hyperakt and Vizzuality to put together the 2011 version of the Evolution of the Web visualization. It’s an interactive timeline that shows how the current web technologies have evolved over time. The color bands in the visualization represent the interaction between web technologies like HTML5, CSS3 and WebGL and browsers that we use daily. Screenshots from past versions of todays browsers are a nice addition (Mosaic 1.0 anyone?). As you would expect, it’s all built using purely open web technologies and the data is provided by Wikipedia and CanIUse.

For an article about Sweden’s most famous statistician Hans Rosling in Google’s “Think Quarterly” Magazine, Moritz Stefaner has remixed two of the famous Gapminder bubble graphics. The project was commissioned by The Church of London, the creative minds behind the limited-edition book and the companion website.

About Think Quarterly

The publication is curated by Google UK and is aimed at Google’s partners and advertisers. Nonetheless, the well written content makes the first issue a good read for all folks interested in how data is re-shaping business.

In a world of accelerating change, we all need time to reflect. Think Quarterly is a breathing space in a busy world. It’s a place to take time out and consider what’s happening and why it matters. Our first issue is dedicated to Data – amongst a morass of information, how can you find the magic metrics that will help transform your business? We hope that you find inspiration, insights, and more, in Think Quarterly.

The visualizations

Fertility and life expectancy is a condensed, and static version of one of Gapminder’s famous animated “worm” graphics. Among others, it shows how Vietnam is today on the same level as the US in 1980 with respect to the fertility rate and life expectancy. Scaling the diameters of the circles according to the years, and then connecting them, induces a sense of motion over time, even in this static image.

Child mortality dramatically shows how Bangladesh manages to reduce its child mortality with a rate faster than Sweden ever did. In the background, the mortality rates of all countries are plotted in light grey lines, in order to provide a sense of the density and distribution of the data over the years. Note how measurements seem to fluctuate strongly before the 1950s.

While we compare the two versions, it’s important to keep in mind that the original visuals are embedded in the powerful interface of the GapMinder and thus may seem a bit more complex. I think Moritz explains the changes over time with his static versions in a clear and elegant way.

With this years Zeitgeist application, Google captures the spirit of 2010. Billions of search queries are plotted on a map and we can skim through the year using an interactive timeline. Simple concept, well executed and the accompanying video is a nice recap of this year in search.

http://www.youtube.com/watch?v=F0QXB5pw2qE

Thanks, Stefan!

Google Zeitgeist are a set of lists ranking keywords by popularity from 1 to 10. Fastest rising and fasted falling are collections of keywords with big differences from 2008 to 2009. Right now there’s only the data as written text, but this could quickly be transformed into a visualization.

To compile the 2009 Year-End Zeitgeist, we studied the aggregation of billions of queries people typed into Google search this year. We use data from multiple sources, including Insights for Search, Google Trends and internal data tools. We also filter out spam and repeat queries to build out lists that best reflect “the spirit of the times.”

So get your tools ready and why not surprize us with your vision how this data could be best visualized.

Google’s official description reads:

Google Image Swirl organizes image search results into groups and sub-groups, based on their visual and semantic similarity and presents them in an intuitive exploratory interface.

How it works

Search results are represented as stacks of images whereas the first image is fully shown thus giving a clue about the type of images grouped together. The stacks represent the different visual perspectives for a term (see the Apple query as an example). Once the user selects a stack, the images spread out in a relations diagram grouped by visual similarity. The original results are still visible on the side, making it easy to navigate back to the original query. This can be done repeatedly to drill down into the search result. The thickness of the edges connecting the images and groups represent the size of the connected result—the more images are in a subset the thicker the edge is displayed.

Google Image Swirl is still an early protoype and the available queries are limited, which means you can’t already search for any term. I see a lot of potential in the combination between diversity and similarity of search results as it let’s you gain overview as well as focus on a specific type of result. I recommend having a look at it and would love to hear your opinions about it in the comments.

The interface is clutter-free and really easy to understand:

As you zoom in closer to an area of interest, we’ll color the arterial roads, in addition to the highways, to show current traffic conditions. Just as with the highways, the colors correspond to the speed of traffic (relative to the speed limit of the road): green is free sailing, yellow is medium congestion, red is heavy congestion, and red/black is stop-and-go traffic.

What more do we need to read the conditions of a road? Well done, Google.

Here’s how you can help making the the crowd sourcing work:

Using Google Maps for mobile with GPS enabled on your phone is required. When you choose to enable Google Maps with My Location, your phone sends anonymous bits of data back to Google describing how fast you’re moving. When we combine your speed with the speed of other phones on the road, across thousands of phones moving around a city at any given time, we can get a pretty good picture of live traffic conditions.

Read the original blogpost from Google or
the blogpost from the Goggle LatLong blog

You you’re savvy enough you could write a custom script (maybe with Python or Ruby) that goes through your rows in your file, makes a request to one of geolocation APIs (like Yahoo! or Google) with the address data and write the longitude & latitude in your file. An experienced developer can write such a script in a manageable time. But how do you handle such a task if you haven’t the needed programming skills? Here comes Mapspread to the rescue.

The Tool

Mapspread from Poly9 let’s the user import data in various formats like KML, CSV, XLS or Shapefiles. The data can be collaboratively edited and address data gets geocoded automatically. The user can then publish the enhanced data as GeoJSON, GeoRSS, CSV, KML etc. The keyfeature of Mapspread might be the creation of Google Maps applications with the edited data plotted on it. This is perfect if you quickly want to create an interactive map to include in your website but let’s see a short use-case that only needed the geocoding part of Mapspread.

Use-Case

I received an Excel file from a client containing a ZIP code, country abbreviation, and some more data needed for our application per row. The end result is a custom ModestMaps application built with Adobe Flex that runs in the intraned of the company so I needed this data extended with longitude & latitude per entry.

1. First, I opened the Excel file in Google Spreadsheets to make some small changes like translating the table headers from german to english so Mapspread would understand what type of data is in the columns.
2. I exported the Google Spreadsheet as a CSV file and saved it locally.
3. Then I uploaded the modified file to Mapspread and imported the data as a new datalayer (the geocoding process may take some time depending on the size of the uploaded file).
4. Finally I was able to publish the datalayer as a CSV file which I download back to my machine.
5. Now I simply imported the CSV file in my Flex application and used it to plot the data on the map.

For me, the process of geocoding data without having to write a custom script has just been simplyfied using Mapspread. Do you have experiences with Mapspread or know any other services that provide similar functionality? Please share them in the comments.

The building blocks of the developement are Processing as the scripting language and Google Spreadsheets as the database. I’m currently also working with Google Spreadsheets so I was pleased to see that others share my thoughts about it’s advantages:

• Handles large datasets with ease
• The dataset is syncronized immediately, thus no need for keeping multiple files updated
• The dataset is editable simultaneously
• Provides the client with a familiar interface to edit the data
• No need for keeping multiple files updated
• Well documented API

I highly recommend to read the full article as it provides detailled information about accessing Spreadsheets using Processing. Jer also shares the source code as he already did for the NYTimes API or the Guardian Open Platform.

Google’s official description:

Google Squared is a search tool that helps you quickly build a collection of facts from the Web for any topic you specify.

• Facts about your topic are organized as a table of items and attributes (we call them “Squares” for fun).
• Customize these Squares to see just the items and attributes you’re interested in.
• See the websites that served as sources for the information in your Square.
• Save and share Squares with others.

Customizable table headers

The user can easily add or remove table headers. While “remove” simply dismisses the information for all the table rows, “add” let’s the user define an attribute and the engine then fills up the cells for each row. Attributes can also be added using a complete new search and then hitting “Add to this square” and Google will add the resulting attributes to the already existing table.

Trustful sources

Sometimes there may be multiple values for an attribute. The user can view the source by hovering over the cell. Other possible values can be viewed and selected by clicking the respective link.

Working tool?

Squares can be saved for reference or future customizations. Once a customized Square is saved it can be shared using the modified URL – if it’s not saved the same URL will show the default Square for this search query. Something we’d love to be able to do: As the data is already in a structured form it would be easy for Google to offer a Create Spreadsheet from Square option. So the data could be distributed and used in different ways.

Try this customized search query for Bauhaus Designers.