How to design a dashboard using d3.js

d3.js dashboard

The below paragraphs explain how the dashboard seen here can be made using d3.js. This means you don’t always need to buy some expensive BI solution to help you visualise your data. Of course, the likes of Tableau and Qlikview are a lot easier to use if you want to quickly build a dashboard though.

There will be many ways that this same dashboard can be built using d3.js so the below is simply showing how I’ve made it in this instance. Feel free to leave comments on how it could have been done better.

The final d3.js dashboard

But before we begin, why would you want to make a d3.js dashboard anyway? My main reasons are around data security. Once this dashboard is built we can hide the page behind some password protected part of the site (in theory). Another good reason to use d3.js when designing a dashboard is that you can make it look very unique or bespoke. You can embed YouTube videos around your charts (provided they’re applicable and needed), use custom fonts etc etc. You have free reign to make what you like.

The below dashboard is a template that can be used to visualise a client’s social presence online vs its competitors. The data isn’t held in external CSVs but is instead hard coded with the JavaScript. Holding data in CSVs may make it easier to update though in the long term.

For anyone who’s tried learning d3 you’ll recognise the pattern needed to make a chart. You first select something you want to build (like a “twitter chart”) then you bind some data to it. Once the data enters the scene the objects used to build the twitter chart are created. We can see this with the below code:

svg.selectAll(“tfoll”) .data([[24279,2],[18101,1],[457676,5],[8482,1],[0,1],[1228777,10]]) .enter() [...]

How to learn d3.js

d3 js demos

The best way to learn d3.js is by taking apart examples

One of the best ways to learn d3.js is by editing existing visuals. Below I show you how several d3 visuals can be easily edited. You can add your own data and format the code so, visually, the d3 visual looks different enough from the original. We won’t change the structure (much) of these visuals so this is a handy d3 tutorial or beginners to wet their feet with.

The first visual we’ll edit is the brilliant titanic survivors graphic made here. This visual allows users to see the volumes of different categories. So “how many survivors were there?” and of these, “how many we’re men?” and so on.

On inspection I felt this visual would be great for showing a breakdown of visitors to a website (google analytics can provide this data – easily to Excel if you use Excellent Analytics). This way I might be able to see that most visitors are “new”, use “chrome” and “come from the USA” etc.

The data for the titanic visual is located in a CSV. Right click the original titanic visual to view the source code. The line below shows us where we’re obtaining our data from.

d3.csv(“titanic.csv”, function(csv) { vis.datum(csv).call(chart); });

In this instance the titanic data is located in the same directory as the titanic visual. Data may sometimes reside in the code itself or maybe in a JSON file.

You’ll see in the data that each row represents a passenger. There is no “count” column so the d3 js code must count how many times a row appears to calculate the width of bars in the d3 visual. (So my google analytics data will need to be formatted so each row represents a visitor).

Copy the [...]

What is d3.js?

d3.js starter guide

d3.js allows you to make great data driven visuals. d3 stands for data driven documents. The js stands for javascript.

So what’s a data driven document? Imagine you had lots of shapes – triangles, rectangles, circles and squares. If you bound these shapes data (such as a CSV file) then the data could dictate the size of the shapes, the colour of them an the location in the browser. This is how d3.js allows users to make attractive data visuals.

And what’s javascript (js)? If HTML is the structure of a web page and CSS is the look of the page, then javascript is how the web page behaves/works. This means users can interactive with d3.js visuals.

How do I start making d3.js visuals? There’s no ‘software’ that you need to download as each visual is a bespoke creation (in my opinion). What you will need is a modern browser (IE9+ or Chrome,Firefox), a text editor (Coffee Cup will do) and the ability to host your files. You’ll need to refer to the d3.js library in your code too. This is simply a reference to a file that could be saved on your own web server, though that’s not a necessity either.

Are there any books for learning d3.js? At the moment there’s just one, Getting started with d3 by Mike Dewar. Expect more books over the next 12 months. There’s also great online material here and here.

What skills are required for making d3.js visuals? You need a to know a little bit of the following:

HTML CSS Javascript SVG Be aware of JSON

but you don’t need to be an expert (i’m certaintly not and I’ve managed to make a few visuals). I find the best approach is to download a ready made visual, tweak [...]

Using d3.js to visualise online conversion journeys

d3.js scatter chart

How to use d3.js to help visualise online consumer paths to conversion.

An interactive version can be seen here. Use Chrome or Firefox.

This helps answer such advertising questions as “Do returning customers use more brand keywords than new customers?” and “how long are people’s online paths to conversion?”

The data Displaying “paths to conversion” can normally be a tricky task. Typically you’d have several thousand converter journeys all displaying different habits. Some will be very short journeys where there are just a few Google searches prior to conversion and other journeys will be longer journeys over many days where lots of display banner ads have been seen, but not clicked.

New vs Returning d3.js

My data set I have here shows me the entire journey for each conversion. By “journey”, I mean every advertisement the converter was exposed to. These could be PPC clicks (someone typing in the brand name, like “Nike trainers”, then clicking the sponsored link that’s served), or display impressions (someone seeing a visual banner ad but not clicking it). Each of these “events” had a timestamp so I can see how long after the ad click/impression a conversion appeared. Rather than use a giant table made in Excel I realised I could use a scatter chart made using d3.js to visualise every event for every conversion. The patterns that emerge may tell me about the behaviour of the converters. My final data set is loaded into the visual using d3.csv.

I started by first visualising the paths for converters using two series, one for brand search terms (blue) the other for generic search terms (green). The data above has four columns:

Keyword_nm – this shows the keyword that the converter typed in along their conversion journey. In the d3 visual this is [...]