What are some unconventional ways of creating data visualizations?
D3 solves a prime problem for many developers and analysts: efficient manipulation of documents based on data.
Now that you know a little bit about D3, you are probably asking, where the heck do we host the thing? We could go the route of hosting it on our own server, but I’d prefer not to add more work to this. Wouldn’t it be great if it could all just be done through Google?… …. … Lightbulb!
Discover how to host on the web through Google Apps Script here.
I’ve recently fallen in love with Google Apps Scripts.
As I was looking into how I could host through Google, I stumbled across the ability to share a web page. Isn’t it nice when everything comes together? With hosting out of the way, we can finally get to the fun part: building!
Using sample data from Seer Interactive, how about we upgrade an everyday landing page report using D3.js? We’ll need to complete the following steps (but feel free to skip ahead to the final result):
First, we need to connect a Google Sheet with our landing page data to an Apps Script with the visualization. That way, we can templatize the visualization for easy updating each week by dumping insights and new data into the Google Sheets. There’s not much else to this phase, I just set up some dummy data in a Google Sheet. I decided to make this a fictional, “proof of concept” report using Seer Interactive data, so I set it up as follows:
The idea here is that we have a “Page Category” consisting of several “Landing Pages” and I could provide TY, LM or LY as date ranges; all arbitrary, but I figured this way I could add Month over Month and Year over Year if I felt ambitious later. Then, I made up some sessions and conversions so I had some data. Boom, done.
The next step was to get the data out of the spreadsheet and into my Apps Script. From Excel, click Tools -> Script editor … This will pop open the Apps Script with a default Code.gs template. First, I setup the following bit of code to get the data:
All this code does is create a function called getData that gets the data from either the current active sheet or any sheet name I provide and returns that data. We could parse the data here, but I figured I would take care of that later.
Alright, this project is flying along! Next, we’ll create a new file called index.html. This will be our site going forward. To create the new site, click File -> New and select Html file from the drop down. When prompted, you can name it anything you like. Selecting your new html file, you’ll have most of a website setup for you! There are a few things we’ll want to add at this step.
First, we’ll need the D3 library. It would be hard to work with D3 without it! I also chose to add in jQuery because I like jQuery, but it’s not necessary for this walkthrough.
Now, to view the website, just click Publish -> Deploy as Web App … and fill in the next page (note: you can set who has access to the app at the bottom!). Hit publish and!… Error. Okay, still a little more work to do here apparently.
Apparently, every site needs a doGet function in order to run, so we’ll add that in now!
Alright, let’s try publishing again. You should now have a working website!
Woohoo! Finally, we get to mess around with D3! I’m not going to try to reinvent the wheel by giving you the basics here, but I recommend going through the Tutorials offered on the site. Specifically, I went through the first 5 tutorials, including the intro (I’ll admit I skimmed it), all 3 parts of the Bar Charts tutorial, and the one about making a circle, since that encompassed everything I thought I’d need to know. After all, I’m just making a bar chart with some circles in it. How hard can it be?
- Ok, first up, we’ll be adding main.js.html to our project. The purpose of this file is to have one spot we can keep all of our JS code for easy editing.
- Create a new html file File -> New -> Html file and call it main.js.html.
- Next, you can delete everything that’s there and replace it with an open and closing