Using Google spreadsheets is a great way for a team to collaborate on a data set but it leaves a bit to be desired on presentation of the data. To that end I will be creating a series of fun examples showing how to build small interactive apps that utilize Google Docs and Polymer web components to quickly bring data to life. In this series I will be using a Google spreadsheet as the data source, but other data sources are possible, and I will get to those as well in future posts.
A little convention is used to make it work. Namely, I use a Hipster Hot Spots Google spreadsheet, where each city’s data is represented by a tab in the spreadsheet. There is also a key tab that provides a list of all the cities in the spreadsheet and the tab id (gid) for each city’s data. The app will load its data from the spreadsheet and populate the city drop-down list of hot spots, and display a map with markers for each hot spot. This was a fun first example, remember to checkout the readme document for code and explanation.
Note: I enabled url fragment parameters so you can easily point the app at your own copy of the spreadsheet for testing. See the readme document for the how-to instructions. Feel free to copy the spreadsheet and try out the app with your own list of cities and hot spots.
Separating code and data is always beneficial, but there is something cool about connecting an app to a Google spreadsheet. There are many spreadsheet users who would like to have an app to visualize their data, but may not be up to the coding challenge yet. I think many small useful apps could be built this way; I will pick a few to build in the next few weeks and discuss them here. I am using the poggr.com service for the example, which is a service I built just for these types of small quick apps that can rely on an external data service. It is basically working to merge interactive content creation and blogging into a single service.
Leave me a comment if you have an small spreadsheet driven app you would like me to build. If it seems reasonable I may add it to the list.