When writing the header to your web page, you've told your page where to find the Exhibit scripts and spreadsheet feed that it needs to produce your timeline. Now you need to build the actual timeline structure within your web page to display your data.
The first thing that you will do is create what Exhibit calls a timeline "view." (I'll frequently use this term in the remainder of this tutorial.) Add the following code to your web page's body.
<body> <div ex:role="view" ex:viewClass="Timeline" ex:start=".start" ex:end=".end"> </div> </body>
The value of ex:start—and by "value," I mean what follows ex:start in quotation marks—tells your timeline to find each event's starting date in the column named "start." (If you had perversely named this column "chicken," you would write ex:start=".chicken".) You'll notice that in the value of ex:start has a period before the name of the column (".start"). This period is required. If it isn't there, the Exhibit scripts will be unable to read your data.
Adding these fives lines of code is all that is required to build your timeline. It's very basic at this point, but it's a start.
You can click here to see a live example of how your timeline would look at this stage if you were to stop here and put it online.
If you were to click on one of your events on the timeline at this point, you would find that what it generates doesn't look very polished.
You're getting a bubble, but you're also getting every piece of information you've added to the spreadsheet, regardless of whether you want it there or not. What's more, neither your photos nor videos will display at this point.
To fix this, you need to add one more section of code to the body and create what Exhibit calls a "lens" for viewing your timeline's events. Copy and add this code to your HTML document's body. Make sure you place it either above or below the timeline view's opening and closing <div> tags, but still before the </body> tag.
<div ex:role="lens"> </div>
These two lines strip out all the unnecessary information, leaving you with a nice, clean bubble to display the information from your event's data.
Unfortunately, you've gone from having unnecessary information displayed to not displaying anything. Adding just a few more lines of code within the lens will change this. Trust me.
Let's say that you want to have the title of your event (its "label" per the name of your spreadsheet's column) and its description appear within the bubble. To do this, you adapt the lens by adding two lines of code, like this.
<div ex:role="lens"> <b ex:content=".label"></b> <p ex:content=".description"></p> </div>
You'll notice that for the "value" of the two new lines of code, you use the names of your desired columns along with a period (".label" and ".description"). This lens produces a bubble that looks like this.
Furthermore, you'll notice (1) that your label has been bolded and (2) that the description sits in a separate paragraph from the label. Both of these features are controlled by the b and p tags that start their respective lines of code. These tags are also closed at the end of the line (</b> and </p>, respectively). It is important to note that "Spook Country" is italicized not because of your timeline lens, but because it was entered between <i> and </i> tags in your spreadsheet.
You will also want your images (if you have them) to display within the bubbles for your timeline events. To do this, you need to add another line of code, which will pull the image into the lens. And let's just say that you want your image to come after the bolded label but before the description. Adapt your lens's code like this, again using the name of your column as the "value" of the new line of code.
<div ex:role="lens"> <b ex:content=".label"></b> <p><img ex:if-exists=".image" ex:src-content=".image" /></p> <p ex:content=".description"></p> </div>
By starting a new paragraph (<p>), you set the image off from the label. This line of code also includes an "if-exists" command. This command insures that if you don't associate an image with an event, you don't end up with a missing image link.
Adding this code to your lens produces an event bubble like this.
Finally, you might want your lens to display the initials of the person who has added each event to the timeline. You might choose to set these initials off from the rest of the bubble's text by making them italicized. You can do this by adding the code <i ex:content=".initials"></i> to the second to last line of the lens. What you end up with for your lens should look something like this.
<div ex:role="lens"> <b ex:content=".label"></b> <p><img ex:if-exists=".image" ex:src-content=".image" /></p> <p ex:content=".description"></p> <i ex:content=".initials"></i> </div>
This result is an event bubble that looks like this.
By manipulating the lines of code within the lens, you can control the order in which your lens elements are displayed and how they are displayed. We could have also displayed the data from the "eventType" column in the lens with a line like <p ex:content=".eventType"></p>. Any column you add to the spreadsheet can be pulled into the lens in this manner. It is also very easy to change how the elements within the bubble display by wrapping them in different tags (<i>, <b>, <p>, <br>, etc.) within your timeline lens. Experiment to find what works best for your individual needs.
Your "lens" is now in place, and the body of your HTML document should thus far look something like this:
<body>
<div ex:role="view"
ex:viewClass="Timeline"
ex:start=".start"
ex:end=".end">
</div>
<div ex:role="lens">
<b ex:content=".label"></b>
<p><img ex:if-exists=".image" ex:src-content=".image" /></p>
<p ex:content=".description"></p>
<i ex:content=".initials"></i>
</div>
</body>
To see a live version of what your timeline should look like at this point, click here.
Now that you can customize your data so it displays within event bubbles just as you like it, you might want to dress up your timeline a bit. We'll do this by adding code in the timeline view (not the lens). This code will variously allow you to:
It is likely that you will want to adjust these options, which are controlled in your HTML, for every timeline you write. You can find specifics on these and other adjustments to your timeline's view on the "Timeline View" entry on the Exhibit wiki.
In order to make your timeline as usable as possible, you should think about what units you want represented in the two bands of the timeline. If you're chronicling the events of JFK's assassination, you might want to be using minutes on the top band. If, instead, you are displaying Jewish history, then centuries might be a more appropriate scale. In a survey class of the Victorian Period, you might split the difference and use single years on the top band and decades on the bottom band. The best scale for your timeline is one that will allow you to see a number of events on the main band but that won't crowd the events too closely together. To see an example of a timeline I built where the scale could have been chosen better, look at all the events crowded in February 2008 on my Google Forms Timeline.
The default scale for a timeline's top band is decades, and the default for the bottom band is centuries. (See this live example.) To change the units in either band, just add these two lines of code to your timeline's "view": ex:topBandUnit="month" and ex:bottomBandUnit="year".
Your full timeline view should now look like this:
<div ex:role="view" ex:viewClass="Timeline" ex:start=".start" ex:end=".end" ex:topBandUnit="month" ex:bottomBandUnit="year"> </div>
The top band's units will now be months, and the bottom band's unit will now be years. See a live example here.
You can change the scale of your timeline easily by changing the value of ex:topBandUnit and ex:bottomBandUnit. There are a number options you can use for your units:
There is no requirement to have the units in the top and bottom band's be close in scale to each other. If they are too far apart, however, it will be more difficult to view the events on the timeline in a meaningful way. Fortunately, even if you discover you've chosen the wrong scale, you can easily choose a new scale by simply changing the value of the two lines of code that control the scale. You won't lose any data in making adjustments to the HTML because your data is controlled by the spreadsheet.
Once you've chosen the appropriate units, you might want to adjust how wide those units display on the timeline. Adjusting the width will give you control over how many of your chosen units will be visible at a time on either band. You can control the width by adding the lines ex:topBandPixelsPerUnit="XXX" and ex:bottomBandPixelsPerUnit="XXX" to your timeline view. Replace the XXXs with a number that represents how many pixels wide you want the unit to be, say "100." By clicking on the links, you can see the difference between a timeline that uses the default unit width and one that controls the unit size.
In general, I only specify a width for the top band of the timeline. The bottom band's width will adjust accordingly. I suggest playing with the number until you get a result you like. Your timeline view might now look like this:
<div ex:role="view" ex:viewClass="Timeline" ex:start=".start" ex:end=".end" ex:topBandUnit="month" ex:bottomBandUnit="year" ex:topBandPixelsPerUnit="100"> </div>
The main reason to control the size of your event bubbles is if they are too small for the images you are associating with different events. Notice the scroll bars in the image below.
You can change the maximum size of your timeline bubble by adding two lines of code to your timeline view: ex:bubbleWidth="XXX" and ex:bubbleHeight="XXX". Replace the XXXs with numbers that represents how many pixels wide and tall that your bubble will be. Again, play with these numbers until you're happy with the results. I've found that width and heighth settings of 500 and 300 pixels, respectively, are effective for most of my uses.
It bears saying that you will want to have several different events with images linked to them to get a sense of the size of your images. Also, despite your settings for the size of your event bubbles, the bubbles won't be any bigger than they need to be for any one particular image.
Adding this tweak means that your timeline view might now look like this:
<div ex:role="view" ex:viewClass="Timeline" ex:start=".start" ex:end=".end" ex:topBandUnit="month" ex:bottomBandUnit="year" ex:topBandPixelsPerUnit="100" ex:bubbleWidth="500" ex:bubbleHeight="300"> </div>
One of the best ways to enhance your timeline is to have its events colored according to the type of event. This allows viewers to see which items are related to each other with only a glance. You can easily color-code your timeline's titles with one new line of code in your timeline view: ex:colorKey=".eventType". You can replace "eventType" with the name of any other column you might want to use in your spreadsheet; just don't forget the period. This could allow you to color-code the event by, say, the initials of the person who entered it. In general, you should color-code using a column where terms will be frequently repeated.
Having added this code to your timeline view means that it might now look like this:
<div ex:role="view" ex:viewClass="Timeline" ex:start=".start" ex:end=".end" ex:topBandUnit="month" ex:bottomBandUnit="year" ex:topBandPixelsPerUnit="100" ex:bubbleWidth="500" ex:bubbleHeight="300" ex:colorKey=".eventType"> </div>
Instead of your events all being one color (as below)...
...they are now colored according to the type of event that you have specified.
The Exhibit script provides a key at the bottom of your timeline to show what type of event each color represents.
Exhibit has a default color scheme that determines which color gets assigned to which type of event. It is possible for you to control exactly which colors are associated with each event. If you want to learn how to do this, read the Advanced Timeline Customization page.
Up to this point, we've been customizing the timeline view to change how your timeline and the data on it appears. This last step will add the ability to, first, search for specific text within the titles or descriptions of your events and, second, to restrict dynamically which event types display on the timeline. Doing so will allow your users to find specific information within your timeline or to see only one class of event over time (say, all of William Gibson's biographical events).
i. To keep the timeline and the search features from getting in each other's way, you should put them in a table. A table will allow you to determine exactly where on the page the timeline and the search features will appear. Start by adding wrapping your timeline "view" in <table>, <tr>, and <td> tags, like this.
<table width="100%" cellspacing="20">
<tr valign="top">
<td>
<div ex:role="view"
ex:viewClass="Timeline"
ex:start=".start"
ex:end=".end"
ex:topBandUnit="month"
ex:bottomBandUnit="year"
ex:topBandPixelsPerUnit="100"
ex:bubbleWidth="500"
ex:bubbleHeight="300"
ex:colorKey=".eventType">
</div>
</td>
</tr>
</table>
The <table> tag creates the table and sets the width across the page and the distance between the cells of the table. The <tr> tag tells your web page where to align each of the table's elements within their respective cells (i.e., top, bottom, center, etc.). The <td> tag indicates that everything within it is in once cell. As such, the timeline view—which is the timeline, as far as your web page is concerned—falls within just one cell.
ii. Now, within the <tr> tags, create a second cell using <td> tags. You will write the code for the search and event restriction boxes within this cell. (To save space, I have replaced the timeline view in the code below with an ellipsis.)
<table width="100%" cellspacing="20">
<tr valign="top">
<td>
<div ex:role="view"
...
</div>
</td>
<td>
</td>
</tr>
</table>
iii. You will want to set the width for this second cell relative to the first one. If you don't do this, the cells will be of equal width. Chances are that you'd rather have your timeline displaying larger on your web page than the search boxes, so add width="20%" to this second cell tag.
<table width="100%" cellspacing="20">
<tr valign="top">
<td>
<div ex:role="view"
...
</div>
</td>
<td width="20%">
</td>
</tr>
</table>
iv. Within the second cell's <td> tags, you should now add this line of code, which will add the text search box.
<div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="XXX"></div>
Replace the XXX with a descriptive title, which will appear above the search box—perhaps, "Search". You now have a search box to the right of your timeline.
v. Now, add a second line of code to will add the event restriction menu.
<div ex:role="facet" ex:expression=".eventType" ex:facetLabel="XXX"></div>
Again, replace the XXX with the descriptive title of your choice. I've decided to use "Event Type." Now you have added a dynamic event restriction menu to your timeline.
You'll notice that you've instructed this box to find its data in the "eventType" field of your spreadsheet. You could pull in information from any of the fields and use it to restrict what appears on the timeline. You could even have multiple boxes, say to restrict by Event Type and by Initials. To do this, you would add an identical line of code, but change ex:expression=".eventType" to ex:expression=".initials" in the second line. As always, don't forget the period that comes in front of the name of your column.
vi. Here's what your timeline view will look like with the search and event restriction menus included.
<table width="100%" cellspacing="20">
<tr valign="top">
<td>
<div ex:role="view"
...
</div>
</td>
<td width="20%">
<div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="Search"></div>
<div ex:role="facet" ex:expression=".eventType" ex:facetLabel="Event Type"></div>
</td>
</tr>
</table>
Writing a timeline view and lens in the body of your web page is all you really need to have a functional timeline.Yet you might want to acknowledge the fine people at the Simile Project whose work has made your timeline possible. You could do this by adding some text somewhere on your page. But you could also add in a linked Exhibit logo to your timeline. Do this by adding one line of code to the cell in which your timeline view sits, but not within the <div> tags: <center ex:role="logo" ex:color="DimGrey"></center>.
<td>
<div ex:role="view"
ex:viewClass="Timeline"
ex:start=".start"
ex:end=".end"
ex:topBandUnit="month"
ex:bottomBandUnit="year"
ex:topBandPixelsPerUnit="100"
ex:bubbleWidth="500"
ex:bubbleHeight="300"
ex:colorKey=".eventType">
</div>
<center ex:role="logo" ex:color="DimGrey"></center>
</td>
The result is a small, centered Exhibit logo underneath your timeline's color key.
If you would like to use a different logo color, you can find other options here. Just substitute "DimGrey" with the color name of the logo you've chosen.
Finally, you might want to have a title on your timeline and some other text that indicates what you have done. You will need to add this text into the <body> of your web page. For example, you might want to add "The William Gibson Timeline" to the first line of your body. To give it more emphasis, you might want to format it as a heading: <h1>The William Gibson Timeline</h1>.
<body>
<h1>The William Gibson Timeline</h1>
...
</body>
|
 |
You might also want to link to your spreadsheet or give yourself credit for all the work you've done to this point. I'll let you decide how or where you want to add the rest of this text to the body of your HTML document.
The body of your HTML document should now look something like this.
<body>
<h1>The William Gibson Timeline</h1>
<table width="100%" cellspacing="20">
<tr valign="top">
<td>
<div ex:role="view"
ex:viewClass="Timeline"
ex:start=".start"
ex:end=".end"
ex:topBandUnit="month"
ex:bottomBandUnit="year"
ex:topBandPixelsPerUnit="100"
ex:bubbleWidth="500"
ex:bubbleHeight="300"
ex:colorKey=".eventType">
</div>
<center ex:role="logo" ex:color="DimGrey"></center>
</td>
<td width="20%">
<div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="Search"></div>
<div ex:role="facet" ex:expression=".eventType" ex:facetLabel="Event Type"></div>
</td>
</tr>
</table>
<div ex:role="lens">
<b ex:content=".label"></b>
<p><img ex:if-exists=".image" ex:src-content=".image" /></p>
<p ex:content=".description"></p>
<i ex:content=".initials"></i>
</div>
</body>
Your entire HTML document should look like this:
<html>
<head>
<title>The William Gibson Timeline</title>
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script>
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"></script>
<link
rel="exhibit/data"
type="application/jsonp"
href="http://spreadsheets.google.com/feeds/list/o00811443551170090113.6982207830451557896/od6/public/basic?alt=json-in-script"
ex:converter="googleSpreadsheets" />
</head>
<body>
<h1>The William Gibson Timeline</h1>
<table width="100%" cellspacing="20">
<tr valign="top">
<td>
<div ex:role="view"
ex:viewClass="Timeline"
ex:start=".start"
ex:end=".end"
ex:topBandUnit="month"
ex:bottomBandUnit="year"
ex:topBandPixelsPerUnit="100"
ex:bubbleWidth="500"
ex:bubbleHeight="300"
ex:colorKey=".eventType">
</div>
<center ex:role="logo" ex:color="DimGrey"></center>
</td>
<td width="20%">
<div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="Search"></div>
<div ex:role="facet" ex:expression=".eventType" ex:facetLabel="Event Type"></div>
</td>
</tr>
</table>
<div ex:role="lens">
<b ex:content=".label"></b>
<p><img ex:if-exists=".image" ex:src-content=".image" /></p>
<p ex:content=".description"></p>
<i ex:content=".initials"></i>
</div>
</body>
</html>
You've finished building your timeline. Now you just need to upload your web page to a server where you can host it and you should have a workable timeline. To see a live example of what the timeline described in this tutorial looks like, click here. You are now ready to invite those with whom you would like to collaborate on the timeline to edit your Google Spreadsheet.
If you are interested in adding some extra functionality to your timeline, including a third or fourth band, controlling the specific colors of the events on your timeline, integrating Google Maps, or building a web-based form for your students to use to populate the timeline, see my Advanced Timeline Customization page.
 |
 |
Timeline Tutorial by Brian Croxall |