A Semantic Web Application In A Day

ENSEMBLE
Semantic Technologies for the Enhancement of Case Based Learning

Welcome to the Ensemble Workshop: "A Semantic Web Application in a Day"

The Ensemble Project (the full name of which is 'Semantic Technologies for the Enhancement of Case Based Learning') was funded under the ESRC/EPSRC Technology Enhanced Learning Research Programme. One of the aims of the project was to explore how best to 'lower the bar' to the development of web applications which made use of technologies associated with the emerging 'semantic web' and 'linked web of data' to the point where they could easily be integrated into the practice of teachers and learners. In this respect we were fortunate that the SIMILE project, funded by the Mellon Foundation and based at the Massachusetts Institute of Technology had already developed a set of tools that we were able to use and subsequently to extend through our own work. Perhaps the most valuable of these tools has been 'Exhibit': a lightweight web application framework that makes it possible to produce small-scale semantic web applications without being an expert programmer. We have used Exhibit to produce demonstrations and prototypes as well as complete applications which have found uses in a range of educational settings across the Ensemble project. But we have also found project participants and those to whom we have talked about our work have wanted to get involved themselves, so we have developed this set of resources to help them (and you) get started. These information sheets complement the more comprehensive online tutorials and programmers' references at the SIMILE project's community site: http://www.simile-widgets.org/. They also include examples of the kinds of things that our project has developed as it has worked with teachers and students in higher education (although the tools and approaches we describe could be used much more widely). These represent just one of the aspects of our work, about which you can nd out more at our website: http://www.ensemble.ac.uk/. We are always interested to nd out how people have taken our ideas, resources and 'products' so if you nd these information sheets (which are released under a Creative Commons licence) useful yourself; use them with others; or incorporate them into teaching and training materials, please do get in touch and tell us about it!

Happy App Building! Patrick Carmichael (Project Director, Ensemble) Kate Litherland (Research Associate, Ensemble Project) Simon Morris (Research Associate, Ensemble Project) And the rest of the Ensemble Project Team

The Ensemble Exhibit help sheets

This collection of documents is designed to help you through the process of building your Exhibit web page, starting from getting the right software, through the process of structuring your data and understanding the elements of Exhibit. The help sheets are a maximum of two sides long. They are designed for use in the order shown below, although you might not need them all.

1. The semantic toolkit

2. Getting started

3. Structuring your data

What you need to get going

Getting the software for Mac or PC

Making spreadsheets of your data

4. Multiple spreadsheets

5. Data modelling

6. The spreadsheet generator

Working with complex datasets

Planning the links between datasets

An introduction to Exhibit vocabulary

7. Thinking about facets

8. Babel

9. Parts of an Exhibit

Building in data lters

From spreadsheet to web-ready data

An introduction to Exhibit vocabulary

10. Views

11. Tile View

12. Map view

Ways to display your data

Customising the default view

Displaying your data on a map

13. Displaying data chronologically

14. Lenses

15. Facets

Using calendars and timelines

Deciding what to display, and how

Ways for users to sort and lter data

The semantic toolkit

To make your semantic web application we will be using the following resources:

Your own data and resources

This might be open-source data on the internet, or stored in les on your computer. In either case it will need to be in a structured form, preferably spreadsheets.

Spreadsheets
If using spreadsheets to structure data is new to you, work through the help sheets in order. If you are familiar with this and want to go straight to more advanced data modelling, go the sheet called Multiple spreadsheets.

A text editor
There is help on choosing and installing a text editor on the sheets called Getting started - PC users and Getting started - Mac users.

Web browser and debugger

The sheets called Getting started - PC users and Getting started Mac users have advice on choosing and installing a useful browser and debugger.

Simile Babel
A website which converts your data into a format the semantic web can use. For help with using Babel, see the sheet entitled Babel, or look at the site at http://service.simile-widgets.org/babel/

The Exhibit Toolkit

A web library of tools to display your data with faceted browsing, available at http://www.simile-widgets.org/wiki/Exhibit The following Ensemble help sheets will guide you through the process of making an Exhibit.

Getting started - PC users

To make a semantic web application all the software you need is: a text editor a web browser (connected to the internet) a program which can edit and export Excel spreadsheets

It is possible to use just the standard software pre-installed on many computers for this. Standard spreadsheet programs (e.g. Excel) are ne. However there are some free, downloadable applications which will make parts of the task much easier. They are: Notepad ++ (text editor) Firefox (web browser) Firebug (an add-on for Firefox)

Follow the instructions below to download and install these programs.

Notepad ++
To download Notepad ++ go to: http://notepad-plus-plus.org/ Click on the download tab. Click Download the current version.

Click on the rst item on the list (Notepad ++ v5.8.7 Installer). Click run. Follow the instructions to install the program. When prompted to choose components, select Custom in the type of install box. The program immediately opens a text le with some text about the program in it. At this stage you can close the program until you are ready to use it.

Firefox and Firebug

To download Firefox, go to: http://www.mozilla.com/en-US/refox/ Click on the green box to download the application. Click Run and follow the instructions to download and install the application. Once you have Firefox up and running you can install Firebug an add-on which lets you nd bugs and experiment with changes to your web page. To get Firebug, go to http://getrebug.com/ and click on the red box which says Install Firebug for Firefox.

Click when prompted to agree to and install the program. When the process is complete you will be prompted to restart Firefox. You can then use it like any other web browser.

To launch Firebug, click on the picture of a bug in the bottom right-hand corner of the window. This will open a pane which allows you to inspect various elements of the website. To turn Firebug off again, either click on the bug or the red off button in the top right-hand corner of the Firebug pane, here:

You now have all the programs needed to build your semantic web application.

Getting started - Mac users

To make a semantic web application all the software you need is: a text editor a web browser (connected to the internet) a program which can edit and export Excel spreadsheets

It is possible to use just the standard software pre-installed on many computers for this. Standard spreadsheet programs (e.g. Numbers) are ne. However there are some free, downloadable applications which will make parts of the task much easier. They are: TextWrangler (text editor) Firefox (web browser) Firebug (an add-on for Firefox)

Follow the instructions below to download and install these programs.

TextWrangler
To download TextWrangler go to http://www.barebones.com/products/textwrangler/download.html

Click on the download button.

Drag the TextWrangler icon into the Applications folder in the window that opens on your screen.

From here you can run TextWrangler or drag it into the dock.

Firefox and Firebug

To download Firefox, go to: http://www.mozilla.com/en-US/refox/ Click on the green box to download the application. Click Run and follow the instructions to download and install the application. Once you have Firefox up and running you can install Firebug an add-on which lets you nd bugs and experiment with changes to your web page. To get Firebug, go to http://getrebug.com/ and click on the red box which says Install Firebug for Firefox.

Click when prompted to agree to and install the program. When the process is complete you will be prompted to restart Firefox. You can then use it like any other web browser.

To launch Firebug, click on the picture of a bug in the bottom right-hand corner of the window. This will open a pane which allows you to inspect various elements of the website. To turn Firebug off again, either click on the bug or the red off button in the top right-hand corner of the Firebug pane, here:

You now have all the programs needed to build your semantic web application.

Structuring your data

This document is a lightweight introduction to structuring your data using a spreadsheet, in order to get the maximum semantic value from it in an Exhibit web page. It uses a simple demonstration spreadsheet of famous Victorian authors and works through the process necessary to make it ready for Exhibit.

Starting the spreadsheet

Spreadsheet applications, like Microsoft Excel, iWork Numbers, or OpenOfce Calc, are highly sophisticated pieces of software capable of all manner of complex data manipulation and presentation. For our purposes we only want to use them to create a simple grid of data. No formulae, no graphs and charts, not even any special formatting of the cells, just a basic grid of data in which each row is a record and each column is a eld in that record, like this sample from the Victorian authors spreadsheet: Each row represents one record in our collection, with the columns storing the elds: authors name, authors birth, authors death, plus one of their works and its publication date. The rst row in the spreadsheet acts as a header. This gives a list of the eld names for the remaining rows. You will refer to these in your nished Exhibit.

Note: You cannot leave empty rows or columns in an Exhibit spreadsheet.

The rst eld must be in the leftmost column, with subsequent elds in subsequent columns without any gaps. Likewise the rst record must be in the second row (the rst row is where the eld names are recorded) with each following record in following rows, without gaps.

Data formats
To enable Exhibit to parse the data in the spreadsheet cells, some types of data will need careful formatting. As a general rule of thumb its a good idea to keep your spreadsheet data simple: while Exhibit can handle non-English characters and strange symbols (currency symbols, Word smart quotes, etc), there is no guarantee each individual web browser displaying your Exhibit page will support them properly. By keeping your data simple you ensure it can be rendered properly no matter what fonts or character sets the end users browsers have available. Even some fairly straightforward data types, such as dates and lists, have their own specic rules, described below.

Lists
Lists can be stored in a single spreadsheet cell using semicolons. When editing such a list it is important to use semicolons between each item, but not before the rst item or (more importantly) after the last. If a list ends in a semi-colon, Exhibit is likely to assume it must have an extra empty item on the end.

Dates
It is important you set your spreadsheet software to store dates in ISO 8601, or at least not reformat them to some other notation automatically. Some spreadsheets have in-built support for ISO 8601, while others seem not to. If your chosen spreadsheet insists on reformatting any column resembling a date, or if you encounter any trouble working with dates in Exhibit, set your column preferences for date columns to text, as in the example on the right.

Naming elds Some tips Do:

use just letters - upper or lower case use digits use dashes or underscores instead of spaces

Dont:
use quotes use commas or full stops/periods use exclamation or question marks use spaces or tabs begin a eld name with a digit

The example above is a valid spreadsheet, but the header row needs some work to make it comply with Exhibits rules about valid eld names. This is because the names in the header row are used as identiers for referencing the eld data as each row is displayed on an Exhibit web page. They must therefore be in a form compatible with standard programming identiers. Because these eld names rarely appear on screen in a nished Exhibit web page, it doesnt matter if they look more like something a computer would use rather than a human (because they are something a computer will use rather than a human!)

Good

Bad

The label

Exhibit has a handful of standard eld names that are treated with signicance by the software.

The most important eld name (and the only mandatory one) is label. Whatever your data is like, one of your spreadsheet columns must be named label. Data in the label column is treated by Exhibit as a name, and gets used whenever Exhibit needs to present a list records to the user. Exhibit insists every record in an Exhibit must have a label eld which means every row in our Victorian authors spreadsheet must have something lled out in the label column and the data in the label eld must also be unique across all records. Taking into account these requirements, the spreadsheet of Victorian authors can now be updated to look like this:

The header row has been updated to incorporate the rules for eld names outlined above. The only reliably unique column in our sample spreadsheet was major work so thats the once weve turned into a label. The above spreadsheet is now a valid Exhibit data structure, and we could easily build a faceted web page around it.

Making the data more manageable

Although this spreadsheet will now work with Exhibit, there is still work we can do to make it even more useful. We can immediately see a lot of duplication across the rows. This is because each publication has to carry with it details of its author. Such duplication not only makes the data physically much larger, but also causes problems when guaranteeing integrity. There is nothing, for example, to stop us giving a different birth date to Charles Dickens for each row he appears in. Even if we successfully ll out each authors details identically, similar problems are encountered should we need to edit the data. For example, here the birth date of Arthur Conan Doyle is wrong - he was actually born in 1859, not 1858. In the sample data this requires a simple edit to just two rows, but in real world data such a correction may require identical edits to vast numbers of rows. This problem is caused because our spreadsheet actually has two sets of data - a set of author details and a set of book details. In order to manage them effectively, and reduce the need for repetitive editing, we need to use more than one spreadsheet. For more information on when to split your data into multiple spreadsheets, and how to manage these, see the help sheet called Multiple Spreadsheets.

Multiple spreadsheets
This help sheet describes how to use Exhibit to link multiple sets of data, permitting structures to be created that avoid the integrity and editing problems caused by duplications. It follows on from the sheet called Structuring your data, and uses the same example spreadsheet of famous Victorian authors and works referred to in that document, which looks like this:

Splitting up your spreadsheets

The original dataset of works by famous Victorian authors really consisted of two collections of data: a collection of author details and a collection of book details. In order to exploit Exhibits ability to link multiple datasets, we need to create two spreadsheets: one exclusively for authors and one just for works.

Adding types
When Exhibit works with more than one collection of data it requires a new standard eld to be added, type, which it uses to distinguish between records of each collection when they are loaded together into the small internal database it uses to populate an Exhibit web page. The rst spreadsheet has the type author. The second has the type work.

In the author spreadsheet, the works column no longer has book titles, but a list of codes separated by semi-colons. The published works spreadsheet has a new column named id with the same codes. These two columns bind the two spreadsheets together, linking authors with their published works. With the data split like this it no longer matters how many books we add for each author, as the authors details are only ever stored in one row. Furthermore, this split format makes it easy to add books with multiple authors, as the same book code can be added to the works column for more than one author.

Linking the spreadsheets

For help on how to design the links between your spreadsheets, see the help sheet called Data modelling.

Data modelling
This document is an introduction to data modelling for Exhibit web pages. It follows on from the sheet called Using multiple spreadsheets, and uses the same example spreadsheet of famous Victorian authors and works referred to in that document. Exhibit is actually quite forgiving when it comes to how you link your data (certainly a lot more forgiving than some software applications). Even if you make mistakes, it usually isnt fatal but if you know how youre likely to use a given collection of data, a little forethought on how its various parts are linked will make things a lot easier when actually building the Exhibit page. Ask any computer scientist and theyll tell you data modelling is more of an art than a science. There are some very comprehensive methodologies which purport to spit out perfectly formed data structures, but in truth the real world is just too messy for any one system or scheme to work 100% of the time. Luckily Exhibit can work wonders with even lightly modelled data: all thats required is a solid knowledge of the data being described, and a bit of common sense.If starting from scratch its a good idea to sketch your design on the back of an envelope or a whiteboard, like this: This Exhibit design has spreadsheets for author, work, theme and publisher. The author spreadsheet links to work through its works eld, work in turn links to both theme and publisher, meaning a given book can now be connected with a set list of themes and styles (romance, horror, etc, each crying some descriptive text) and a publisher. To do this the publisher and theme spreadsheets would include an id column (left off the rough diagram), the contents of which would be used by the publisher and theme columns inside work to form the link. This would translate into spreadsheets for author, work, publisher and theme like the example below. Here the author records point towards one or more work records, which in turn point off to publisher and theme records.

Note: It isnt strictly necessary to use the same name for a type and the column referring to it. In the examples
above, the eld publisher inside work points to records of type publisher in another spreadsheet. However the referral eld could easily have been called publisher_id or publisher_ref or published_by or any other name. Using consistent names, though, makes the spreadsheets more readable.

In the example above, to nd all the authors who wrote stories on a given theme (e.g. romance) wed have to navigate from author to work to theme to nd the connection, as author and theme are not immediately connected. When planning your data structures it is advisable to consider the types of relationships which would prove most useful to you, and ensure their linkage is not too onerous. You know your data better than anyone else, so you should know which relationships are of primary interest, and which secondary. If you can take this into account when modelling your data you will make the job of building your Exhibit that bit easier. That said, remember Exhibit is quite forgiving when it comes to how things are linked, and data modelling is a skill that gets better with practice. Below you can see some examples of how Ensemble has modelled complex data in the Educational Philosophers spreadsheets.

Checklist:
Heres a quick checklist of things to remember as you model your Exhibit data: Is your spreadsheet a basic grid, with the rst row being a list of column names? Does each of your spreadsheets have a label eld, with unique contents in each row for that column? Are your column names simple alphanumeric terms, with no punctuation, unusual characters or formatting? Do your spreadsheets have a type column? using more than one spreadsheet.) If you use a type column, are all the values in each cell identical? (Be careful (This is particularly important if

of capitalisation, particularly auto-formatting by the spreadsheet, and typos.) Are your dates in ISO8601 format? If you split your data over two or more spreadsheets, have you added an id column to each row so spreadsheets can reference each other?
If youre still having trouble with your spreadsheet headers, you could try using the Ensemble Spreadsheet Generator, described in the next help sheet. Alternatively, go straight on to Thinking about facets.

The spreadsheet generator

The better and more completely you describe your data, the better your semantic web resource will work. If you arent sure how to go about this, there is an Ensemble tool available to help you make spreadsheets which will structure your data clearly for the purposes of the semantic web.

1. Access
To launch the spreadsheet generator, go to http://ensemble.ljmu.ac.uk/swf-spreadsheet-web/spreadsheet/intro and click Start Spreadsheet creation.

2. Selecting metadata schema

This will now present you with a page called Metadata Schema Selection. Here, you can start choosing the ways in which you describe your data.

This page has a list of eight standard ways of describing data. Depending on the resources you are describing, you might want to use just one, or a mixture of several of these. If you have a lot of certain types of resources (e.g. images) already stored in les on your computer, you have the option of uploading these into the spreadsheet generator, so that some columns are lled in for you.

The most generic schema here is Dublin Core Vocabulary. If you arent sure which to use, start with this - you can always add to it later. Select this option, then click Select Metadata Elements.

This presents you with a list of elds, a description of the information they should contain, and a checkbox, like this:

If you want that item to appear in your spreadsheet, check it, and if not, leave it blank. Alternatively, select all - it wont matter if you dont ll in all the cells of your spreadsheet. Note: you must have one column called type. Then click Select Metadata Elements at the bottom of the page. You should now see the schema you selected in the left-hand panel on the screen. If you want to add more elements, just choose another schema and repeat the process.

: Tips

ple peo be s cri es de s plac OAF F be s d i nde escr O d expa E n G is a r ms e te RMS TE Cor C n D ub l i of D l is t

3. Optional - adding zip les

If you choose this option some of the columns of the spreadsheet will be lled in for you. This may save you some time if you already have a lot of the data (e.g. image les) stored on your computer. To use this option, put all the les into one folder and compress it into a zip le.

In the left-hand panel, click on the Browse button to nd your le.

4. Generating the spreadsheet

Whether or not you chose to add a zip le, you can now click the Generate Spreadsheet button.

This will open a dialog box asking if you want to open or save your le. From here you can work with it like any other document.

5. Finally...
You will need to make two minor changes so that your spreadsheet is Exhibit-friendly. Firstly, change the name of the rst column from PID to label. Secondly, replace the colons in the headers with underscores, so that dc:creator becomes dc_creator, and so on. Once you have done this youre ready to enter your data.

Stuck?
For further help, go to http://ensemble.ljmu.ac.uk/swf-spreadsheet-web/spreadsheet/process for the online walkthrough.

Thinking about facets

This document is an introduction to building spreadsheets for faceted browsing. It follows on from the sheet called Data modelling, and uses the same example spreadsheet of famous Victorian authors and works referred to in that document. The idea behind faceted browsing is that the user can lter the data based upon the attributes we provide. In this way we hope they will nd interesting (and perhaps previously undiscovered) associations between different records in the data faceted browsing is all about exploring data to nd hidden connections lurking inside. In our Victorian authors example they could, for example, choose to see plotted on a timeline only those works whose themes were both fantasy and childrens and in doing so they might uncover a marked upsurge in the popularity of childrens fantasy after the publication of Alice in Wonderland. In the example, reproduced below, the theme column in the work spreadsheet was a link off to another spreadsheet with some extra details about each theme. This doesnt necessarily have to be the case a column could just contain a list of keywords or terms describing the record, which the facets on an Exhibit web page can then provide lters for.

We could, for example, add a new column to the work spreadsheet with a semi-colon separated list of countries the book was published in, or a keyword indicating if the book had illustrations. Likewise we could add a column to the publisher spreadsheet with a list of keywords denoting what types of book that publishing house dealt with (ction, non-ction, autobiography) As you know your data better than anyone else, you are in the best position to judge what types of data is likely to prove useful when sifting through it using Exhibits faceted browsing techniques. One word of caution though: be consistent! When building facets, Exhibit scans all the records of a given type compiling a list of all the unique values. This can lead to all manner of unintended consequences if youre not careful. Here we can see a couple of common mistakes. Firstly, the illustrated column has values of yes, no and true this is because A Study in Scarlet has been lled out incorrectly (or, at least, inconsistently with the rest of the data).

Second, The Sign of Four has its theme capitalised. The two terms detective and Detective will therefore be treated as separate options in any theme facet within Exhibit. You can trap these mistakes, and assess the usefulness (or otherwise) of the columns in your spreadsheet with regard to faceted browsing, using a tool called Babel. For more on this, see the help sheet of the same name.

Babel
Babel is a web tool which will convert your data from a variety of formats into JSON for use in your Exhibit. Note that if you converting Excel spreadsheets using Babel, you can only convert those in Excel 97-2003 format (.xls les). Babel will not work with .xlsx les created by Ofce 2007 or 2010, so you must save these in the older format before using it. For help with your spreadsheets, see the Basic Spreadsheets help sheet.

1. Using Babel to convert your spreadsheet

Save or export your spreadsheet as a .xls document. Go to http://service.simile-widgets.org/babel/ Select Excel from the from format list and Exhibit JSON from the to format list.

Choose the data is in some les on my computer. Click Browse to nd and upload your spreadsheet to the site. Click Upload and Preview to convert your data into JSON format. You should now see a page like this: Click Copy Raw Data.

This will open a pop-up window like this:

Copy all the text in the window and paste it into a new text le. Give this le an name and the extension .js (e.g. mydata.js). You can now close this window and start editing your application.

2. Using Babel to test your data

Although the preview shown overpage has no regard for how the data is linked together or might be used, it is an ideal way to check for errors. It will show up typos that create incorrect links between data, badly formatted dates, inconsistent use of terms, or capitalisation. If your preview shows up some of these errors and you arent sure how you got them, or how to correct them, see the help sheet called Structuring your data. In the following example, the inconsistencies highlighted in the spreadsheet below....

...will show up in the Babel preview page as follows:

Hint:
If you have more than one spreadsheet, you can use Babel to convert them all to JSON at once. However you might nd it best to process them individually at rst, to make checking for errors easier.

Parts of an Exhibit
This sheet explains the basic vocabulary of an Exhibit. Exhibits have three component parts: Views, Lenses and Facets. There are help sheets on each of these, with extra sheets for the more commonly used views. These areas are Facets. They allow users to sort and lter data. They are entirely optional you can have an Exhibit without them. For more on the different types of facets, see the help sheet of the same name.

The areas in boxes a r e Vi e w s . Yo u r Exhibit must have a view. Views provide a basic template for displaying your data, but you can style them with Lenses. There is more guidance given on Tile, Map and Timeline views in the relevant help sheets.

The circled areas are Lenses. Lenses display and style selected elements of your data. Using a lens enables you to choose which parts of your data you want the user to see, and style them accordingly. There is more about lenses in the help sheet of the same name.

Views
Views are various ways of displaying your data on the screen. In the workshop you will have the opportunity to experiment with a starter set of ve views. You can nd out more about the potential applications of each from the relevant sheet.

Tile View
This is the default view, which can be styled in many different ways. On the right are three examples of tile views used by Ensemble in Biology, Law, and Education Studies websites.

Tabular View
The tabular view is not so exible, although the appearance can be edited to t in with your website. The example below is taken from a module on project management, where live data tables are used to illustrate a static narrative. See more on the tabular view at http://simile-widgets.org/wiki/Exhibit/Tabular_View

Calendar View
The calendar view displays one-off events in a month-toview calendar. There are relatively few options for customising the appearance of the calendar.

If chronology is an important aspect of your data, you might wish to choose the basic timeline view (below) instead of the calendar. For more information on choosing between the two, see the sheet called Displaying data chronologically.

Basic Timeline view

The timeline allows you to display both one-off and long-duration events together on the same display. You can set the scale to an appropriate one for the data, from milliseconds to millenia, and customise it in many other ways. The example below shows the lives of educational thinkers on a timeline to encourage students to associate philosophers ideas with those of their contemporaries.

Map view
The map view allows you to display your data on a Google map. The example on the left, used for journalism students, maps news reports against seismic activity: the larger the bubble, the bigger the quake. Clicking on the bubble allows users to search news reports from the area, so students can see which are the major stories in earthquake zones.

More view options are available from http://www.simile-widgets.org/wiki/Reference_Documentation_for_Exhibit. Here you can also nd more information about customising the views. Some of these views and manipulations may require more advanced skills, whereas others may still be at the experimental stage.

Tile View
The Tile View is the default Exhibit view. You see a basic tile view in Babel when you click Upload and Preview to convert your Excel spreadsheet into a JSON le (for help with this process, see the help sheet called Babel). This will produce a page like this one: In order to include this view l in your Exhibit, you need to include the short expression
<div ex:role="view"></div>

in your html le. By default, this view shows all the items in your spreadsheet(s). Although this view is highly customizable, it may need some manipulation and styling to make it more useful. The commands listed at http:// www.simile-widgets.org/wiki/ Exhibit/Tile_View show a number of ways in which you can begin to style the Tile View. In order to fully customize the Tile view you will need to use a lens - see the help sheet called Lenses for this.

How Ensemble has customized the Tile View

Both of these are tile views. The one on the left shows a list of educational philosophers and gives details about how they relate to a particular course of study. The one below, in Law, uses an advanced video-driven Exhibit to display the information relevant to that section of the video.

For alternative ways of visualizing this data, see the Displaying data chronologically sheet, where the same datasets are displayed on timelines.

Map View
If location is important to your data, you can use Exhibit to situate your information on a Google Map. In order to do this, you will need to make sure that your data has a column called latlng, with the latitude and longitude given in decimal degrees, and separated by a comma (e.g. for Manchester, this would be 53.48095,-2.23743). If you need assistance with the spreadsheet, see the sheet called Structuring your data for help. If you need to look up the latitude and longitude for your data, you may nd http://www.geonames.org useful. You will also need to include the Exhibit Map View extension and a short piece of html in your le. You can nd these at http://www.simile-widgets.org/wiki/Exhibit/Map_View.

The process
Start with a spreadsheet like the one on the right, which has a latlng column. Put this spreadsheet through Babel (see the help sheet called Babel for help with this)..... ....and save the .js le in the same folder as the html le, which should look like the one below.

label Chirk Lymm Sprint Lymm Olympic Harlech Grendon Wilmslow Keswick The Beaver The Little Beaver Coniston Deva Northwich Dambuster Triathlon Fearless Parbold

type Event Event Event Event Event Event Event Event Event Event Event Event Event Event Event

race latlng Sprint Triathlon 52.93614,-3.07147 Sprint Triathlon 53.38105,-2.47763 Olympic Triathlon 53.38105,-2.47763 Sprint Triathlon 52.86667,-4.1 Sprint Triathlon 52.233,-0.7 Sprint Triathlon 53.33333,-2.23333 Olympic Triathlon 54.59947,-3.13256 Middle Distance Triathlon52.88333,-0.78333 Olympic Triathlon 52.88333,-0.78333 Olympic Triathlon 54.36667,-3.06667 Olympic Triathlon 53.1936,-2.8710' Sprint Triathlon 53.333,-2.15 Olympic Triathlon 52.6667,-0.6667 Duathlon 53.05901,-3.19882 Duathlon 53.58333,-2.76667

The circled section is an optional colour coder, which takes information from the race column in the spreadsheet, and uses it display different coloured markers for different types of events on the map.

When you open the html le in your browser, you should see the data from your spreadsheet plotted onto the map. You can customize the map view in a number of ways, using the commands listed at http://www.simile-widgets.org/ wiki/Exhibit/Map_View.

The map view is best used in conjunction with facets (see the help sheet of the same name for assistance with these). For example, the map view can highlight geographical clusters of data, or show geographical shifts in data over time (e.g. where the habitat of a species progressively shrinks), provided suitable data is given in the spreadsheet.

How Ensemble has used the Map View

The UK Protected Plant Species viewer shows the locations of protected species (left), but when just one particular species is selected in the facet, it shows how its locations are clustered in the north and west of the country.

The Earthquakes and the Media site (below) for jounalism students builds a map view into a highly customized Exhibit linking news reports and recent seismic activity.

The Braer Case Study Prototype (below) draws on authentic accident investigation documentation and publicly available reports of the accident. It has been designed to help students of Maritime Operations and Management understand and analyse the sequence of events leading up to the grounding of the ship. Information about the weather and the vessels status appears in the pop-up bubble when the map marker is clicked.

Displaying data chronologically

If time is an important aspect of your data, you have the option to display it in chronological order. In order to do this you will need to have a column in your spreadsheet containing dates in the ISO 8601 format yyyy-mm-dd, as in the example on the right. If you need assistance with the spreadsheet, see the sheet called Structuring your data for help.
label Focus group DL online seminar PG research training Year 1 essay deadline day Year 2 essay deadline day Year 3 essay deadline day Exams start_date end_date 2011-06-01 2011-06-04 2011-06-07 2011-06-10 2011-06-13 2011-06-15 2011-06-18 2011-06-20 2011-06-24

Exhibit has two views for displaying chronological data - the Calendar View and the Timeline View.

Calendar View
The calendar view is good for one-off events which all take place in the same year. The standard view is of one calendar month. To include a calendar in your page, you need to include the Exhibit calendar extension and a short piece of html text in your le. You can nd both of these at: http://www.simile-widgets.org/wiki/Exhibit/Calendar_View

In this calendar, extra information is displayed in the pop-up bubble to stop your calendar getting too crowded. To nd out more about how to do this, see the help sheet called Lenses.

Basic Timeline view

Whilst the calendar view is good for a cluster of one-off events, for some chronological data the basic timeline view might be a better option. The timeline is a much more exible scrolling band which enables you to show the duration of an event, to juxtapose multiple events, and to choose the timescale you want, from milliseconds to millenia. Here is an example of a timeline showing philosophers lives, where extra information appears when you click on an item:

Provided you have data in the correct format, you can make straightforward timeline with it. The spreadsheet below...
label Focus group DL online seminar PG research training Year 1 essay deadline day Year 2 essay deadline day Year 3 essay deadline day Exams start_date end_date 2011-06-01 2011-06-04 2011-06-07 2011-06-10 2011-06-13 2011-06-15 2011-06-18 2011-06-20 2011-06-24 comment The best attended of all the focus groups - Wedesday afternoons is a good time for future meetings.

A bit later than usual but unavoidable with all the bank holidays this year Too many bank holidays this year to start earlier.

...when put through Babel and combined with this short piece of html...

...will plot this data on a basic timeline like this one.

Note: You may have to make some minor adjustments for the timescale to appear exactly how you would like it. Some
of the ways in which you can customize the timeline at are shown at http://simile-widgets.org/wiki/Exhibit/Timeline_View. If you are condent editing your html and would like to experiment with your timeline further, there is more information at http://simile-widgets.org/wiki/Timeline.

Examples of Ensemble timelines

In addition to the philosophers timeline (above), the Ensemble team has also created timelines for use in Archaeology and Law, as illustrated below.

Alternative visualizations of this data are shown on the Tile view sheet, where the same datasets are displayed in the default view.

Lenses
Although the View provides the basic template for displaying your data, lenses enable you to select which parts of your data you display and also allow you to style that appearance to your liking. To style a view with a lens, include the text <div ex:role=lens> .... </div> within your views html. The content of your lens goes in the place of the ... marks. At this point you can choose which parts of your data you wish to display. For example, the Educational Philosophers web pages shown below all load the same data, but use different combinations of views and lenses to create different displays on each page, as follows: For the reading list, this part of the html orders the items by author, then date and is contained within the view:

This part populates the lens with author, date, title and publication details of the item. This is the more complex html text for the timeline view and the associated lens:

As you can see, the command ex:content=.header_of_a_spreadsheet_column can be used to populate the lens with data from a column from one of the spreadsheets. It can then be styled with html. For more on structuring the data, see the help sheets Structuring your data, Multiple spreadsheets and Data modelling.

Facets
Facets are the parts of your Exhibit which allow users to select and lter the data they see. Facets are completely optional - you can have a perfectly functioning Exhibit page without them. However, if you do want to allow users to sort and lter data, there are various ways in which you can do it. This help sheet shows you how to include a basic range of facets: the Text Search facet; the List facet; the Tag Cloud facet and the Numeric Range facet. There are some other types, which are slightly more complicated to create, which are listed at http://www.simile-widgets.org/wiki/Reference_Documentation_for_Exhibit.

Note:
You can include multiple facets in your web page, so that users can sort across multiple criteria at once. When selections are made in one facet, the others automatically update so that they only display data which ts those criteria. Removing those criteria will show all the data again.

Text Search Facet

To include a text search box like this one include the following text in your html document: <div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="Search"></div> By default the text search box will search everything, but you can limit it to searching certain properties (e.g. only searching labels). More information is at http://www.simile-widgets.org/wiki/Exhibit/Text_Search_Facet.

List Facet

The list facet shown on the left is the default type of facet. To include a list facet in your web page, include the following text in your html document: <div ex:role="facet" ex:expression=".a_spreadsheet_ column_header_here"></div> replacing a_spreadsheet_column_here with the heading of the column you would like to search by. This header must be preceded by a full stop and enclosed in double quotation marks as shown here. There are some options for customising the list facet, shown at http://simile-widgets.org/wiki/Exhibit/List_Facet. In this example, the html text below creates the facet shown on the left, taking data from spreadsheet columns headed group and nationality respectively.

Tag Cloud Facet

The tag cloud facet is an alternative to the list facet, with the size of the words reecting the number of times they reoccur. Clicking on the terms lters the data by the terms. To include a Tag Cloud facet in your web page, include the following text in your html document: <div ex:role="facet" ex:facetClass=Cloud ex:expression=".a_spreadsheet_ column_header_here"></div> replacing a_spreadsheet_column_here with the heading of the column you would like to search by. This header must be preceded by a full stop and enclosed in double quotation marks as shown here. There are some options for customising the list facet, shown at http://simile-widgets.org/wiki/Exhibit/Tag_Cloud_Facet. In this example, the html text below creates the facet shown on the right, taking data from spreadsheet column headed dc_subject.

Numeric Range Facet

The numeric range facet allows you to select only data which falls between certain numeric values. To include a Numeric Range facet in your web page, include the following text in your html document: <div ex:role="facet" ex:facetClass=NumericRange ex:expression=".a_spreadsheet_ column_header_here" ex:interval=your_choice_of_interval_here ></div> replacing a_spreadsheet_column_here with the heading of the column you would like to search by and your_choice_of_interval_here with the intervals you want the numbers to be grouped into (the default is 10). Format these expressions as they are shown here. For example, this html:

takes the data from the spreadsheet column headed undergraduates (below left) to create the facet shown below. There are some options for customising the Numeric Range facet, shown at http://simile-widgets.org/wiki/ Exhibit/Numeric_Range_Facet

Note: You can place your facets

anywhere you like on the page using html - they dont have to go down one side.

Further information and links

Ensemble Project Links:
The Ensemble Project Website: $ http://www.ensemble.ac.uk/ The ESRC/EPSRC TEL Programme: $ http://www.tlrp.org/tel/ This Resource Pack as a downloadable pdf le: $ http://ensemble.ljmu.ac.uk/q/calbooklet The 'Walkthrough' from Spreadsheet to Application used in our CAL workshop: $ http://ensemble.ljmu.ac.uk/q/5step The Ensemble Support email address: $ ensemblesupport@ljmu.ac.uk

Other Sources of Information:

The SIMILE Project Website http://simile.mit.edu/ The Current SIMILE Widgets Site http://www.simile-widgets.org/ The Current SIMILE Widgets Code Repository http://code.google.com/p/simile-widgets/ WWW Consortium Semantic Web Activity: http://www.w3.org/standards/semanticweb/ There is a lively and well-supported SIMILE Widgets mailing list with full archives on which people not only post questions and answers to problems, but also share their creations and accounts of how they have used them. This is at http://groups.google.com/group/simile-widgets/ and you can subscribe through the SIMILE Widgets site.

Contact Details
The Ensemble Project c/o Professor Patrick Carmichael Faculty of Education, Community and Leisure Liverpool John Moores University Barkhill Road Liverpool Merseyside, L17 6BD Tel: 0151 231 4633 Email: w.p.carmichael@ljmu.ac.uk

Contact the Ensemble Project

c/o Professor Patrick Carmichael Faculty of Education, Community and Leisure Liverpool John Moores University Barkhill Road Liverpool Merseyside, L17 6BD Tel: 0151 231 4633 Email: w.p.carmichael@ljmu.ac.uk