3/21/17 Lecture notes: Sortable tables
March 21, 2017
- 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.