So you want to build a hive panel? You are in the right place. This tutorial should take you 20-30 minutes to complete and get you to build and modify a hive panel. We purposefully glance over how to make certain design choices and instead focus on the technical aspects. Stay tuned for tips on how to make the right design choices to build a functional and explorable hive panel.

Setup

You will need a working version of Python on your machine, ideally version 2.7, as well as the NumPy package, any version older then 1.11.0. You can download Python here and Numpy here.

Getting Hive Panel Explorer

Getting Hive Panel Explorer on your computer is quite simple. First, go to the Hive Panel Explorer Github homepage and click Download Zip in the top right of the page. Unzip the zip file and store the folder somewhere convenient on your machine like your Desktop folder.

Testing HyPE

Let's test that everything works on some of the test data: the friends network. Open a terminal window (here are instructions to open a terminal window for Windows and for a Mac).

From the terminal window, change directories until you are in the HivePanelExplorer folder you just unzipped. The command "cd" simply stands for "change directory":

$ cd Desktop/HivePanelExplorer/

You can view what files are in this folder using the "ls" command or by opening your File Explorer. You should see the following appear when running "ls":

$ ls

    Directory: C:\Users\Sarah\Desktop\HivePanelExplorer

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2015-11-14  12:38 PM                hivepanel
d-----       2015-10-27   2:38 PM                hiveplot
d-----       2015-11-14   2:16 PM                test
-a----       2015-10-27   2:38 PM            950 .gitignore
-a----       2015-10-27   2:38 PM           1775 LICENCE.txt
-a----       2015-11-14   2:24 PM           5750 README.md

And using your file explorer, you should see something like this:

If you want to take a look at the friends network node and edge data, check out the test/friend_data/ folder which contains the node data in the friends_nodes.txt file and the edge data in the friends_edges.txt file.

The python script we want to run to build the Friends hive panel is in the hivepanel folder so we change directories and then simply run the following command:

$ cd hivepanel
$ python create_panel.py -nodes ../test/friends_data/friends_nodes.txt -edges ../test/friends_data/friends_edges.txt -format txt

You should see the following text printed in your terminal:

*
  Reading .txt as a networkx graph.

PARAMETERS OF NETWORK:
     Network name: friends_nodes
     Node attributes:
                gender
                height
                degree
                clustering
                betweenness_centrality
                closeness_centrality
                component_membership
     Edge attributes:
                friendship
                edge_betweenness_centrality
     Output folder ../test/friends_data

*
  Making panel.

It worked! The friends dataset has many node and edge attributes which the python script detects and formats so that we can use these attributes as drawing properties in the hive panel.

Designing the hive panel

Quick file overview

Now let's see what was created when we ran the python script. Open the test/friend_data/ folder in your file explorer and you should now see 11 files: 2 are the original node and edge data files and 9 new files have been created. Luckily there are only two files you really need to worry about:

friends_nodes_panel.html displays the panel. Simply open this file using any modern browser. You will never need to alter this file.

friends_nodes_parameters.js contains all the hive panel design specifications. This is where the magic happens. You can redesign your panel by modifying this file. Each line in this file controls some design aspect as described by the commented text (everything after a "#" symbol).

Open the friends_nodes_panel.html file in your browser. You should see the following hive panel:

Making a double axes hivepanel

You'll notice that HyPE defaults to a triple axis 2x2 panel of hive plots. Since it's a 2x2 panel (as opposed to a 3x3, or 4x4) a total of four node properties were used to build the panel (denoted in the column and rows). Two of these properties are axis assignment rules (labeled in columns) and position rules (labeled in rows). To alter these rules and design your hive panel, open the friends_nodes_parameters.js file in any text editor (Notepad will do the trick!) and let's edit a few lines.

First, we could chose to double the axes so we can see edges coming from friends of the same gender by changing the following lines in the friends_nodes_parameters.js file:

var numAxes = 3
    doubleAxes = false

to:

var numAxes = 3
    doubleAxes = true

Now let's save the file we just edited, and refresh the panel on the browser. Your panel should now look like:

Now that the axes are duplicated, we can see the edges between nodes that are assigned to the same axis. We revert to single axes for the rest of this tutorial by simply undoing the edit above.

Changing the traits used

Next we shuffle the rules around a bit. Let's say that instead of clustering coefficient we would like to use betweenness centrality as an axis position rule. We do so by changing the following lines, again in the friends_nodes_parameters.js file:

var columntraits = ["gender","degree"];
    rowtraits = ["height","clustering"];

to

var columntraits = ["gender","degree"];
    rowtraits = ["height","betweenness_centrality"];

If we wanted a 3x3 hive panel, we could simply add properties to the list variables above such that there are three columntraits and 3 rowtraits. To see all the available properties we can use and their names, simply checkout the coloring rule form in the right side bar of the HyPE interface (see screenshot of interface below). We can also change the scale used (linear, log, even, rank) for each axis rule by modifying the columnTraitScales and rowTraitScales variables. We specify that we would like the nodes to by positioned on the axis linearly by modifying the following lines:

var columnTraitScales = {"gender":"linear","degree":"linear"}
	rowTraitScales = {"height":"linear","clustering":"linear"}   

to

var columnTraitScales = {"gender":"linear","degree":"linear"}
	rowTraitScales = {"height":"linear","betweenness_centrality":"linear"}   

Now let's save the file again, and refresh the panel on the browser. Your panel should now look like:

Exploring your hive panel

Once you are finished designing the core components of your panel (i.e., picking the size, e.g. 2x2 panel, picking the column and row traits, picking the scale of each assignment and position rule), you no longer need to edit the friends_nodes_parameters.js file and you can using the interface components to bring your hive panel to life!

Using color rules

Now let's add a bit of color... We can finally use the coloring rules form on the side bar in the interface. First we select what we want to color (node or edge) and then what property we want to color by (degree, gender, edge weight, etc.), the value of that property we want to select (degree > 2, gender = alien, etc.), and finally the color. Colors can be selected using basic CSS color names (e.g., "red", "darkblue") or hex color codes (e.g., #ECB371). If would want help crafting suitable color palettes, check out Color Brewer.

In the following image I colored the nodes by gender using a different color for alien, girl and boy nodes:

Why color the nodes by gender you ask? Just like in a bar chart or other visualization, coloring elements helps our eyes see patterns by, for example, comparing the elements of different colors. In this case, coloring by gender always me to quickly answer questions such as:

• Which gender has the most friends? (A: Two aliens and one boy have more than 6 friends!)
• Who are the shortest creatures? (A: Aliens)
• Are all creatures friends? (A: No! Girls and Boys aren't friends!)

Exploring your hive panel

From here the sky is the limit! To further dig into your panel and uncover more patterns, you can add filtering rules (which work in the same way as coloring rules), search for a node using the Search bar, hover over nodes and edges to identify them using the tooltip, and select nodes and edges by clicking on them and seeing their position in all hive plots. Stay tuned for more tips and tricks to explore different kinds of patterns in your network using these features.

Saving your figure

You have now created a beautiful hive panel, let's save it. The easiest way to do so is to open your panel using the Chrome browser and saving this fantastic SVG Crowbar tool as a bookmark following these instructions. Once that's done, you can click the bookmark to save your figure as an SVG file.

Happy hive plotting!