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.
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.
Step 3: D3
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.
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!