A Semantic Web Application In A Day

ENSEMBLESemantic 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 find out more at our website: http://www.ensemble.ac.uk/.  We are always interested to find out how people have taken our ideas, resources and 'products' so if you find 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 sheetsThis 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.

2. Getting started

Getting the software for Mac or PC

1. The semantic toolkit

What you need to get going

4. Multiple spreadsheets

Working with complex datasets

3. Structuring your data

Making spreadsheets of your data

5. Data modelling

Planning the links between datasets

6. The spreadsheet generator

An introduction to Exhibit vocabulary

8. Babel

From spreadsheet to web-ready data

10. Views

Ways to display your data

11. Tile View

Customising the default view

13. Displaying data chronologically

Using calendars and timelines

12. Map view

Displaying your data on a map

7. Thinking about facets

Building in data filters

9. Parts of an Exhibit

An introduction to Exhibit vocabulary

14. Lenses

Deciding what to display, and how

15. Facets

Ways for users to sort and filter data

Web browser and debuggerThe sheets called ʻGetting started - PC usersʼ and ʻGetting started - Mac usersʼ have advice on choosing and installing a useful browser and debugger.

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

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 editorThere is help on choosing and installing a text editor on the sheets called ʻGetting started - PC usersʼ and ʻGetting started - Mac usersʼ.

Simile BabelA 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 ToolkitA 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.

Your own data and resourcesThis might be open-source data on the internet, or stored in files on your computer.

In either case it will need to be in a structured form, preferably spreadsheets.

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 fine. 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 first 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 file 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/firefox/

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 find bugs and experiment with changes to your web page.

To get Firebug, go to http://getfirebug.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 fine. 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/firefox/

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 find bugs and experiment with changes to your web page.

To get Firebug, go to http://getfirebug.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 dataThis 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 OpenOffice 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 field in that record, like this sample from the Victorian authors spreadsheet:

Each row represents one record in our collection, with the columns storing the fields: authorʼs name, authorʼs birth, authorʼs death, plus one of their works and i ts publication date.

Note: You cannot leave empty rows or columns in an Exhibit spreadsheet. The first field must be in the leftmost column, with subsequent fields in subsequent columns without any gaps. Likewise the first record must be in the second row (the first row is where the field names are recorded) with each following record in following rows, without gaps.

The first row in the spreadsheet acts as a header. This gives a list of the field names for the remaining rows. You will refer to these in your finished Exhibit.

Data formatsTo enable Exhibit to parse the data in the spreadsheet cells, some types of data will need careful formatting. As a general rule of thumb itʼs 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 specific rules, described below.

ListsLists can be stored in a single spreadsheet cell using semi-colons. When editing such a list it is important to use semi-colons between each item, but not before the first 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.

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

The most important field 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 field – which means every row in our Victorian authors spreadsheet must have something filled out in the label column – and the data in the label field must also be unique across all records.

Some tipsDo:• use just letters - upper or lower case• use digits• use dashes or underscores instead of spaces

Don’t:• use quotes• use commas or full stops/periods• use exclamation or question marks• use spaces or tabs• begin a field name with a digit

The “label”

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 field names outlined above.

The only reliably unique column in our sample spreadsheet was major work so thatʼs the once weʼve 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 fill out each authorʼs 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ʼ.

The example above is a valid spreadsheet, but the header row needs some work to make it comply with Exhibitʼs rules about valid field names. This is because the names in the header row are used as identifiers for referencing the field data as each row is displayed on an Exhibit web page. They must therefore be in a form compatible with standard programming identifiers. Because these field names rarely appear on screen in a finished Exhibit web page, it doesnʼt 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!)

Naming fields

Good Bad

Exhibit has a handful of standard field names that are treated with significance by the software.

Multiple spreadsheetsThis 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:

Adding “types”

Splitting up your spreadsheetsThe 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 Exhibitʼs ability to link multiple datasets, we need to create two spreadsheets: one exclusively for authors and one just for works.

When Exhibit works with more than one collection of data it requires a new standard field 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 first 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 authorʼs 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 spreadsheetsFor help on how to design the links between your spreadsheets, see the help sheet called ʻData modellingʼ.

Data modellingThis 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 isnʼt fatal – but if you know how youʼre 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 theyʼll 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 thatʼs required is a solid knowledge of the data being described, and a bit of common sense.If starting from scratch itʼs 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 field, work in turn links to both theme and publisher, meaning a given book can now be connected with a set l ist 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 isnʼt strictly necessary to use the same name for a type and the column referring to it. In the examples above, the field publisher inside work points to records of type publisher in another spreadsheet. However the referral field 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 find all the authors who wrote stories on a given theme (e.g. romance) – weʼd have to navigate from author to work to theme to find 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.

Checklist:

Here’s a quick checklist of things to remember as you model your Exhibit data:

• Is your spreadsheet a basic grid, with the first row being a list of column names?

• Does each of your spreadsheets have a “label” field, 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? (This is particularly important if using more than one spreadsheet.)

• If you use a type column, are all the values in each cell identical? (Be careful 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?

Below you can see some examples of how Ensemble has modelled complex data in the Educational Philosophers spreadsheets.

If youʼre 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ʼ.

1. Access

The spreadsheet generatorThe better and more completely you describe your data, the better your semantic web resource will work. If you arenʼt 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.

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 files on your computer, you have the option of uploading these into the spreadsheet generator, so that some columns are filled in for you.

Tips:

• FOAF describ

es people

•GEO describes pla

ces

• DCTERMS is an exp

anded

list of Dub

lin Core t

erms

The most generic schema here is ʻDublin Core Vocabularyʼ. If you arenʼt 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 fields, 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 wonʼt matter if you donʼt fill 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.

3. Optional - adding zip files

If you choose this option some of the columns of the spreadsheet will be filled in for you. This may save you some time if you already have a lot of the data (e.g. image files) stored on your computer.

To use this option, put all the files into one folder and compress it into a zip file.

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

In the left-hand panel, click on the ʻBrowseʼ button to find your file.

4. Generating the spreadsheet

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

This will open a dialog box asking if you want to open or save your file. 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 first 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 youʼre ready to enter your data.

Thinking about facetsThis 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 filter the data based upon the attributes we provide. In this way we hope they will find interesting (and perhaps previously undiscovered) associations between different records in the data – faceted browsing is all about exploring data to find 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 childrenʼs – and in doing so they might uncover a marked upsurge in the popularity of childrenʼs 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 doesnʼt 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 filters 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 (fiction, non-fiction, 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 Exhibitʼs 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 youʼre 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 filled 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.

BabelBabel 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 files). Babel will not work with .xlsx files created by Office 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 spreadsheetSave 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 files on my computerʼ.

Click ʻBrowseʼ to find 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 file.

Give this file 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 dataAlthough 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 arenʼt 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 find it best to process them individually at first, to make checking for errors easier.

Parts of an ExhibitThis 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 filter data. They are entirely optional - you can have an E x h i b i t w i t h o u t them. For more on the different types of facets, see the help sheet of the same name.

The areas in boxes are Views . Your Exhibit must have a view. Views provide a basic template for displaying your data, but you can style them with Lenses. T h e r e i s m o r e guidance given on T i l e , M a p a n d Timeline views in the relevant help sheets.

The circled areas are Lenses. Lenses display a n d s t y l e s e l e c t e d elements of your data. Using a lens enables you to choose which parts of your data you want the user to see, a n d s t y l e t h e m accordingly. There is more about lenses in the help sheet of the same name.

ViewsViews 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 five views. You can find 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 flexible, although the appearance can be edited to fit 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-to-view 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ʼ.

Map view

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.

The map view allows you to display your data on a G o o g l e m a p . T h e example on the left, used for journalism students, m a p s n e w s r e p o r t s against seismic activity: the larger the bubble, the b i g g e r t h e q u a k e . 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 find 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 ViewThe 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 file (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 file.

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 ViewIf 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 find http://www.geonames.org useful.

You will also need to include the Exhibit Map View extension and a short piece of html in your file. You can find these at http://www.simile-widgets.org/wiki/Exhibit/Map_View.

The processlabel type race latlng

ChirkLymm SprintLymm OlympicHarlechGrendonWilmslowKeswickThe BeaverThe Little BeaverConistonDevaNorthwichDambuster TriathlonFearlessParbold

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

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 file in the same folder as the html file, which should look like the one below.

The circled section is an optional colour coder, which takes information from the ʻ r a c e ʼ c o l u m n i n t h e spreadsheet, and uses it display different coloured markers for different types of events on the map.

When you open the html file 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.

How Ensemble has used the 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.

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 a c c i d e n t i n v e s t i g a t i o n 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 even ts lead ing up to the g r o u n d i n g o f t h e s h i p . Information about the weather and the vesselʼs status appears in the pop-up bubble when the map marker is clicked.

Displaying data chronologicallyIf 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.

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

You can find both of these at: http://www.simile-widgets.org/wiki/Exhibit/Calendar_View

Calendar View

If you need assistance with the spreadsheet, see the sheet called ʻStructuring your dataʼ for help.

label start_date end_dateFocus group 2011-06-01DL online seminar 2011-06-04PG research training 2011-06-07 2011-06-10Year 1 essay deadline day 2011-06-13Year 2 essay deadline day 2011-06-15Year 3 essay deadline day 2011-06-18Exams 2011-06-20 2011-06-24

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

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

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 flexible 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 philosopherʼs lives, where extra information appears when you click on an item:

Basic Timeline view

label start_date end_date commentFocus group 2011-06-01 The best attended of all the focus groups - Wedesday afternoons is a good time for future meetings.DL online seminar 2011-06-04PG research training 2011-06-07 2011-06-10Year 1 essay deadline day 2011-06-13Year 2 essay deadline day 2011-06-15Year 3 essay deadline day 2011-06-18 A bit later than usual but unavoidable with all the bank holidays this yearExams 2011-06-20 2011-06-24 Too many bank holidays this year to start earlier.

Provided you have data in the correct format, you can make straightforward timeline with it. The spreadsheet below...

...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 confident 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 timelinesIn 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.

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

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:

To style a view with a lens, include the text <div ex:role=“lens”> .... </div> within your viewʼs 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 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ʼ.

FacetsFacets are the parts of your Exhibit which allow users to select and filter 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 filter 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 fits those criteria. Removing those criteria will show all the data again.

Text Search FacetTo 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 reflecting the number of times they reoccur. Clicking on the terms filters 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

ht tp: / /s imi le-widgets.org/wiki /Exhibit/Numeric_Range_Facet

Note: You can place your facets anywhere you like on the page using html - they donʼt 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 file:

$ 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