Now we’re on to the conclusion of this 3 part series, where we deliver the network graph showing the linkages between beer types and glassware styles. As noted in the prior post, Gephi is our tool of choice for creating the network graph. The key elements required for most network graphs are nodes and edges. Nodes are things – people, places, beer types, glassware styles, etc., and edges are the connections between nodes. It’s a simple, yet very powerful framework for all sorts of serious topics, as well as the slightly more frivolous one featured here.
Let’s begin by viewing our node file in Gephi. I’ve taken the liberty of editing the labels column, as some of the non-English text characters don’t translate well when imported to Gephi. Otherwise, our structure remains largely unchanged from when we created it in Exploratory; just a couple explanatory elements have been added:
Note the presence of unusual characters in the id and name columns, and how these have been edited for display labels (in the Label column). Gephi makes it easy to copy data from one column to another, where it can then be edited.
The edges data looks similar in the laboratory tab, albeit with the critical source and target columns:
In this case source and target are really interchangeable, as the network is non-directional (i.e.- beer types do not cause glassware styles).
There are many ways we can use Gephi to arrange, color, size, and analyze the network graph. We’re going to skip over those functions in this blog, other than briefly showing our selected layout algorithm. In this case, we have selected the popular Force Atlas 2 option. Expect to iterate through the settings when you build a graph in Gephi; depending on the data structure you may wish to increase or decrease spacing (using the gravity settings), increase or decrease precision levels, and so on. Here are the settings I chose:
These settings help us to create a graph that spreads the network out to our satisfaction. Be mindful that every network will have a distinct structure, which may lead to layouts that don’t resemble this one. Here, we have a small, highly connected network, which lends itself to a compact structure, especially with our chosen settings:
Note how the largest nodes, all glassware styles, are positioned around the perimeter of the graph. This is caused by the Dissuade Hubs option; otherwise they would tend toward the center of the graph. This is largely a style choice on my part.
Now that the graph is built to our satisfaction, it’s time to push it to a .gexf format, where we can embed it in a web page using javascript. The graph will not look exactly as it does in Gephi, but we will have the ability to make many simple modifications for the web display. The best part is that our graph will be interactive, allowing users to engage with the network. We’ll see that in a few moments.
There are multiple options for sharing our graphs to the web. Perhaps my favorite is the one we’ll use here, a modular structure where we merely need to update the source file and make configuration and cosmetic changes based on our preferences for the graph. First, let’s have a look at the config.js file, where we specify the graph source (.gexf) file, as well as many graph settings such as node size, edge widths, and label display thresholds:
The second file we typically use is the index.html file, which will contain the graph. This is where we can specify the page title, content for the side panel, and logo information. It also holds the links to the javascript files, and the CSS style page, where we can make further changes to graph colors, sizes, and styles.
Once we’ve pushed these pages to the web and made the selected edits, it’s time to view the network graph. Here’s our first look:
The colors came after a few iterations; it seemed natural to have a beer-like hue represent something in the network, so I used it for the glassware styles. I went with a lighter blue for the beer types, with a darker blue for the background. The goal is to have colors that work together, that also stand out from the background.
Here’s an example of the aforementioned interactivity the web provides. In this case, we selected the Shaker glass style, a very common glassware type used for more than just beer:
Note that the Shaker node is now highlighted, and a side panel showing all the beer types for this glass are displayed. We could then choose any one of them, and the graph would update to reflect those connections. It’s really a simple yet powerful way to navigate a network. Let’s zoom in now, and also remove the unconnected edges using the icon at the bottom left of the graph display. Here’s the result:
We now have a much clearer view of all the beer types using the Shaker glass as an option. What else can we do with the graph? How about clicking on the California Common/Steam Beer type? As an aside, the famous Anchor Steam many of us started our craft beer journey with is a key member of this category. Now we see the graph oriented to this beer type, and we can see a second recommended glass type – the Lager glass:
Let’s show one more example, and then you can play with the graph on your own. We’ll click on the Lager class node, to see all the recommended styles of beer associated with this glass style:
While not as substantial as for the Shaker glass, there are still many beer types where the Lager glass is a recommended style. In addition to the various permutations of lager, we see Rauchbier, Helles, Cream Ale, and even the much maligned Malt Liquor!
I hope this was a fun read, but it’s more fun to actually interact with the graph. Click here to do your exploration, and thanks for reading.