SEO Tools and Tips – D3 (Data-Driven Documents)

Reading time: 4 minutes
28th October 2013

One of the toughest challenges I have encountered while working in SEO is that you are constantly tasked with explaining complex theories and trends through large amounts of data. Fear no more, D3 is here to help. D3 is a tool that can help you compile large amounts of data, in easy to use templates, that can be manipulated through browsers. No longer do you need to be a data nerd to get it.


The best thing about using D3 as an SEO is that it allows you to visualize your data as functional masterpieces, which makes it easier to explain what SEO really is, and what it can realistically do. No, we can’t make you a million dollars tomorrow by changing your title tags.

Ok, let’s start at the beginning by tackling the 5 W’s of D3.

What is D3?

D3 is a JavaScript library for manipulating documents based on data. It is commonly formatted in four languages – HTML, SVG, JavaScript and CSS.

Data can be executed in JSON, CSV and geoJSON.

D3 generates and manipulates documents in four ways:

  1. Loading – launching data into the browsers
  2. Binding – tying data to elements
  3. Transforming – setting rules for elements
  4. Transitioning – setting rules for elements between states in response to input

Who started this madness?

Three people are credited with the birth of this brain child – Mike Bostock, Jeff Heer and Vadim Ogievetsky.

When did these geniuses launch this?

Everything I have read, said that this all got underway in 2009 (Protovis). Though I believe D3 didn’t hit the shelves until 2011.

Why would anyone want to do this?

I didn’t interview these guys, but it is pretty clear that their goal was to expand the boundaries of data visualization through the use of browsers –which they did in spades.

Where did these guys come from?

Stanford. They formed the Stanford Visualization Group, which created Protovis and later evolved into D3.

D3 SEO Tools

So how can D3 help you? Well, every SEO has been in that meeting, scrolling through table after table of heat censored data to show, green is good, red is bad. You can only do this through so many slides before the grey, stats fog descends and your room is asleep.

At the end of this meeting you will believe you have won, as they will most likely, at the end of presentation perk up, probably because they are so happy it is over and say, “thanks so much, this was great”. Six months goes by and your recommendations still aren’t implemented. Then you start to ask yourself, “why oh why couldn’t they implement what they had said was possible?”. Simply, you lost them!!

You didn’t give them information they could easily comprehend or more importantly, demonstrate to their bosses.

Cardinal sins one and two of working with data and clients. Say “bye bye” to your fancy new site structure and “hello” to new Meta descriptions.

I’m the first to admit that this is a ridiculous statement, but the more I work with clients, the more this resonates. We, ‘the agency,’ live in the world of data analysis. We spot trends and define strategies. Clients’ main objective is to decide if information is valid/important enough to present upwards and onwards, making the agency’s primary goal to simplify the information and make it passable. This is something I promise you we all have failed at, at one point or another.

This all might sound like I’m knocking people who use excel tricks to present data, believe me I’m not. I still adhere to my excel tricks when comparing a single variable set. D3 is not a valuable asset at for this type of visualization. You want to use D3 when you have multiple variables and data sets. For example, let’s say you want to show a website’s architecture by each URLs links, traffic and server code (404,302,301,200…) in the hopes to convince the powers that be we need a site restructure and updated redirect strategy. Get those typing fingers out! You can use D3’s collapsible tree layout. This would take about fifteen pages to explain, so I’m going to do the honorable thing and give you a template.

Site Structure – Collapsible Tree Layout

This layout allows you to build a collapsible site structure that can be reduced or expanded by clicking on nodes – which is the most amazing thing I ever encountered in the SEO/Data world. My colleagues and I have done everything from developing a redirect strategy that shows 302’s in red and 301’s in green to adding scroll over data for each page’s links, rankings, top keywords, bounce rate……. Be excited this baby is going to revolutionize SEO. Below is the template I use, feel free to rip it off. I work in the internet, I get it.


Keyword Insights – Bubble my Page 

With this D3 tool you put in a URL and it spits out the most prominent words on the page. The larger the bubble the more time the word is used. Scroll over it to see the exact amounts.


Local SEO – Choropleth

This is a great frame you can use to tackle the world of local SEO, from Mike Bostock. I would recommend taking local monthly search data overlaid with your zip code actual traffic. This will open up all sorts of insights and tests you can run with local targeting and revenue mapping.


Putting a bow on it, how you choose to present your data is vital to people’s ability to absorb it. Even the best data discoveries can be lost through complex presentation formats. D3 is a option to remedy complexity in that it allows you turn large amounts of data into visually appealing, functional masterpiece that anyone can operate.

Written By Ayima
Asset 1 Asset 1 Asset 3