2/4/16 Lecture Notes: Timelines

I. A CartoDB 

Irfan Uraizee, BDJ senior, created this poverty map of Onondaga County using skills he learned in this class. He’s now an interactive editor at the Sun Sentinel in Fort Lauderdale.
http://www.thenewshouse.com/story/new-study-finds-unfair-housing-discrimination-university-neighborhood

II. #NHData Finds

What cool data visualizations have you found this week?

III. Timelines

We’ll look at two options for timelines:

a) Vertical timeline, in code

Timelines are common in news stories, and let’s face it — if they’re nothing more than a long string of text, they’re BORING! We can do better with timelines on the Web.

Tabletop.js is one way to create an interactive timeline using pre-built HTML and Javascript code. You just have to change a few variables in the code and upload it somewhere. Everything else is updated through a Google doc.

As an example, let’s look at Professor Pacheco’s CV.

Lots and lots of text. Boring, huh? Now look at the interactive timeline version: http://journovationsu.org/dataviz_s2015/Assignment6/danpachecotimeline/, also embedded at the bottom of this post.

I only had to mess with a tiny bit of code, and now I can easily upload my resume timeline in this Google Doc. That’s because this timeline uses Tabletop, an open source code package that displays data in Google Docs in web pages.

Now it’s your turn to create your own timeline resume or portfolio. My friend and fellow data journalist Lisa Williams from the Independent News Network has create a friendly walkthrough of how to create your own timeline here:
http://dataforradicals.com/the-absurdly-illustrated-guide-to-your-first-data-driven-timeline/

Spend the rest of class going through the exercise. When you get to the point where you need to upload files to the server, go into Filezilla or Fetch and use the FTP server info provided on the first day of class when I asked you to upload your selfie.

Here’s an embedded version of my CV timeline:

b) Horizontal timeline
See the KnightLab timeline tool. Examples:

Assignment 5: Go through Lisa Williams’ Absurdly illustrated Guide to creating a vertical timeline and embed it in the class blog.

If you can’t get the vertical timeline to work, try the KnightLab timeline tool at http://timeline.knightlab.com.

As an incentive to not give up on the vertical timeline, which requires you to mess around with code, I will give 5 points extra credit for anyone who succeeds in posting a vertical timeline!

Due date: Tuesday, Feb. 9 by 9 a.m.