Pages Navigation Menu

A free summer seminar for experienced high school journalism advisers

From the 23 teachers who attended this workshop in July 2019, we have included Solutions Journalism Story Ideas, other Story Ideas for a whole range of topics and Tech Examples of something they learned, many of these for data visualization, plus some resources anyone can use in the future for these topics.

How I created my first timeline (and cursed only a couple times)

See my timeline here:

I tackled creating a timeline for the first time as my techie project.

Previously, I (or students) would have simply used InDesign to create it, making each little piece along the way — and having to tweak and tweak and tweak to make the spacing right. On the website, it would have simply been a PDF of what was in print, too.

Enter TimelineJS.

Some of my goals and parameters:

  • Use some photos that I had taken and some found online.
  • Complete a decent timeline in a reasonable amount of time, which for this would have been two hours, not counting taking the photos.
  • Learn it well enough that I would be able to reasonably assess the potential time involved and level of frustration a student might find while tackling this.

Some lessons learned:

  • If you have taken your own photos, you need to add several steps to the process. Photo files need to have a URL that ends in jpg, gif, png or jpeg. You aren’t actually dropping an image file into the spreadsheet, just the URL.
    • This means you need to upload your photos to something that will give you such a URL. I chose doing this through Flickr. I’m not sure what else might work. Having your photos in a Google folder won’t work because each image file address does not end in one of those four options.
  • If you are getting photos from the internet, you can see the potential problems already with attribution. (For this piece, I added credits to the first two, but the NPR one is obviously not correct.)
  • For photos from the internet, you need to get the URL for the photo itself, not the page that it is on. And even then, a couple photos with files that ended in jpg didn’t show up in the final graphic. This was when I cursed.
  • I probably would not use this in my non-journalism classes and just have them create a physical timeline on posterboard. That would be faster and accomplish the same educational goals. There’s a lot of time spent figuring out how to create the timeline, which is fine when one or two students are trying to pull something together for the website, but in a class of 25 trying to learn it, you could easily waste several class days just getting them up to speed on the tech side of it.
468 ad


  1. Brett, this looks great! Sadly, I discovered that Timeline JS is Java-based, so it won’t work on a Chromebook. If Chromebooks are the only devices your students have access to (like mine), they won’t be able to use this awesome tool. 🙁

    • Amy,
      Thanks for letting me know that limitation. Won’t be an issue at our school, as every student has a student-issued Dell laptop. But one of my blog posts will be dealing with a limitation imposed by the school on technology and how to deal with it.

  2. I LOVE your timeline Bretton. This is so cool.

  3. The timeline looked more polished than I expected it to be. Thanks for the practical tips and limitations to consider (those are often not included when I see cool new things to do with the publication). Also, I didn’t realize there was a memorial to Alison Krause on campus and am bummed that I didn’t see it.