Reimagine Data Visualization with this D3.js Tutorial

What are some unconventional ways of creating data visualizations?

When Sayf (our director of Analytics) asked this question recently – I found myself instantly thinking of D3.jsD3 is a JavaScript library for manipulating documents based on data.

Why use D3.js?

D3 solves a prime problem for many developers and analysts: efficient manipulation of documents based on data.

It doesn’t seem to have caught much traction in the world of digital analytics yet, and for good reason. It’s far easier to email someone a spreadsheet or PowerPoint than it is to setup and host a website. It also requires the ability to write JavaScript, which makes it less intuitive than a Tableau, Power BI, or Google Data Studio. However, unlike any of these applications, there is complete freedom to design your data however you can imagine in D3, which makes it incredibly versatile. D3.js opens up boring reports to exciting, new, interactive data visualization.

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):


Step 1: Google Sheet Setup

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:

Step 1 - Google Sheet Setup

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.

Step 2: Code.gs Apps Script

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:

Step 2 - Code.gs Apps Script

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.

Step 3: Setting up the Google Apps Script webpage

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.

Step 3 - Setting up the Google Apps Script webpage

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.

Let’s head back to Code.gs.

Apparently, every site needs a doGet function in order to run, so we’ll add that in now!

Step 3 - Setting up the Google Apps Script webpage | Every site needs a doGet function

Alright, let’s try publishing again. You should now have a working website!

Step 4: D3.js Apps Script main.js.html Setup

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

Let’s block ads! (Why?)

Seer Interactive

Add Comment