Ajax timelines and the semantic web

Explore anything that has a time component with a little Timeline Ajax code. Timeline uses Asynchronous JavaScript and XML (Ajax) to provide a nice interface for browsing information that has a time component. The Timeline Web site describes Timeline as “...Google Maps for time-based information”. Timeline lets you view points and durations of time in an intuitive manner. I refer to these as time events or just events when the context is clear. Many bands at different granularities -hour, day, month, year and so on -can show you how events relate to each other. You can use the mouse to drag around the display, or double-click on the Timeline to center at that time. All events can have click bubbles showing a little HTML with links and images. Using Timeline itself requires no software installation on the client or Web server. Although there are no requirements for installing Timeline, while developing Timeline Web sites, you can improve reload speed by installing Timeline on the local machine. To do this, check out a copy of Timeline from Subversion, and change the script path in your Timeline HTML files to point to your local copy. Listing 1. Get Timeline from Subversion for quicker reloads. $ svn checkout http://0-simile.mit.edu.innopac.lib.ryerson.ca:80/repository/timeline/ Generating a Timeline Timelines are normally generated in the onLoad() JavaScript function of the HTML page body. An HTML div element is defined where the Timeline itself is to be generated. Call Timeline.create() in the onLoad() JavaScript function, passing the ID of this div element and the information to use for the Timeline. Many day, week, month and year sliders can be created using the Timeline.createBandInfo(), which selects the time unit and screen size relative to the entire Timeline that each band will consume. The Timeline is populated with time event data from an XML file using Timeline.loadXML(). An update function also should be called in onResize() to allow the Timeline to redraw itself. An HTML file showing a Timeline is provided in Listing 2. First, we include the timeline-api JavaScript file directly from mit.edu. The bulk of the work is done in the onLoad() function that generates two bands: one showing days and the other months. The two bands are passed as an array into Timeline.create(), along with the HTML ID of the div tag where we want this Timeline to be. The bands are connected to an event source object, through which we then load our Timeline XML file. The syncWith setting makes sure that when you drag one time band the other will follow. Our OnResize() function makes sure that Timelime.layout() is called to update our Timeline. The rest of the HTML file simply defines a few other elements and a div tag where we want our Timeline to be created. The XML file containing the dates is shown in Listing 3. This contains two types of durations: one we are sure of and one that is just a rough window of time. Because the XML file does not contain isDuration=true for the Versailles event, it will be shown differently on the Timeline. The final event is a fixed single point in time when our flight leaves. Ajax Timelines and the Semantic Web http://0-delivery.acm.org.innopac.lib.ryerson.ca/10.1145/1200000/11... 2 of 10 8/27/2007 7:29 PM Figure 1. A Basic Timeline in Firefox Events can have links, images and an HTML content associated with them. The screenshot in Figure 1 shows how this example is rendered by Firefox. Here, I have clicked on the Vierzehnheiligen event to show its image, and below that will be the HTML associated with this event. A band on the Timeline can be nonlinear. For example, this band could display days as its default unit until it hits a hectic period, at which point it shows hour units for a three-day period before reverting to days as its default unit. This is done using Hot Zones, which are created by calling Timeline.createHotZoneBandInfo() instead of Timeline.createBandInfo() and passing an array of band information. Listing 2. HTML Showing a Basic Timeline Basic Timeline usage function onLoad() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: Sep 14 2006 00:00:00 GMT, width: 40%, intervalUnit: Timeline.DateTime.DAY, intervalPixels: 100 }), Timeline.createBandInfo({ eventSource: eventSource, date: Sep 14 2006 00:00:00 GMT, width: 60%, intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl = Timeline.create( document.getElementById(my-timeline), bandInfos); Timeline.loadXML(basic-example.xml, function(xml, url) { eventSource.loadXML(xml, url); }); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } Basic Timeline usage

Fetched live from OpenAlex and de-inverted. Abstracts are not stored in this database: the inverted indexes are 8.6 GB of the frame’s 9.3 GB of text, and the host has 13 GB free.