2/6 Lecture Notes: Searchable data tables
February 6, 2018
- Assignment 4: What problems did you encounter? How did you fix them?
- Goood examples:
- Tiffany: does some chocolate taste better than others?
- Mike Light: Lord of the Rings characters by screen time
And with customization. How did he do it?
Should have some sources in the story though
- Amanda Dominguez: college tuition
Also changed code to make the colors orange.
- Connor: top 5 quarterbacks
- CB: NCAA story
- Zachary. Pakistan refugees
12:45: Sortable data tables
- Check out this one I made this morning:
- How did I do it? It uses Tabletop, which we used in the first class. Tabletop can be used to display data from Google spreadsheets.
- See how one past student used it in his final project, near the bottom.
- Some coders, like Chris Keller, have modified Tabletop 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. I’ll use this one about cardiac incidents in NY state hospitals.
- 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 from the top of the browser (not what is in the Publish to the Web window) 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 🙂
To practice, feel free to use data from previous exercises or assignments, such as New York State bridges, cardiac incidents or any data from the NY State open data site.
Looking ahead to Assignment 5
Assignment 5 will be to publish a chart using whatever tool you want, with a larger data set used for the story available in a searchable, sortable data table.
And the extra credit will be to figure out how to add more than three columns.