Assignment 7: Searchable, Sortable Data Tables

Searchable, Sortable Tables

Note: this tutorial borrows heavily from an ONA training session given by Chris Keller, news app developer at Southern California Public Radio. See his Tabletop.js tutorial for more info. Thanks for paving the way, Chris!

Learning Objective: The purpose of this exercise is not to turn you into a master coder, or even to become a master at using Tabletop.js. It is intended to help you see the power of using open-source code for your own reporting and storytelling projects. You will use code from an open source repository (in Github) and make a few minor configurations to create a compelling interactive experience. In the process, you will learn to not be afraid to tinker with code you find in the future.

What you need:

  • A modern Web browser, such as Firefox or Chrome.
  • An unzipping program (preinstalled on Macs).
  • A Google account.
  • Data in a spreadsheet format (Excel, CSV, etc.), or in Google Docs.
  • A text editor, like TextWrangler (installed on most Macs).
  • An FTP program, like Cyberduck.

But first – what is Tabletop, and why should I care?
Tabletop.js allows developers to easily create interactive ways to display information that is stored in a Google Spreadsheet. Anything that is added or changed in the spreadsheet automatically gets reflected in the news application configured using Tabletop. The library was released in February 2012 thanks to work by WNYC and Balance Media.

Problem: You have a big data set, such as a spreadsheet. You want to make it available to readers to search, sort and filter on their own without requiring them to download a spreadsheet or leave your Web site.

Solution: Put the data in Google Docs. Use Tabletop.js and code configured by Chris Keller (news applications developer at KPCC Southern California Public Radio) to display it on your site.

See some Tabletop examples by news organizations: https://github.com/chrislkeller/ona-workshop/wiki/Project-Examples

Now, let’s make our sortable, searchable table.

1. Get Tabletop.js.

  • Go to https://github.com/chrislkeller/tabletop_to_datatables and click the Download Zip button on the lower right. Unzip the downloaded file (simply double click on Mac).
  • Open the folder, and you will see a second zipped file. Double-click it to unzip it as well.
  • Move entire set of unzipped folders to your desktop.

2. Go to this Google doc and create your own copy: http://bit.ly/1caFqBW

Choose File > Make a Copy to create your own copy (you need to sign in to Google first to do this).

3. Make your copy of the Google spreadsheet accessible to the public.

  • Click Share button at upper right.
  • Click “Change” next to Private.
  • Click Done button.
  • Check “Public on the Web,” then Save, then Done.
  • Go to File > Publish to the Web.
  • Check “Automatically republish,” then Start Publishing.
  • Copy the URL in Start Publishing dialog and paste into a new text file. Then click Close.

4. Isolate the Google spreadsheets “key” in the URL

0Av2KordouMCGdElaVGtidDFxcHFCNi15cUJtbU9ZWFE

  • Copy the key to your clipboard.
  • Go to the Tabletop folders you unzipped and open the Scripts folder. Open tabletop-feed.js in a text editor.
  • At line 6, find the key already there in the single quote marks after initializeTabletopObject, and replace it with your key so it looks similar to this:

initializeTabletopObject(‘0Av2KordouMCGdElaVGtidDFxcHFCNi15cUJtbU9ZWFE’);

5. Assign the columns you want to appear

  • Scroll down until you see “var tableColumns” at around line 28. You will see something like this:

{‘mDataProp’: ‘name’, ‘sTitle’: ‘Name’, ‘sClass’: ‘center’}

  • Go back to Google Docs and find the columns you want to display. Take note of the exact titles of each column and remove the upper cases, and spaces. For example, the column header Chapter GPA Spring 2013 should be changed to chaptergpaspring2013.
  • In the second and third lines starting with mDataProp, replace the names inside the single quotes that appear first with the new names.
  • Save your changes and close the text file.

6. Check out your sortable, searchable spreadsheet!

7. Assigment 7: Make your own table and publish it

Using what you learned above, you can create a searchable, sortable data table with new data for a story you want to tell.

Put your own data into the Google Doc and modify the HTML file to display the columns. Upload the files to the class server and embed the table in your blog post along with a short story explaining the data.

Due: Thursday, Feb. 18