3/21/17 Lecture notes: Sortable tables

12:30: Housekeeping:

  • Who’s finished Assignment 4? Let’s see.
  • Sundance event on Thursday/Friday!!! It will be very cool, you should come.
  • Special invite for VR Journalism workshop: 5-7 p.m. Thursday in Innovation Lab for journalists and VR creators. Please RSVP here if you plan to come so I can get enough pizza:

12:45: Sortable data tables

  • Tabletop, what I used in the first class. Displays days from Google spreadsheets.
  • See how one past student used it in his final project, near the bottom.
  • Some coders, like Chris Keller, have modified it for journalism. Here’s an example of a sortable, searchable table.
  • Where do you get the code? Github of course!
  • Download the code. Then …

1-1:30: How to make it work

  • Make a Google spreadsheet.
  • Give it a name with no spaces. Change the tab label to the same name, also with no spaces.
  • Share it, and make it public to the web.
  • Publish it (File > publish to the web.) Yes you must do both of these to make the data available.
  • Take the URL and save it somewhere.
  • Download the Tabletop for Data Tables code and unzip it. Note the files you need is in a second zip inside the first one.
  • Open the Scripts folder, then open tabletop-feed.js in Sublime Text.
  • At the very top, find initializeTabletopObject and put your URL into the place after it, being careful not to remove any necessary syntax.
  • Remove everything except for the “key” which is the long list of characters near the end, before /pubhtml.
  • Scroll down to what you see in var tableColumns (around line 28).
  • Look at your spreadsheet column names. Copy and paste them into the field after “sTitle”. This is what will be displayed in the column on your site.
  • Then, in the field next to mDataProp, paste the same name, but remove all capitals and spaces. This is the variable that pulls from the Google sheet.
  • Finally, you will need to remove some logic at the end that makes the last column display a web site link. We will go over how to do this, and what the code means, in class.
  • Edit the top of the HTML file to remove the sample text, then preview the HTML. You should see a searchable sortable table.
  • The last step? Upload into the class FTP and embed.

1:30-1:50. Phew, that was a lot!

So now work on it and try and fail and try and fail and try again until you can get a table to appear. I will go around to help you 🙂

Feel free to use data from previous exercises or assignments, such as New York State bridges or any data from the NY State open data site.