December 11, 2014 RJBrooker

Searching for Christmas: How to customise your Gephi diagram with D3

Tweet about this on TwitterShare on LinkedInShare on FacebookGoogle+Share on StumbleUponEmail to someone

It’s my first post for Coppelia and I was feeling festive, so decided to make a Christmas search visualisation.  You can use it to take a look at what people are Googling for this Christmas.

Print

In this post I will show you how I to customise your Gephi diagram using D3

There have been quite a few posts on Coppelia by Simon, James and Andy on Gephi and D3 so I thought I’d bring the techniques together and create something new!

Step1: The Data

Each Christmas bauble represents a search term. The size of the bauble represents the volume of searches in the last 30 days.  The links between baubles represents the similarity of terms. Similarities are based on ranking within Googles search recommendations.

RB Christmas Image 1

Data can be obtained from the Keyword Planner in Google Adwords.

 

Step 2: Gephi

Next import the data into Gephi. The simplest way is to create an edge table and node table. Open a new project in Gephi,  ‘File’ > ‘New Project’.  Then go to the ‘Data Laboratory’ tab and click ‘Import Spreadsheet’. Import the nodes before the edges.

import_data
Filter, cluster and style your visualisation until you are happy with the results.  Now export the results as an .svg file, ‘File’ > ‘Export’ > ‘SVG/PDF/PNG file’.

svg_save

 

Step 3: D3

Now for the baubles.  Open your .svg in a text editor, and copy its content into your favourite Javascript IDE.

The top of the bauble is constructed from one rectangle, one circle and 7 evenly spaced lines. I created a D3 function for appending a baubles tops. It takes parameters for the position and scale.

We now need to attache the tops, such that the lower corners are touching the circumference of the circles. In order to do this we use a 2000 year old theorem by our good friend Pythagoras

Pythagorean theorem: The square of the hypotenuse is equal to the sum of the squares of the other two sides”

single ball ballNamely, r2 = a2 + b2 , where r is the radius, and b is also known. This we are able to work out the tops y-displacement, relative to the centre, a=√(r 2 + b2).

Now we use a ‘selectAll()’ statement to append a top for each of Gephi’s bubbles,

 

Step 4: Illustrator

I polished off our christmas decorations in Adobe Illustrator.

First we need to retrieve the SVG that our JavaScript is drawing. In Chrome, right click and select ‘Inspect Elements’. Right click on the SVG object, select ‘Edit as HTML’, and copy the code into a .svg text file.

 

Screen Shot 2014-12-10 at 21.27.13

 

Now open the .svg in Illustrator. I overlay a radial gradient to create a two point lighting effect

 

three_balls copy

 

Notice how the gradient goes from light to dark to light. This is to give the effect of second light source coming from down and behind. (A simpler 1-point lighting effect can be created using CSS.)

Finally I shifted the hue of some of the colours to give it a more festive palette.  I then added a boarder. You might also want to add texture to your baubles (however I found this made the diagram harder to read).

 

ball_ball_fin

 

Hey presto, you have yourself a data driven decoration.

Merry Christmas all!

 

About the Author

RJBrooker I am a Data Scientist at a multinational media agency. I specialise in Deep Learning and AI. I'm on a mission to use data and AI, to help understand, optimise and generate online content. I previously worked at the BBC, and Channel 4. I just finished my latest short film, which is currently screening at international film festivals.

Comment (1)

Comments are closed.

Machine Learning and Analytics based in London, UK