Build a Network Graph in Tableau in three steps

tl;dr
1. Get or create a JSON file with nodes and links structure like explained here by Yan Holtz.
2.
Use this Observable Notebook to input your JSON and download the two CSV files.
3. Download this Tableau Template and refresh the extract with the downloaded files.

Introduction

Hello #datafam!

Recently, I’ve created my first data visualization using d3.js and canvas. The idea was to visualize the tweets and mentions during the last Tableau Conference. Quickly, I realized that I could use the data generated by d3 and simply plot the result in my favorite tool, Tableau. Here’s the result:

Then, the idea was to simplify as much as possible the steps to transform any network dataset into a Tableau visualization. Hopefully, this goal was achieved, but I let you be the judge after you finish this tutorial!

The main idea is to use the d3.js force layout to generate the initial layout and download generated the data (don’t be afraid, you don’t need to learn to code!). Then, use this data to feed a Tableau template with everything ready and pre-configured.

Ready? Then let’s start with step 1, finding a dataset to visualize!

Step 1: Find/Create a network dataset

tl;dr
You need a JSON file with appropriate structures, containing nodes (with id fields) and links (with source and target fields) like explained here.
You can search for examples
here.

The first step is to find (or build) a dataset, in JSON format, with the appropriate structure. This structure is composed of two main elements:
nodes: with required id fields
links: with required source and target fields

Here’s an example:

{ 
 "nodes": [
    { "id": A },
    { "id": B }
  ],
  "links": [
    { "source": A, "target": B }
  ]
}

By searching network on Observable, you’ll find many examples with attached files.

If you already have your data, but in a different format, you can use this great resource from Yan Holtz to reshape your data. Of course, you can also use any other data preparation tool, as long as the output is similar to the one described above.

For the rest of the tutorial, I’ll use this file. It comes from this project and shows similarities to songs according to last.fm.

As you can see the file contains our required format: nodes with id and links with source and target. All the other fields (like match or name here are not required but will be available in Tableau).

Once you have the file ready, it’s time to generate the data and let d3.js do its magic.

Step 2: Generate the data

tl;dr
Open this Notebook and replace the existing file with your
JSON.
Play with the Config part to change the layout.
Download the two CSV files.

As explained in the introduction, we’ll use d3’s Force Layout to generate the data. But how can I do this, without knowing d3.js or even Javascript? you may ask.

The answer is ObservableThe magic notebook for visualization
More specifically this notebook (which surely can be enhanced if anyone has suggestions):

https://observablehq.com/@ladataviz/network-data-generator

The notebook is separated into four parts:

  • The most important part, above the graph where you can input your file and download the data.
  • The graph itself.
  • The Config part where you can play with the size of the nodes and the strength of the force. This will change the render of the graph.
  • The Code part (that you don’t need to look at if you don’t want to).

To input your file, click on the paperclip that shows up when you hover over the first cell defining the data and click on replace:

Once you’ve selected and replaced the existing file, you should see the updated graph with your data (in my case, the songs similarity data). You can play with the Config pane to change the strength of the size of the nodes. Here’s my final result:

When you’re happy with the result, use the two buttons at the top to download the two CSV files: nodes.csv and links.csv:

Those files contain all the coordinates and information needed to render the same graph in Tableau.

For the last step, you can use the quick and easy version, using a pre-configured template, or find, below, a more detailed version where we’ll build the graph together from scratch.

It is now time to open Tableau and visualize our data with our favorite tool!

Step 3: Visualize your data with Tableau
(quick version with template)

tl;dr
Download this Tableau Workbook Template, open it in Tableau Desktop, and refresh the Extract Data Source with the downloaded file
s.

You choose the quick and easy version, that’s perfect to get your network graph working in Tableau in less than five minutes!

First, download the template available here. Click on the button at the bottom (highlighted in the screenshot below), then click on « Tableau Workbook » and finally choose your Tableau version (2019.2 minimum if you want all the features):

Open the file in Tableau Desktop and refresh the Network Graph Extract:

You’ll get prompted that there is a problem and Tableau can’t find the files. That’s normal because Tableaus is trying to find them in their previous location, my computer.
Click on Yes to edit the connection:

You are redirected to the Data Source page. Here, you’ll see that all the tables are red. To edit the connections, click on the small arrow next to nodes and select « Edit Connection… »:

On the window that opens, search for your downloaded CSV files, and double-click on nodes.csv. You should now see the data sample, indicating that everything is working fine:

Click on the Dashboard, « Simple Network Graph« , at the bottom, to go back to the visualization and voilà, here’s your network graph, in Tableau:

There are already some built-in features in the template like the node and links highlight when you click on one of them (only available from version 2019.2).

That’s it! Feel free now to modify this template, change the colors, layout, size, add information, interactions, and anything you want to create the next VOTD!

If you want to learn more about how this template was built, read the next section.

Step 3: Visualize your data with Tableau
(step by step version from scratch)

Oh! You’re here for some challenge and you want to learn how to build a network graph, congratulations! Let’s not make you wait any longer, and open Tableau!

Create a new Text file connection and select the first file: nodes.csv. You’ll probably get the same error as me: Tableau doesn’t understand the file format immediately. To correct this issue, click on the Text File Properties option, and make sure it’s configured like in the picture below:

Note: you may have to select something else than « Comma » then « Comma » again.

Then, drag and drop the file links.csv from the left pane next to the existing nodes.csv and repeat the same operations to configure the text file properties.
One it’s done, you can create the left join between nodes and links on the id field.

You need a left join as they may be nodes without links

Your data source is ready, we can start building the viz.

On a new worksheet, put x and y (from the nodes table) in respectively columns and rows. By default, Tableau will aggregate the values because the fields are listed as Measures. You can either convert them to Dimension in the Data Source (and then, convert them again to Continuous) or right-click on the pill and select « Dimension« :

Change the Marks type to Circle. Here are our nodes;

Now, drag and drop x coming from the links table next to existing x in Columns. Make sure you’re also using the pill as a Continuous Dimension, and change the Marks type of this x to Line:

Then, drag the key field, as a Dimension again, on Detail. Here are our links:

Finally, click on the second axis and select Dual Axis:

Don’t forget to synchronize the axis and, if you want the same layout as in Observable, reverse the scale of the y-axis. Change the format (hide the header and remove the grid and zero lines) and you are done:

Wrap-up

Hopefully, with this tutorial and tool, you are now able to easily visualize your network data in Tableau!

Don’t hesitate to leave a comment if you think this method can be improved. I’ll also create an additional blog post explaining how to work with data-driven nodes sizes.

Thank you for reading!

Tristan / @ladataviz

2 réponses sur “Build a Network Graph in Tableau in three steps”

Laisser un commentaire