I love animated charts where the animation is central to the storytelling; where it adds value, rather than being simply fancy decoration.
When it’s done well, it can be extremely powerful, mesmerizing and compelling.
One of the best examples I’ve seen is Bloomberg’s animated temperature visualization. I love how powerfully this chart conveys its message, and I’ve been semi-obsessed with it ever since I saw it.
So, over the past few weeks and since my last experiment with the Google Visualization API, I’ve been chipping away at this project to create an animated temperature chart within the Google environment. It’s finally in a state I can share here, however it’s what you might call an MVP still…
Here’s my animated temperature chart built with the Google Visualization API connecting to Washington D.C. data in a Google Sheet:
You can see this animated chart in all its glory here.
My Twitter feed is mostly populated with data-related resources and people, so I almost always find something new and shiny going on there to distract me.
Sometimes this can be a good thing though (and sometimes, it can be the best thing ever).
Take last Friday. I found myself procrastinating, browsing my home feed when I saw this tweet for the upcoming Microsoft Data Science summit:
What caught my eye was not the actual tweet, but the sumptuous weather visualization that I recognized as one of Edward Tufte’s famous creations.
I clicked through to the article, which linked to Tufte’s original chart (here) and a fantastic tutorial about re-creating the chart using R, from Brad Boehmke (which is actually the chart shown in the tweet above).
It looks at daily average temperature over a period of time and captures the historic min/max range, the normal range (95% confidence interval), the 2014 temperature line and picks out the highs and lows. It renders all of this information in a single, beautiful column/line combination chart.
Curiousity piqued, I wondered whether this would be possible with Google Sheets?
Ever find yourself needing to repeat an action in your Google Sheets?
For example, on a recent client project I wanted to cycle through my spreadsheet data, compare it to another dataset and apply a matching algorithm. To do this and stay within the 6 minute execution limit for Apps Script, I split my data into “blocks” of 10 rows, counted how many blocks I had and then ran the matching algorithm once for each block until they’d all been processed.
By adding time-based triggers, I setup my Google sheet to do this automatically, rather than having me click a button each time.
In this post I’m going to show a skeleton example of this time-based architecture, to which you can add your own functionality.
The entire code file is here on GitHub and the spreadsheet is available here (feel free to make a copy: File > Make a copy… and then you can open the script editor to modify the code).
Time-based triggers with Google Apps Script
In this simple example, I’m going to output a random number in a new line of my spreadsheet every minute until I’ve looped through a set number of times (2 in this case). It’s deliberately basic as the focus is on the trigger/timing architecture.
Here’s a screencast of this simple program in action (speeded up):
Behind the scenes, everything is running on autopilot once I’ve clicked that first Run button.
In the following image, I have two browser windows open. On the left, a Google Sheet containing a simple table of data. In the right browser window, a web page with a d3 chart that displays the data from the Google Sheet and can be refreshed dynamically when the data changes.
This year I’ve focussed on deepening my coding skills, so I’ve finally been able to give d3 a proper go. And let me tell you, it’s brilliant. It’s exciting to hook up a data source to a custom chart that changes dynamically, and be able to see it on a live website, which other people can view.
In this post, I’m going to discuss the steps I took to create this d3 visualization of the GitHub API.