Sherp Data Journalism

Lab 7

June 15, 2011

In this exercise we'll work with an API to generate something we couldn't have made on our own, then talk about how it could be customized and suited to our needs.

  1. Take a look at some interactive timelines made by Talking Points Memo and PBS and the L.A. Times and ProPublica. What do they have in common? What's different about each of them? It might not surprise you to learn that they were built with the same tool, called TimelineSetter. It's open source, which means that not only can you steal it but that they want you to steal it. Take a look at the documentation page.
  2. The files we're going to need are generated with a Ruby Gem called "timeline_setter", which we've already downloaded on the lab machines. (A Ruby "gem" is just a little packet of code that helps us do a certain thing.) If you're working on your own Mac, follow the instructions on the document and type sudo gem install timeline_setter in your Terminal window. Depending on a few things, it might work and it might not. If it doesn't, you might have to work on the Lab machines.
  3. The timeline setter runs off of a .csv file, which we have worked with before. Download our sample data for this exercise, which is a timeline of events and reactions across a few days at Fukishima Daiichi. Our data is in a spreadsheet, so you'll have to save it down to a .csv.
  4. We're going to be using an API that will generate a timeline for us based on a .csv file, but it has very specific rules about what the columns are named, which makes sense. Take another look at the documentation page and make sure your column headers are named appropriately. An explanation of the names is below, too.
  5. Make a project folder on your Desktop called "class-7-lab" and inside, put your data, called "daiichi.csv", in a folder called "data."
  6. Without being scared, open up the "Terminal" program on your Mac. Generate the timeline by typing something similar to, but not exactly like, this code, depending on the path to your files. timeline-setter -c /Users/kevin/Desktop/lab7/data/daiichi.csv -o /Users/kevin/Desktop/lab7/ and hit enter. If it worked, your Terminal should say something like "== Files copied to /Users/kevin/Desktop/lab7/"
  7. Now open up your project file. There should be a new file in it called "timeline.html." Open it up in Firefox and take a look. How does it look? Something's not working properly. Open up Firebug and open up the html file in a text editor to see if you can find out why. (Hint: look at the files it's trying to import.)
  8. Go back and look at the documentation for the code. What are some options that could help you fix your problem? When would you want to use which?
  9. One solution would be to generate all the assets to your file. (There are other solutions.) Go back to your terminal and reenter the same command with the "-a" added to the command, which should export all the css and js files you need. (Again, your code will be slightly different.) timeline-setter -c /Users/kevin/Desktop/lab7/data/foo.csv -o /Users/kevin/Desktop/lab7/ -a
  10. Now open your file in a browser. How does it look?
  11. Depending on how much time is left, start styling this timeline by changing the css. How would you change this to make it look like it belongs on Scienceline, for example?

For discussion

Here is how the New York Times ended up publishing this information. What are the benefits of this approach? Why would they make this choice?

Thinking back to when we exported our files from the Terminal window, why might the ProPublica developers have decided not to have the default settings be to not publish all the supporting javascripts and stylesheet files with your html?

How could you incorporate this into your projects with your current internships and future jobs? What would you want to do to change it?

This application was made by the news developers at ProPublica. They are on Twitter and love to hear when their stuff is used, so let them know if you ever make something cool.

They also make a similar application called TableSetter that might be useful for making you for interactive tables.