December 11, 2014

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

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.

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.

## 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.

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’.

## 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”

Namely, 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.

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

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

Hey presto, you have yourself a data driven decoration.

Merry Christmas all!