Welcome to this morning's workshop on Timeline JS. In the next three hours, we will get acquainted with the Timeline JS platform, build our own media-rich timelines, and discuss the potential of projects like these for teaching and research.

I. Introductions (20 mins)

Introduce yourself by saying a little bit about who you are and something you are currently working on (e.g., a project, a class you are teaching). Please also mention what interests you about the workshop today as fits with one or two of the following: theory, methods, pedagogy, or code.

Return to top

II. Overview and Examples (20 mins)

What is Timeline JS?

Timeline JS is a javascript- and CSS-based kit for building (and easily updating) media-rich timelines. Developed out of the Knight News Innovation Lab at Northwestern University, Timeline JS provides us and our students a space for documenting processes, for exploring rhetorical concepts of chronos, kairos, and metanoia, and for developing chronographic accounts concerned with both the past and the future. I first discovered Timeline JS in this collection of datavisualization kits and tools, which were mentioned in a blog entry on Nathan Yau's Flowing Data approximately a year ago. Learn more about Timeline JS at http://timeline.verite.co/.

My own uses of Timeline JS have gravitated toward teaching, but I have framed assignments that involve Timeline JS for graduate students, advanced undergraduates, and first-year students with theoretical, methodological, and technical considerations in mind. Among the values I find in students' work with Timeline JS is what I am for now calling rhetorico-temporal attunements. Such attunements come from noticing and documenting activity (often writing-related activity) at multiple timescales. Because of these timelines, I have also been thinking more about choric invention (i.e., chora as an alternative to topical invention) and the potential for chronography in controversy mapping (i.e., for articulating prospects in a given controversy). I hope we talk more about these and other possibilities for the timelines near the conclusion of today's workshop.

Next, We'll Look at a Few Examples

"Tracing Seismic Activity: Shifting Static Scholarship," Jana Rosinski, EMU Graduate Assistant

"A Summer of Digital Writing," Joe Torok, EMU Graduate Assistant

WIDE-EMU 2012 Conference Program and Google Spreadsheet

EM-Journal 2.2, CSW Composite, March 2013

"Does a Location Shape Who You Are?" Ashley Bentz, Annotated Mile2 in ENGL121: Researching the Public Experience, Fall 2012

Return to top

III. Demo (20 mins)

Next, let's get to know the two workspaces for developing a timeline: the viewport and the sandbox. We'll access both in a web browser. The viewport is where we view and navigate the timeline. The sandbox is the Google Spreadsheet where we can add, remove, rearrange, and adjust elements. We've already spent a few minutes with the viewports in the examples above. Now we will take a closer look at how changes to the sandbox (once saved) appear in the viewport. Just as you will do when you develop your own timeline, we will frequently toggle between the two: viewport and sandbox.

Anatomy of the Sandbox (Specified Columns in the Spreadsheet)

  1. Start Date (required)
    Formats can vary from four digit years (e.g., 1981) to 04/04/2013 9:10:00.
    Simple, ordinal numbers will render in Chrome (e.g., 1, 2, 3) but not in other browsers.
    For BCE dates, include a minus symbol.
  2. End Date (optional)
  3. Headline (required)
  4. Text (Appears below the headline. Tolerates some HTML)
  5. Media (See the list of acceptable media types on p. 2. Paste links here. Or, for plain text or blockquote, simply write in this area. For plain text, enter text. For blockquotes, enclose the quotation with HTML tags, <blockquote> and </blockquote>)
  6. Media Credit (Small annotation beneath media element)
  7. Media Caption (Larger annotation beneath media element)
  8. Media Thumbnail
  9. Title Slide ("start" indicates title slide).
  10. Tag (Adds tags to slider view in bottom panel.)

Return to top

IV. Building a Timeline (60 mins)

Now it's your turn to develop a timeline. Your own viewport and sandbox are linked below corresponding to the number written on your handout.

Here are a few considerations before starting:

  • Timelines with more than 50 items can become sluggish when rendering.
  • The timelines we will work with today consist of an HTML page (viewport) that calls data from a Google Spreadsheet. It is possible, however, to build Timeline JS with JSON, instead. For student projects, Google Spreadsheets has the advantage of shared access and auto-saved version histories (for one-click rollbacks, when necessary).
  • The Timeline JS kit consists of files available for free download at http://timeline.verite.co/.
  • The spreadsheet entries are sensitive in some instances, so it is best to make just one or two changes at a time, save, and refresh the browser to make sure everything is rendering as you hoped it would.
  • Google Spreadsheets supports upwards of 20 synchronous users, so you (and your students, in teams or as full classes) are welcome to explore the collaborative development of a timeline.
  • More nuanced timeline development may take many more hours than are available in today's workshop. But it's okay to get a start and return to the in-progress timeline for more development later (i.e., these links will remain active for several weeks, or much longer if you request it).

Media Types (Sandbox Column E)

In column E, Timeline JS accommodates the following media types. That is, you can incorporate media from the following sources, platforms, services, etc.


Derek Mueller
Asst. Professor of Written Communication
Eastern Michigan University

Please feel free to tweet today's workshop!
#uwm #chronos

Serialized greyhound striding