Demonstrator previews

One deliverable of the Bricolage project is demonstrators:

  • a browser-based mapping application for exploring the Geology collection via its geography
  • an interactive timeline displaying the chronology of selected resources within the Penguin Archive

The demonstrators were designed to show the potential for building data visualisations from the Linked Data produced by the project. As such, they both take a similar technical approach: a javascript application that (via a RESTful web service) retrieves json-formatted data from the Linked Data service. This data is then rendered as required by the web-based application.

Both these demonstrators will be publicly available in September, hosted on the Penguin Archive and Geology collection sites. For now here are some screenshots and a little more detail…

Penguin Archive Timeline

 

The Penguin Archive Timeline uses the freely available TimelineJS to present an interactive chronology of key events in the history of Penguin Books. Its construction involved the following steps:

  • The collection curators created a spreadsheet containing the key events, their dates and (optionally) an illustrative image. The event data also included the unique collection identifiers of any related collection held in the archive. These identifiers would later provide a route to the Linked Data.
  • The spreadsheet was then parsed into a JSON data structure understandable by the TimelineJS javascript application.
    {
    "startDate":"1863",
    "endDate":"",
    "headline":"Birth of Samuel Lane",
    "text":"<span class='lod' res='gb-3-dm2244;gb-3-dm1649;gb-3-dm1676'><img style='border:none;' class='throbber' src='img/throbber.gif'/></span>"
    }
  • Loading this data (and hosting the linked images) gave us the basic chronology, but without any sign of Linked Data so far! Now to use the supplied collection codes.
  • A small edit was made to TimelineJS to provide a callback upon event data load. This callback gives us the chance to query the Linked Data service. E.g.
    /elda/api/penguin/id/archivalresource/gb-3-dm2309.json
  •  The JSON returned from the call is then parsed and used to populate the timeline (the embedded box in the image above).
    {
    "format" : "linked-data-api",
    "version" : "0.2",
    "result" : {
      "_about" : "http://tc-bricol.ilrt.bris.ac.uk/elda/api/penguin/id/archivalresource/gb-3-dm2309.json",
      "dc_title" : "Pelican Books, Penguin Books, Penguin Handbooks, Penguin Specials, Pan Books, and other materials",
      "extent" : "4 records management boxes (359 books)",
      ...
      }
    }

So the demonstrator shows the possibility of augmenting a purely browser-based application with rich, structured data.

Javascript libraries used: jquery-1.7.2, TimelineJS.

This demonstrator will be made publicly available via the Penguin Archive site in September. All associated code will also shortly be available under an Open Source licence.

A map interface for the Geology Collection

The Geology demonstrator provides a map-based route into the museum’s collection. As with the Penguin demonstrator, it is a javascript-based browser app that is backed by the Linked Data created by the project. The steps involved in creating the demonstrator were as follows:

  • The existing catalogue only had textual place name information. As part of the project this data was reviewed and somewhat cleaned. Then, in order to be able to locate the resources on a map, the place names were passed through a geocoding service. The resulting coordinates were stored with the records. This was done as part of the one-time data migration into the new Drupal platform. Code was also put in place to automatically geocode records created or edited as part of the ongoing catalogue work.
  • Drupal has RDF support, and this was configured (to be blogged about elsewhere shortly) to produce RDF versions of resource records like this:
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:dc="http://purl.org/dc/terms/"
    xmlns:sioc="http://rdfs.org/sioc/ns#"
    xmlns:ad="http://schemas.talis.com/2005/address/schema#"
    xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
    
    <rdf:Description rdf:about="http://geomuse-dev.ilrt.bris.ac.uk/id/47-1">
    <rdf:type rdf:resource="http://schema.org/CreativeWork"/>
    <rdf:type rdf:resource="http://rdfs.org/sioc/ns#Item"/>
    <rdf:type rdf:resource="http://xmlns.com/foaf/0.1/Document"/>
    <dc:date rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2012-08-08T11:58:16+01:00</dc:date>
    <dc:created rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2012-08-08T11:58:16+01:00</dc:created>
    <dc:modified rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2012-08-09T15:21:33+01:00</dc:modified>
    <sioc:num_replies rdf:datatype="http://www.w3.org/2001/XMLSchema#integer">0</sioc:num_replies>
    <dc:classification rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/age/phanerozoic"/>
    <dc:classification rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/age/mesozoic"/>
    <dc:classification rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/age/jurassic"/>
    <dc:classification rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/age/early-jurassic"/>
    <dc:classification rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/age/pliensbachian"/>
    <ad:regionName rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/place/radstock"/>
    <dc:creator rdf:resource="http://geomuse-dev.ilrt.bris.ac.uk/person/tutcher-jw-0"/>
    <geo:lat rdf:datatype="http://www.w3.org/2001/XMLSchema#decimal">51.257415</geo:lat>
    <geo:long rdf:datatype="http://www.w3.org/2001/XMLSchema#decimal">-2.504067</geo:long>
    </rdf:Description>
  • The data we are interested in here are classification and geo. Queries for data to populate the map are parameterised with bounding box coordinates and (optionally) age classification.
  • Drupal RDF also includes a SPARQL endpoint, and here, for ease of use from the javascript browser application, we fronted it using a RESTful Java web application. Thus an ajax request from the browser might look like:
    http://host/bricol-geology/rest/specimens/51.73155108088844,-0.5085178417969018/50.85218333554836,-4.166965107421902/bajocian

    and this would be translated into a SPARQL query by the web application:

    SELECT ?id ?lat ?lng ?region
    WHERE {  GRAPH ?g
      { ?id <http://www.w3.org/2003/01/geo/wgs84_pos#lat> ?lat . 
        ?id <http://www.w3.org/2003/01/geo/wgs84_pos#long> ?lng . 
        ?id <http://purl.org/dc/terms/classification> <http://geomuse-dev.ilrt.bris.ac.uk/age/bajocian> .
        OPTIONAL { ?id <http://schemas.talis.com/2005/address/schema#regionName> ?region  }
        FILTER ( ?lat < 51.69240914989516 && ?lat > 50.812284718809906 && ?lng > -4.183444599609402 && ?lng < -0.5249973339844018)
      }
    }
  • Once parsed by the web app, the json returned is along these lines:
    [{"uri":"http://geomuse-dev.ilrt.bris.ac.uk/id/53-1",
      "regionUri":"http://geomuse-dev.ilrt.bris.ac.uk/place/dundry",
      "long":-2.638459,
      "lat":51.39859},
     ...
    ]
  • These points are then displayed (using Google maps api and MarkerClustererPlus) on the map tool. Roll-over popups provide further information on points as well as routes for launching collection browsing.

Javascript libraries used: jquery-1.7.2, jQWidgets, google maps api v3.

This demonstrator is still awaiting the final full Geology data set to be migrated and will be made publicly available via the Geology collection site in September. All associated code will also shortly be available under an Open Source licence.

Leave a Reply