Regular readers of our blog will know that we have been using ObservableHQ to create data visualisations of Breathe London data. We really like the platform - it’s a very quick way to get and share interactive visualisations of all sorts of data. One person can develop a visualisation, and others are able freely to copy and extend it. It does have one limitation which has prevented us from sharing the visualisations more widely: how to keep API keys secret. Heads up: it’s going to get technical!
API (Application Programming Interface) keys are unique codes that are included in all data requests from the Breathe London server. These keys allow the Breathe London developers to keep track of who is using the data. They need to report usage back to the programme sponsors about how much use the system is getting, so tracking which API keys are being used is a good way of doing this.
But if you make a public ObservableHQ notebook, one has to add their API key to the notebook. If other people use the notebook, it looks like all usage of the Breathe London servers are coming from that one person, and Breathe London will be under-reporting their usage.
Access by proxy
Enter a proxy: this is a little bit of code which takes a request for data, manipulates it, and passes it on. Inspired by this post, we set up a proxy running on glitch.com that accepts requests for data without an API key, logs the IP address of the requestor to a file, adds our API key onto the request, and passes it on to Breathe London. In this way, we can change the ObservableHQ notebook to have public access and still allow Breathe London to report their usage figures! If you’re interested in seeing the code, you can find our glitch.com project here.
It’s worth a thousand words
Let’s get to it! You can access our Breathe London data visualisation notebook here.
Another nice thing you can do is to embed it into web pages - just add this block of code:
<iframe width="100%" height="1728" frameborder="0"
src="https://observablehq.com/embed/@airaware/breathelondon-node-data@900?cells=viewof+nodeSearch%2Cviewof+selectedNode%2Cviewof+startDate%2Cviewof+endDate%2Ccharts"></iframe>
We weren’t able to embed this code into this post (it’s not possible with Substack), but if you’d like to see how it looks on another website as an embedded chart, hop over to this webpage for an example.
We would love to know what you think of the ObservableHQ notebook. Are there any visualisations that you would like to see? Let us know! Or even better, have a go yourself!