This is a blog post by Phil Gyford, who helped me make a thing. I’ve been curious about a tool called sheetsee.js for ages, and we made a site to show you the museums we visit, and it’s driven directly from a Google spreadsheet! I find myself wondering if small museums might be able to use this simple tech.
PHIL SAID:
George has been keeping track of the museums she’s been visiting in a Google spreadsheet and wanted to make it a little more visible, useful and attractive.
Sheetsee.js looked like it might be just the thing to help. It makes it relatively easy to use data from a Google Spreadsheet to make pages containing tables, maps and charts. One of the Sheetsee.js examples, Hack Spots, was along the lines of what we wanted, which was reassuring.
Within a day we’d got a quick single-page site up on Heroku, letting us list all the museums, clicking one to display a museum and its details, including a map. Pretty good! We spent a second day refining it, making nice URLs for each visit, and filtering the table to show only the museums built, founded or opened in a particular year.
The site has barely any back-end; there’s a single PHP file and a `.htaccess` file to make URLs like /visit/23 load that one file.
Sheetsee.js uses Tabletop.js to fetch the Google Spreadsheet’s data. We run through that data and tidy up each row a little: we make some fields more readable; and add fields to show (for example) whether or not that museum has any external URLs, which helps with displaying its details. Sheetsee.js then handles displayig the table, paging the data, making it sortable, and making the filter form work.
The JavaScript listens for clicks on the museum names and then displays its details. When the data includes latitude and longitude we use Leaflet to display a Mapbox map.
Making the page work more nicely — changing the URLs for each museum and keeping the browser back/forward buttons working — involved more custom coding, which got me in a bit of a tangle, given I’m not used to making single-page, solely-JavaScript-powered sites. It seems to work, thanks in part to History.js.
Displaying the museums that were only built, founded and opened in particular years also involved going round in circles a few times, and involved more URL-fixing shenanigans and manually filtering the data before handing it over to Sheetsee.js.
All-in-all Sheetsee.js was lovely to use and it would be a great tool for creating nice views of modest amounts of data held in a Google Spreadsheet, without the complication of a database. Going beyond what it can do by default can be trickier. For example, we wanted to have the table’s filter only filter based on the contents of a particular column, but that’s not easily possible. But, otherwise, two thumbs up!
Good, Form & Spectacle 