Get excited and make things with science

Last weekend, 19th & 20th June 2010, saw the first Science Hack Day at the Guardian offices in London. Jeremy Keith organised a venue, food and drink and sponsorship for around 100 people to spend two days building small science projects. Saturday morning saw a series of short talks to introduce the event,  give people some ideas of what they might make, and what tools were available to help them make it. 24 hours of hacking and building followed, with presentations and prizes for the best hacks on Sunday afternoon. Ed Gomez has a great write-up of the hack day itself, and the winning hacks. My personal favourites were the Aurorascope, which shows auroral activity by lighting up LEDs inside a ball representing the Earth, and Random Orbit, a RESTful service to track satellites in real time.

I was asked by Jeremy to give one of the talks at the beginning of the hack day, so I chatted a bit about the work we’ve done with to tag Flickr photos with their celestial locations — astrotagging.

Continue reading Get excited and make things with science

Solving a browser bug with invalid HTML

Recently, I’ve been involved in building Solar Stormwatch, a citizen science project which asks people to look for by watching videos of data recorded by the wide-field cameras on the STEREO spacecraft. We ask people a series of questions about each video and record their answers. The answers they submit then determine subsequent questions that they’ll be asked. Answers are tracked in the underlying API by assigning each answer a numerical ID, so the markup for an answer looks something like this (using HTML buttons for each answer):
<button value="2">Ahead</button>

If the site user wants to pick the answer ‘Ahead’ to a question, they click this button. With jQuery, I get the value of the button (2) using var answer_id = $(this).val(). Users confirm their answer by pressing a ‘Next’ button to move onto the next question:

<button id="next" value="">Next</button>

I decided to use the ‘Next’ button to store the currently selected answer: $('#next').val(answer_id). I can then look at the value of the ‘Next’ button to decide which question to ask next when they submit an answer. All fairly straightforward HTML and JavaScript, which works in any standards-compliant web browser.

However, after launching the site we started to get strange bug reports on the Solar Stormwatch forum. Buttons were displaying numbers instead of words as their labels. Questions were repeating rather than moving onto the next question for a given answer. It turns out there is a bug in IE6 and IE7, which was being picked up by our users — IE6 and IE7 do not support the value attribute on buttons.

In IE6 and IE7, calling $(this).val() returns the text of a button — ‘Ahead’ in the example given above. Similarly, setting .val() for a button sets the button text, not its value. My first reaction was to change my jQuery code to use .attr('value') to access the value attribute instead. This runs into exactly the same underlying browser bug — .attr('value') gets and sets the button text in IE6 and 7.

To solve this, and get the questions working in IE, I ended up changing the value attribute on buttons to data-value. This is invalid in HTML 4, though it will be valid in HTML 5.

<button data-value="2">Ahead</button>

This works, however, because the default behaviour of HTML parsers in all the major browsers is the same when they encounter an attribute they don’t understand. They simply add it to the DOM as a property of the current node ie. you get something like So, wherever I had used .val() in my jQuery code, I now use .attr('data-value') to get and set the value of buttons.

I’m not hugely happy with this solution. It’s invalid HTML and relies on default error-handling behaviour in HTML parsers. It does work cross-browser, and it is robust in that HTML parsers aren’t likely to change the way they handle unrecognised attributes. I wish Internet Explorer supported the standards-compliant, valid solution though.

Generating astrotags for Flickr photos

In December, I talked at London Web Standards about tagging astronomy photos with position and name information. I mentioned that around 400 photos have been tagged already on Flickr but this is only a tiny fraction of the 4,900 photos that have been solved by It would be great if the remaining 4,500 photos could also be tagged, and it ought to be straightforward to generate tags for those photos too. Inspired by the iNaturalist Taxonomic Tagging Tool, I’ve written a little astrotagging form for Flickr photos.

When the robot solves a photo on Flickr, it leaves a comment identifying the coordinates of the photo and listing the names of objects in the field.

Hello, this is the blind astrometry solver. Your results are:
(RA, Dec) center:(82.4668973542, 6.33857270637) degrees
(RA, Dec) center (H:M:S, D:M:S):(05:29:52.055, +6:20:18.862)
Orientation:161.45 deg E of N

Pixel scale:67.93 arcsec/pixel

Parity:Reverse (“Left-handed”)
Field size :53.14 x 39.85 degrees

Your field contains:
The star Rigel (βOri)
The star Betelgeuse (αOri)
The star Aldebaran (αTau)
The star Bellatrix (γOri)
The star Alnilam (εOri)
The star Alhena (γGem)
The star Alnitak (ζOri)
The star Saiph (κOri)
The star Mintaka (δOri)
The star Cursa (βEri)
IC 2118 / IC 2118 / Witch Head nebula
NGC 1976 / NGC 1976 / Great Nebula in Orion / M 42
NGC 1990 / NGC 1990
IC 434 / IC 434 / Horsehead nebula
IC 443 / IC 443
NGC 2264 / NGC 2264 / Christmas Tree cluster / Cone nebula

View in World Wide Telescope

If you would like to have other images solved, please submit them to the astrometry group.
Posted 3 weeks ago. ( permalink | delete )

These comments are always in the same format, so it’s straightforward to parse them and extract the astrometry metadata as a list of tags. I’ve written a small form which does this, using YQL to grab the comments from a Flickr photo then parsing them using standard DOM traversal and manipulation methods.

If you have a photo which has been solved, generating tags is straightforward. Copy the address of a Flickr photo page into the tagging form and press the big blue ‘Get astrotags’ button. The script should find the comment from and print out the tags for celestial coordinates and names, which you can then paste into the ‘Add a tag’ form on Flickr.

The code to do this is fairly simple, and reproduced below. After initialising the page, we can take advantage of YQL’s HTML parser to fetch all of the comments for a Flickr photo page by selecting all paragraphs inside divs with a class of ‘comment-content’ at that URL.

select * from html where url='' and xpath='//div[@class="comment-content"]/p'

We then loop through the results of this query, looking for paragraphs which contain the text ‘blind astrometry solver’. If we have a match, we add this paragraph to the DOM so we can parse it with standard DOM methods. The code then loops through the child nodes of the comment paragraph, running regular expression matches against any text nodes it finds to extract the coordinates of the photo.

Names are slightly more tricky. For those, we grab every line of text between ‘Your field contains:’ and the line ‘—–‘ above the signature, strip out whitespace, split each line on ‘/’ to get individual names and store these in an associative array, keyed on name to remove duplicates. That done, we can then just loop through the arrays of coordinates and names and print them out.

Here’s the full code:

 var url = "";
 var comment_holder;
 var position_output;
 var names_output;
 function init() {
   var url_input = document.getElementById('photoURL');
   var url_button = document.getElementById('updateURL');
   comment_holder = document.getElementById('comment');
   position_output = document.getElementById('position');
   names_output = document.getElementById('names');
   url_input.disabled = false;
   url_input.value = url;
   url_button.disabled = false;
   position_output.disabled = false;
   names_output.disabled = false;
   addEvent(url_button, 'click', function(e) {
     return false;
   addEvent(url_input, 'focus', function(e) {;
   addEvent(position_output, 'focus', function(e) {;
   addEvent(names_output, 'focus', function(e) {;
   // Mark up nodes which this script updates as
   // ARIA live regions.
   comment_holder.setAttribute('aria-live', 'polite');
   position_output.setAttribute('aria-live', 'polite');
   names_output.setAttribute('aria-live', 'polite');

 function getFlickrPhotoComments(url) {

   // YQL query to get all comments from a Flickr photo page.
   var yql = "select * from html where url='"+url+"' and xpath='//div[@class=\"comment-content\"]/p'";
   var yql_url = ''+escape(yql)+'&format=xml&callback=getAstrometryComment&diagnostics=false';
   position_output.value = '';
   names_output.value = '';
   comment_holder.innerHTML = 'Looking up '+url;
 function makeYQLRequest(yql_url) {
   var script=document.getElementById('yqlscript');
   var newscript=document.createElement('script');
   newscript.type = 'text/javascript';

function getAstrometryComment(data) {
  var results = data.results;
  var comment = 'Sorry, that photo has not been solved by <a href=""></a>.';
  for (var i in results) {
    var text = results[i];
    // Comments left by the solver contain the text 'blind astrometry solver'.
    if(text.match(/blind astrometry solver/gi)) {
      comment = text;

function parseComment(comment) {
  var astro = {};
  var names = {};
  var parsing_names = false;
  comment_holder.innerHTML = comment;
  var children = comment_holder.firstChild.childNodes;
  for (var i in children) {
    var child = children[i];
    var text = '';
    text =;
    if (text) {
      if (text.match(/(RA, Dec)/g) && text.match(/degrees/g)) {
        astro.RA = text[0];
        astro.Dec = text[1];
      } else if (text.match(/Orientation/g)) {
        text = text.match(/[-0-9\.]+/g);
        astro.orientation = text[0];
      } else if (text.match(/Pixel scale/g)) {
        text = text.match(/[0-9\.]+/g);
        astro.pixelScale = text[0];
      } else if(text.match(/Field size/g)) {
        text = text.match(/[0-9\.]+ x [0-9\.]+ (degrees|arcminutes|arcseconds)/g);
        astro.fieldsize = text[0];
      } else if(text.match(/Your field contains:/g)) {
        parsing_names = true;
      } else if (text.match(/-----/g)) {
        parsing_names = false;

      if (parsing_names) {
        names = addNames(names, text);

  if (astro.RA) {

function addNames(names, text) {
 text = trim(text);
 text = text.split('/');
 for (var j in text) {
   var name = text[j];
   name = trim(name);
   if (name && name !='Your field contains:'){
     names[name] = name;
 return names;

function renderPositionTags(astro) {
  position_output.value = '';
   for (var tag in astro) {
     position_output.value += 'astro:'+tag+'="'+astro[tag]+'" ';

function renderNameTags(names) {

  names_output.value = '';
   for (var name in names) {
     names_output.value += 'astro:name="'+name+'" '

function trim(text) {
  // Trim leading and trailing whitespace from a string.
  text = text.replace(/^\s+/, '');
  text = text.replace(/\s+$/,'');
  return text;

function addEvent(obj, evType, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, false);
    return true;
  } else if (obj.attachEvent) {
    var r = obj.attachEvent("on" + evType, fn);
    return r;
  } else {
    return false;

Searching astro:name with YQL

Searching astro:name with YQL, originally uploaded by Eat your greens!.

The YQL team announced personal URLs for queries this week. I’ve used the new feature to set up a shortcut for looking up photos of astronomical objects by name. The URL is:

You can set the name parameter in the URL to change the name of the object you are looking for. I’ve also set up a demo page to render results from this query. The URL is:

Again, change the name parameter in the URL to lookup different objects. Note that it looks for an exact match with the astro:name machine tag, so looking up stars is cumbersome:αcyg)

Update: it seems Flickr’s machine tag search can match just the first part of a tag, so you can search for stars by supplying the first part of the tag’s value.

I’ve also made some changes to in order to enable faster searching by name. Use astro_name in a query to find objects by matching on astro:name:

select * from where astro_name = 'M 31'

or use text to run a Flickr text search across photo descriptions and titles:

select * from where text = 'orion'

If you want to see what values have been used for astro:name on Flickr, I recommend Paul Mison’s excellent machine tag browser.

London web standards: Introducing astrotags

Here are the slides from my talk at the December LWS meetup – Introducing astrotags: astrometry, machine tags and YQL (20MB pdf). The examples and demos should all be in the YQL category on this blog.

If you’re interested in the nuts and bolts of the automated astrometry robot, I recommend having a look at and reading Making the sky searchable: Fast geometric hashing for automated astrometry.

Is it about elephants?

I found my copy of Ghastly Beyond Belief, Neil Gaiman and Kim Newman’s wonderful collection of quotations from science fiction and fantasy. Page 164 has this excellent exchange between Michael Moorcock and Thomas Disch.

Tom Disch: I’m writing a book about what everyone wants most.

Moorcock: Really? Is it about elephants?

Disch: Elephants? No, it’s about becoming more intelligent.

Moorcock: Oh, what I’ve always wanted most is to be an elephant.

Look out honey cos I’m using technology

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 = '';
// 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 = ''+ 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
			var src = item.Image.Source;
// The smallest available image size is 'Inline'.
			src = src.replace("Medium","Inline");
			src = ''+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() &lt; 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
// When the set is clicked, if already dragging, drop the photo.
// Otherwise, bring to the front and store the mouse
// coordinates for future use. {
 					if (dragging) {
 					}else {
 						dragging = true;
 						startx = e.clientX;
 						starty = e.clientY;
 						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 &lt; 2; j++) {
 							var node = draggedSet[j];
 							node.attr({x: node.attr('x')+dx, y: node.attr('y')+dy});

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

Science Museum Cosmic Collections competition

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 "";
select * from nmsi.cosmosculture

Try it

or retrieve an individual item, given the accession number:

use "";
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 "";
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.

YQL updates for nmm.collections

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, 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
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
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.

Searching the sky with YQL Execute

I was fortunate enough to win one of the prizes at Open Hack London this weekend. I ported the javascript from my astronomy photo browser to YQL Execute, creating a new open data table which returns celestial coordinates for astrotagged flickr photos. Essentially, my hack extends the flickr API to, hopefully, enable location-based searching in the sky.

Since I only wrote my hack in about an hour, during breakfast on Sunday, I returned to it this evening and finished it off. I’ve defined an open data table at which returns all machine tag info in the astro: namespace for the 50 most recently tagged photos. For convenience, it also returns the photo owner, title, url and root url for thumbnail images.

There is a demo, where you can try searching based on Right Ascension and Declination (both expressed in degrees). Please try it out and leave feedback in the comments here.

Demo URL:

Example queries

The Carina Nebula

        select * from
        where ra > 155 and ra < 165
        and dec > -65 and dec < -55

The Orion Nebula and surroundings

        select * from
        where ra > 70 and ra < 100
        and dec > -20 and dec < 10

Get lots of photos of Orion (may be slow)

        select * from,200)
        where ra > 70 and ra < 100
        and dec > -20 and dec < 10

Find nebulae from the New General Catalogue (names beginning NGC)

      select * from
      where name like 'NGC%'

Find nebulae from the Messier catalogue (names beginning with M )

     select id, title, url, imgroot, username, ra, dec, fov, orientation, name
      where name like 'M %'

Find all photos of the Rosette nebula

      select * from,200)
        where name = 'Rosette nebula'

Explicitly declare all the table columns

      select id, title, url, imgroot, username, ra, dec, fov, orientation, name