Timeline JS
An Exploration
A Road to Somewhere
See that cover photo? To me, it appears to be a road to nowhere—a road we hope to avoid, and will remain there as a reminder that sometimes software tutorials can take us down that fateful road. Learning to use certain digital tools makes us feel as if we’re careening down that road into technological Limbo where all the other hopeless souls wanted their selected tool to do great things for them, but just didn’t make it, left to wallow in self-loathing because they couldn’t make their tool work its magic for them. Think of that road looming there in front of you, beckoning you to waste much of your time trying to figure out how whatever tool you plan on using will ever work. Think of this as the Odyssey and you, Odysseus, are voyaging into Hades trying to get this thing to work—which makes me Charon, I guess, leading you across the River Styx into software tutorial underworld; but I think you’ll make it out just fine. From our vantage point however, this is as far as we’ll make it down that road.
Certain digital humanities projects call for the use of an outside tool to make certain parts of our research come to life; most often, this coming to life emerges from the ability to capture and visualize data in a way conducive for those on the receiving end of the research. Often we deal with huge amounts of information, sometimes leaving the researcher at a loss as to how to articulate this information—this is where Timeline JS comes in. Data visualization tools like Timeline JS make it easy for digital humanists, or more specifically, historians or literary scholars—any self-titled ‘humanist’ that is, to display a linear progression through time on their website, even though the tool, designed by researchers at Knight Lab at Northwestern University was first intended for journalists, anyone really can make it work for them.
Timeline JS is approachable and relatively easy to use, with the most difficult part of building the timeline finding the information you’re working with and putting it together in a meaningful way, which, I suppose is the general aim of any good digital humanities tool. Since most inclined to call themselves humanists (I hate to generalize but it’s true) aren’t necessarily programmers or software engineers, the need for tools like Timeline JS to be widely available and easy-to-use is more important than ever, given that any decent ‘new’ software such as Timeline JS should be able to meet a wide range of needs for a wide range of users. This software tutorial will explore, discover, and hopefully exhaust the ins and outs of Timeline JS, and will hopefully provide a better resource than, I daresay it, the website itself—a more complete version.
The Basics
So what is Timeline JS? Well, according to the website, it credits itself as,
“Beautifully crafted timelines that are intuitive and easy to use.”
A good selling point, I suppose, but in this tutorial we’ll put that to the test. My initial experience was good with Timeline JS, but I might be one of the few who ran into little problems initially. You might hit a few bumps in the road, as the directions, while clear, aren’t that clear at times, leaving a bit of a guessing game, with the general tutorial being a rudimentary walkthrough with some troubleshooting, which is quite helpful. The overall organization, however, is good. There are a few things Timeline JS does well; in fact, there are many things Timeline JS does well, and that is first and foremost, organizing data chronologically so that it best complements your research in a clean, elegant interface. Timelines are created through a sample Google Spreadsheet, in which you import the data, then given a code to embed into your website, which should look something like this:
But getting there can be a struggle, especially for those who aren’t as ‘technologically inclined,’ in light of the mostly clear directions provided on the website. Beginning with the instructions, they have been so kind to post a video tutorial, allowing those who’d rather have it done for them to do so at their choosing. The video is quite helpful, and I urge you to watch it as you can see how it’s all put together.
The Process
Assuming you’ve already got the data you’re working with at hand, the first steps of building a timeline include making use of the sample spreadsheet. Filling in the available parameters shouldn’t really be much of a problem as long as you know what you’re working with and how you plan to use that data for your research. For a sample timeline, I’ve used the lifespans of a sampling of US presidents, which would eventually be embedded into a webpage as its final destination. Despite the fact that Timeline JS has already done most of the work for you in deciding what data needs to be entered into the spreadsheet, I was a bit confused as to how and why they chose certain data points, like “Type” or “Tag,” which are both optional, however, but it isn’t as clear as is should be as to why they are there in the first place. It just seems cumbersome—perhaps even counterintuitive, to use a spreadsheet instead of a more sophisticated API embedded into the webpage itself rather than the user fooling around in the backend portion of the application to do the work for them—it’s a spreadsheet I know, not rocket science, but there ought to be a better way. If I’m the one designing this stuff, that’s what I would do.
Of course, I ran into a few problems during my first experience with Timeline JS, which began with entering in certain data fields. As you’ll see on the spreadsheet, there is a “Media” tag, which can of course be confusing. One would imagine that a “Media” tag alone would perhaps cause some confusion: what does it mean by “Media”? Well, for a static timeline, we’d be safe to assume that in this case it refers to a standalone image, but according to the “Help” section of the site, video, SoundCloud audio, etc. will work as well. One of the tricky parts of inserting an image URL is getting the right kind of link; I kept getting an error notification within the spreadsheet telling me the URL I entered was “invalid,” which wouldn’t display properly on the Timeline once I hit “Publish to Web,” which we’ll get to later. When you try to publish it as a link to your website with certain values in the wrong place, the spreadsheet will tell you where it went wrong: I’m pretty sure the image is there, it just isn’t visible, as seen in figure 1 below. There is however, a “More Options” tab under the window where you paste the URL to the spreadsheet, which I will get into later.
Thankfully we at least receive some feedback, but it’s unfortunate if you’ve already published the spreadsheet! Not to worry though, as a quick reference to the troubleshooting section of the site indicates that for images to display properly, they must be entered with a URL through Dropbox or another image hosting service like Flickr. Basically, the URL must be a public one. After setting up a Flickr account, I simply uploaded the images I wanted to use, copied the URL and pasted it into the spreadsheet. Voila! The images display perfectly.
Publishing and Fine-Tuning
Moving along to the publishing stage of Timeline JS, this is perhaps the easiest part. After you’ve entered everything into the spreadsheet, you’ll simply click “File,” followed by “Publish to Web.” Following that, you’ll go head back to the Timeline JS website and scroll down to the the window where you copy/paste the link to your spreadsheet into the window. From there, simply copy the “embed code” and paste it into your text editor with the rest of your HTML code, so it looks something like this:
<iframe src='http://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0'></iframe>But before you do that, you might want to take a look at the “More Options” pull-down tab on the third step of making the timeline:
From there, you can select “More Options,” giving you room to switch languages, change the font to match your webpage, start the timeline at a certain slide, etc. This extra method of customizability ensures that Timeline JS will work for anyone in nearly any scenario.
See how simple it is? Assuming you’ve got everything right, it should work like this. Another thing Timeline JS accomplishes well, in light of the spreadsheet being a bit counterintuitive, is the limited amount of ‘fooling around,’ thus allowing the entire process to be simple and un-intimidating once you’ve gotten past any errors in the whole process. Overall, it makes for a pleasant experience if you don’t hit any bumps in the road.
The Good and—not much Bad, or Ugly
I have mostly good things to say about Timeline JS, but there is the one thing that I can’t get over—software designed to be ‘intuitive’ and ‘easy-to-use’ that links to a blank spreadsheet has the potential to become problematic, especially if you don’t want to include some of the required data fields. Timeline JS, while powerful in the regard that you have a considerable amount of leeway as to what goes into your timeline, is also limiting in those aspects. Yes, spreadsheets are popular, powerful choices to use in these types of situations, but perhaps that’s one thing on which they could improve. Moreover, they haven’t yet updated the spreadsheet template to the latest version of Google Slides, which isn’t a big deal and has little bearing on the finished product, but it’s a matter of updating and improving I suppose. While I don’t find that to be extremely limiting, I would imagine a program describing itself as ‘intuitive’ would at least capitalize on that. My final thoughts for Timeline JS, however, is the ability to take a bunch of otherwise scattered information and put it into context in order to best promote your research into a beautifully designed timeline that blends in very well with most webpages. Have fun and good luck.
