{"id":944,"date":"2021-02-20T12:28:31","date_gmt":"2021-02-20T20:28:31","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh201w22\/?page_id=944"},"modified":"2022-02-18T05:18:03","modified_gmt":"2022-02-18T13:18:03","slug":"flourish-graph","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh201w22\/tutorials-guides\/network-analysis\/flourish-graph\/","title":{"rendered":"Build a simple network graph with Flourish"},"content":{"rendered":"\n

You can also view a video<\/a> of me walking through this tutorial.<\/em><\/p>\n\n\n\n

As we have learned, network analysis is a whole field whose founding premise is that one can glean critical and revealing information from the ways that entities connect with each other. Part of the network analysis process includes running fairly sophisticated algorithmic measures of various properties of network graphs and their nodes and links.<\/p>\n\n\n\n

But sometimes you just want to see how your entities connect, in an easy-to-interpret, visual diagram. Flourish<\/a>, the web-based data-visualization package, has some nice templates for that, and today we’ll learn to use them.<\/p>\n\n\n\n

At the end of this tutorial, you’ll find links to resources you can use to expand your knowledge of network analysis and visualization<\/p>\n\n\n\n

<\/a>1. Download your dataset<\/h2>\n\n\n\n

We’ll use a dataset that comes courtesy of Valdis Krebs<\/a>, via a dataset collection assembled by Melanie Walsh<\/a>. The dataset is a list of political books published in 2004, categorized by their political orientation. Two books are connected in Krebs’s edgelist when a purchaser bought them together.<\/p>\n\n\n\n

Please download the zipped file of the datasets here<\/strong><\/a>, and then decompress them.<\/strong>.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>2. Sign into Flourish and create a new visualization<\/h2>\n\n\n\n

Go to the\u00a0Flourish homepage<\/a>, create an account if you don’t already have one, and sign in. Then press\u00a0New Visualization.<\/strong><\/p>\n\n\n\n

Watch me do this on video<\/a>.<\/em><\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>3. Find the Directional graph template<\/h2>\n\n\n\n

You’ll have to scroll about three-fourths of the way down the page to find the Network graph<\/strong> templates. (A good chance to familiarize yourself with some of the Flourish visualizations!) Once you’re there, click on the\u00a0Directional graph<\/strong>\u00a0template button.<\/p>\n\n\n\n

Watch me do this on video<\/a>.<\/em><\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>4. Getting (re)acquainted with the interface<\/h2>\n\n\n\n

You may recall that Flourish templates come pre-loaded with sample data. The idea is that you use that data as a guide to setting up your own properly. Click on the\u00a0Data<\/strong>\u00a0tab to view the prepopulated data.<\/p>\n\n\n\n

Watch me do this on video<\/a><\/em>.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>5. Understanding network data<\/h2>\n\n\n\n

Watch me explain this on video.<\/a><\/em><\/p>\n\n\n\n

You’ll notice that the network graph data includes two tabs: one called\u00a0Links<\/strong>\u00a0and one called\u00a0Points<\/strong>.\u00a0Links<\/strong>\u00a0is an edge list, just with a different name: it includes two columns, showing how the nodes are connected.<\/p>\n\n\n\n

Points<\/strong> is a node list: a list of every node included in the network graph. You don’t need to have a node list (since all of the nodes are included in the edge list, but there are good reasons you might want to. In this case, the node list supplies not only the names of each node (in column A<\/strong>), but also attributes of those nodes (in column B<\/strong>). You can use these attributes to add information to your visualization.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>6. Load your data (1)<\/h2>\n\n\n\n

Watch me do this on video.<\/a><\/em><\/p>\n\n\n\n

We’ll start by adding our\u00a0Points<\/strong>\u00a0data. Press\u00a0Upload data<\/strong>\u00a0and then choose\u00a0political-books-data.csv<\/strong>. You’ll next be asked to\u00a0select the columns<\/strong>.<\/p>\n\n\n\n

Our points data is similar to the data we started with, in that it has two columns. The first,\u00a0id<\/strong>, is a list of all the books included in our network. The second,\u00a0political_ideology<\/strong>, tells you how these books have been categorized: as neutral, conservative, or liberal.<\/p>\n\n\n\n

On the right side of the screen, we’ll tell Flourish which column to use for what. As with the first dataset, we’ll use column A<\/strong> for the id of each node. Column B<\/strong> serves a different function, though. While the last dataset provided numerical information about each node, ours provides categorical information. So instead of using column B<\/strong> to encode the size of our nodes, we’ll use it as a way to group the nodes.<\/p>\n\n\n\n

So for id<\/strong>, select column A<\/strong>, and for Group<\/strong>, select column B<\/strong>. The others you can leave blank.<\/p>\n\n\n\n

(Someday you might be interested to know that you could replace Flourish’s circles with your own custom images, using the Image<\/strong> column, and provide custom info for popup labels using the Info for popups<\/strong> option.)<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>7. Load your data (2)<\/h2>\n\n\n\n

Watch me do this on video.<\/a><\/em><\/p>\n\n\n\n

Let’s consider the\u00a0Links<\/strong>\u00a0tab now. Click on\u00a0Upload data<\/strong>\u00a0and replace Flourish’s data with\u00a0political-books-edges.csv<\/strong>. Our columns are similar: column\u00a0A<\/strong>\u00a0is our\u00a0Source<\/strong>\u00a0and column B<\/strong> is our\u00a0Target<\/strong>. (The columns could easily be reversed, so that A is the target and B is the source; it doesn’t actually matter, since our graph is undirected.)<\/p>\n\n\n\n

You’ll notice, though, that we have a Weight<\/strong> column, column C<\/strong>. Remember, in network analysis “weight” refers to the strength of a connection \u2014 in this case, the number of times each pair of books was purchased together. So enter C<\/strong> for Value of link<\/strong>.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>8. Examine your network graph<\/h2>\n\n\n\n

Watch me do this on video.<\/a><\/em><\/p>\n\n\n\n

Click on the\u00a0Preview<\/strong>\u00a0tab to see what you’ve done. You did it, you made a network graph! You’ll find that hovering over each node reveals its name, and that the nodes are colored to indicate political belief: green for liberal, yellow for conservative, blue for neutral.<\/p>\n\n\n\n

There are a few things I don’t like so much, though. Let’s start with the edges, or “links,” They’re depicted here as arrows, which would make sense if this were a directed graph. But this is an undirected<\/em> graph: if book a is purchased with book b, than book b is necessarily purchased with book a.<\/p>\n\n\n\n

Let’s get rid of those arrows. On the right-hand panel, expand the\u00a0Links<\/strong>\u00a0section. You’ll see a switch labeled Show arrows on links<\/strong>. Go ahead and turn that switch off.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>9. Neaten those edges<\/h2>\n\n\n\n

Your graph is set to thicken the links between nodes when the weight of an edge increases. Those links are looking really thick, though. Inspecting the data for Links<\/strong> reveals why: the weight of every link is actually 1. Yet if we check the links section of the Preview<\/strong> tab, we can see that the Maximum width<\/strong> of the links is set to 10. That’s too wide!<\/p>\n\n\n\n

Change the maximum width to 1, and your graph will look a lot neater!<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>10. Experiment with settings<\/h2>\n\n\n\n

Watch me explain this on video.<\/a><\/em><\/p>\n\n\n\n

Those few adjustments take care of the major settings for your diagram. Not too hard, huh? The main thing, as with all Flourish data visualizations, is that you have to import your data all set to go; you can’t really manipulate it once it’s imported.<\/p>\n\n\n\n

There are a few other fun settings that might interest you. Try:<\/p>\n\n\n\n