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.
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.
What is Timeline JS?
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
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)
- 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.
- End Date (optional)
- Headline (required)
- Text (Appears below the headline. Tolerates some HTML)
- 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>)
- Media Credit (Small annotation beneath media element)
- Media Caption (Larger annotation beneath media element)
- Media Thumbnail
- Title Slide ("start" indicates title slide).
- Tag (Adds tags to slider view in bottom panel.)
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.
- Most websites (use URL)
- Google Documents (publish and use URL from published doc)
- blockquote (use <blockquote> enclosures around text in Media column)
- Daily Motion
- Google Plus status
- Images (jpegs and png files)
- For quick, ready hosting of images, check out drop.pr
- example01.html Sandbox in Google Spreadsheets
- example02.html Sandbox in Google Spreadsheets
- example03.html Sandbox in Google Spreadsheets
- example04.html Sandbox in Google Spreadsheets
- example05.html Sandbox in Google Spreadsheets
- example06.html Sandbox in Google Spreadsheets
- example07.html Sandbox in Google Spreadsheets
- example08.html Sandbox in Google Spreadsheets
- example09.html Sandbox in Google Spreadsheets
- example10.html Sandbox in Google Spreadsheets
- example11.html Sandbox in Google Spreadsheets
- example12.html Sandbox in Google Spreadsheets
- example13.html Sandbox in Google Spreadsheets
- example14.html Sandbox in Google Spreadsheets
- example15.html Sandbox in Google Spreadsheets
- example16.html Sandbox in Google Spreadsheets
- example17.html Sandbox in Google Spreadsheets
- example18.html Sandbox in Google Spreadsheets
- example19.html Sandbox in Google Spreadsheets
- example20.html Sandbox in Google Spreadsheets
Let's see what you have created. Each participant will have a chance to say a few words about the timeline you have started.
We have time to discuss today's workshop as well as other matters related to chronography and data visualization. I have sketched a few questions here for us to consider, but we can entertain any questions or observations you have. I have also included a few quotations from the readings on the Resources page, so we could look at some of the connections between the readings and the workshop.
- What ideas do you have now for Timeline JS in relation to your teaching or research?
- Are there conceptual or theoretical aspects of timeline development for us to consider together?
- What about technical or practical aspects?
- How could Timeline JS be used to gain perspective on paradigmatic conceptions of chronological time?