Eat your greens!

My last post gave some examples of YQL queries that could be used to access the data for the Science Museum’s Cosmic Collections competition. Looking at XML feeds is pretty dry, though, so I thought it would be fun to put together a demo which uses a YQL query to visualise the data. I’ve also been looking at Raphaël recently, a small library for working with SVG in web pages. Inspired by the Royal Observatory’s Flickr touchscreen, and knowing next to nothing about either jQuery or SVG, I wrote some quick code with jQuery and Raphaël to display photos of the Science Museum objects as a pile of polaroid photos.

Here’s the code, with some explanation in the comments that hopefully shows how to extract the Science Museum data from the query results and do something useful with it. The event handling code seems a little dodgy to me ( I really know very little about SVG or jQuery) but seems to work in Opera, Firefox and Safari. You can try it on the demo page. Click to pick up a photo and move it. Click again to drop it.

A small update: Here’s a second demo using drag-and-drop instead of mouse clicks. I’ve also added the focusable attribute to the SVG rectangles, to make them accessible from the keyboard. This only seems to work in Opera.

// URL of the environment file, which points to the URL
// of the nmsi.cosmosculture YQL table definition.
var env = 'http://eatyourgreens.org.uk/yql/nmsi.env';
// YQL query to select everything from the Cosmic Collections dataset.
// Change this query to change the objects displayed in the page.
var yql = "select * from nmsi.cosmosculture";
// Example alternate query - fetch everything linked to the Moon
// var yql = "select * from nmsi.cosmosculture where LinkedCelestialBodies.CelestialBody.CommonName = 'Moon'";

// Encode the query and env file URL in a call to the YQL web service.
// Specify JSON as the return format.
var url = 'http://query.yahooapis.com/v1/public/yql?q='+ encodeURIComponent(yql) + '&env='+encodeURIComponent(env)+'&diagnostics=false&format=json&callback=?';

// Set a canvas for Raphael to draw on.
var height = 600;
var width = 800;
var paper = Raphael('canvas', width, height);

// Set some global variables to use when we are dragging elements around the canvas.
var startx = 0;
var starty = 0;
var dragging = false;
var draggedSet = null;

// Call the YQL web service and pass the json result to a callback function
$.getJSON(url, function(json){
//  Get the array of museum objects from the query result.
	var items = json.query.results.MuseumObject;
// Loop through the items array
	$.each(items, function(i, item) {
// Ignore items which don't have a photo
		if(item.Image.Source){
			var src = item.Image.Source;
// The smallest available image size is 'Inline'.
			src = src.replace("Medium","Inline");
			src = 'http://www.sciencemuseum.org.uk'+src;
// Generate a random x,y position for the photo
 			var x = 10 + (width-110) * Math.random();
 			var y = 10 + (height-110) * Math.random();
// Generate a random angle between 350 and 10 degrees.
 			var rot = 10*Math.random();
 			if(Math.random() < 0.5) rot = 360-rot;
// Each photo is built from a set consisting of a white rectangle and the photo
 				var s = paper.set();
 				s.push(paper.rect(x,y,110,140).attr('fill','white'),paper.image(src, x+5, y+5, 100, 100));
// Rotate the set by our random angle
 				s.rotate(rot);
// When the set is clicked, if already dragging, drop the photo.
// Otherwise, bring to the front and store the mouse
// coordinates for future use.
 				s.click(function(e) {
 					if (dragging) {
 						dragging=false;
 					}else {
 						dragging = true;
 						startx = e.clientX;
 						starty = e.clientY;
 						s.toFront();
 						draggedSet = s;
 					}
 				});
// Listen for mouse movement on the document.
// If dragging, move the dragged set to the
// x,y coordinates of the mouse.
// Store the current coordinates for the start
// of the next move.
 				document.onmousemove = function(e){
 					if(dragging) {
 						dx = e.clientX - startx;
 						dy = e.clientY - starty;

 						for (var j=0; j < 2; j++) {
 							var node = draggedSet[j];
 							node.attr({x: node.attr('x')+dx, y: node.attr('y')+dy});
 						}

 						startx = e.clientX;
 						starty = e.clientY;
 					}
 				};
 			}
 		});
})

The Science Museum have launched their Cosmic Collections website competition. They are offering two £1,000 prizes for web mashups built using their data describing the objects in the Cosmos & Culture gallery. The deadline for entries is 28th November 2009. Full details are available on the competition web page. There’s also a Yahoo! Developer Network interview with Mia Ridge about the competition.

The data has been released using a fairly simple API, so I’ve drafted a YQL open table definition for it. You can use it to retrieve the full dataset:

use "http://eatyourgreens.org.uk/yql/nmsi.cosmosculture.xml";
select * from nmsi.cosmosculture

Try it

or retrieve an individual item, given the accession number:

use "http://eatyourgreens.org.uk/yql/nmsi.cosmosculture.xml";
select * from nmsi.cosmosculture where AccessionNumber = '1923-668';

Try it

You can also use YQL’s own filtering operators to restrict the result set. For example, get items for a particular place:

use "http://eatyourgreens.org.uk/yql/nmsi.cosmosculture.xml";
select * from nmsi.cosmosculture
where LinkedPlaces.Place.PlaceName like '%Italy%'

Try it

The competition wiki has a page describing the catalogue fields returned by the API.

I’ve made a couple of updates to the National Maritime Museum YQL tables, to hopefully make it a little easier to search the NMM collections with YQL.

Firstly, I’ve added a new input parameter, sortby, to nmm.collections.search, which specifies the field used to sort search results. Possible values are objectid, title, maker, year, updated. You can also specify sortby = 'rank' to order results by relevance for free text searches. So, for example, you can get the most recently updated records from the art collection with the following query:

select * from nmm.collections.search
where category = 'art' and searchterm = '' and sortby='updated'

Try it

Secondly, I’ve set up an XML feed to look up entries in the authority tables, and a corresponding YQL table nmm.collections.authorities. So, rather than having to know that the Aquitania is entry 21209 in the vessels authority, you can look up its entry with:

select * from nmm.collections.authorities
where authority = 'vessels' and title = 'Aquitania'

Try it

This is most useful when doing search for objects linked to a particular authority record, as you can join the two nmm.collections tables. For example, to search for art by the painter Charles Pears, you could try the query:

select * from nmm.collections.search
where searchterm='' and (authority,category) in
(select authority,id from nmm.collections.authorities
where authority = 'people' and title = 'pears')

Try it

The new YQL table definitions are available on github, and will hopefully be available to use in the YQL console soon. I’ve set up a javascript demo page where developers can test YQL queries against the NMM collections. There’s also a page of documentation about the NMM’s collections feeds, with some sample YQL queries for developers.