Showing off the world with YQL

As you might know, An Event Apart, in association with Microsoft, is currently running a 10K competition, asking developers what they can do in under 10KB. The idea is to show the world the power of new web technologies — and how pretty web apps can be, without being heavy.

I thought I should take part in the competion. Being a data junkie, I didn't concentrate on using canvas to do a cool visualisation, but instead tried to build a very small interface for a big data set.

The result is World Info, which shows you information about all the countries in the world in under 5K:

Under the hood, World Info uses YQL and Yahoo! GeoPlanet to get all this information. In essence, this boils down to two statements:

select name,boundingBox from geo.places.children(0) where
parent_woeid=1 and placetype="country" | sort(field="name")

This gives you all the countries on this planet (direct children of the data entry with the WOEID 1, which is Earth), sorted alphabetically.

As all of them come with bounding box data and centroid information, it is easy to get the names and to paint maps for these locations. In the example, I used the Open Streetmap static image API:

var image = 'http://pafciu17.dev.openstreetmap.org/?module=map&bbox='+
bb.boundingBox.southWest.longitude+','+
bb.boundingBox.northEast.latitude+','+
bb.boundingBox.northEast.longitude+','+
bb.boundingBox.southWest.latitude+
'&width=500&height=250';

The second part was to scrape country information from WikiPedia, which is done easily with the HTML table in YQL:

select * from html where
url="http://en.wikipedia.org/wiki/Christmas_Islands"
and xpath="//table/following-sibling::p" limit 3

This gives you the first three paragraphs of the entry on the Christmas Islands.

I put all of that together, cleaned it up, and made it snazzier. Here is the source code version (V2, if you will) of World Info:

This version uses HTML5 local storage to make sure you don't have to wait for the YQL data every time you open the app.

You can download and see the source of World Info on GitHub, and read through the comments to get a gist of what is going on.

Only two things left to do: