Build a Voronoi Treemap in Tableau in two steps

tl;dr
1.
Use this Observable Notebook to input your data and download the CSV result file.
2. Download this Tableau Template and refresh the extract with the downloaded file.

Introduction

A few weeks ago, I discovered that you can convert any SVG element into a polygon. This means that you can convert any crazy visualization generated by web libraries, like d3.js, into a simple list of X and Y coordinates, perfect to use in Tableau. Quite exciting, right? If you are not excited by this, I am for both of us.

Almost at the same time, I came across the beautiful work of Victoria Rose. And where most people will only see wonderful mini field aerial landscape, it also reminded me of a Voronoi Treemap, and Frank Lebeau’s work to generate them using d3.js.

Combining the two ideas, my goal was first to find a way to easily create Voronoi Treemap in Tableau, and showcase it in a Land Cover visualization. As for the Network Graph, the main challenge was to make the solution easy to use for everyone.

After some time, the solution was ready and I was able to quickly build this visualization, in Tableau:

But if you’re here it’s probably because you want to build something like that too, right? Then let’s not make you wait any longer, all you need is a CSV file!

Get the data

Contrary to the Network Graph generator, you don’t need a special data structure to create a Voronoi Treemap.

All you need is a CSV file with a least one dimension and one numeric field. The separator doesn’t matter as you’ll be able to define it yourself (by default, the comma is preferred).

In the rest of the tutorial, I’ll use the Sample – Superstore CSV file. You can download it here if you don’t have your own data:

Are you data-ready? Let’s make a Voronoi Treemap!

Step 1: Generate the Voronoi data

Before we start, a huge thanks to Will Chase for letting me fork his Voronoi Treemap Observable example as the starting point for my data generator.

tl;dr
Open this Notebook and replace the existing file with your CSV.
Select one field to Split the Treemap, one for the Size, and optionally one to Group the elements.
Download the voronoi.csv file.

If you read the Network Graph tutorial, you won’t be lost. If you haven’t, the idea is quite simple: use a preconfigured Observable notebook, to generate the initial render and then download the result in a CSV that Tableau can easily understand.

Here’s the notebook we’ll use in this tutorial:

https://observablehq.com/@ladataviz/wip-voronoi-data-generator

The notebook is separated into six parts, but you’ll only use four of them:

  • File: to replace the existing CSV by yours and change the delimiter (if needed)
  • Voronoi: to configure the field to use to render the Voronoi Treemap
  • Download: to get the voronoi.csv file needed for Tableau
  • Result: to visualize the initial render in SVG that will be converted in polygons

Let’s visualize our data.

On the Notebook, start by replacing the existing CSV,CO2@1.csv, by your file. To do that, click on the paperclip that shows up when you hover over the first cell and click on replace:

If your CSV doesn’t use commas as separators, you’ll have to modify the Delimiter input.

For example, the delimiter of the Sample – Superstore CSV is a TAB. In order to use this file, I need to enter \t in the Delimiter input:

To finish the configuration, select at least one field to Split the Treemap and one numeric field used for the Size. Optionally, you can also use a third field to Group the element.

In my example, I use State for the split, Sales for the size, and Region for the group. Here’s my configuration and result:

When you’re happy with the result, use the button, highlighted in the screenshot below, to download the result file: voronoi.csv:

This file contains all the required information to build the graph and use it in Tableau. And that’s exactly what we’ll do in the second and last step!

Step 2: Visualize your data with Tableau

tl;dr
Download this Tableau Workbook Template, open it in Tableau Desktop, and refresh the Voronoi Extract data source with the downloaded file
.

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:

Open the file in Tableau Desktop and refresh the Voronoi Extract data source, as highlighted in the following screenshot:

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

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

On the window that opens, search for your downloaded voronoi.csv file, and open it. You should now see the data sample, indicating that everything is working fine:

Finally, click on the Dashboard, « Voronoi Treemap Template« , at the bottom, to go back to the visualization. You should now see the two pre-configured Voronoi Treemap, in Tableau, with your data:

The Voronoi Treemap template offers two versions: one where the color is on the Value and one where the color is on the Group. By default, the labels are displayed for the segment where the value is higher than 6%, you can change that by editing the X for text field.

Note: If you haven’t selected a group in the configuration part during step one, you can also replace the color from Group to Split to have a different color for each dimension, as I did in the Land of Color visualization.

Of course, this is only the starting point and you should be able to easily change the colors, border, background, font, and add any interaction you may need! Have fun!

Wrap-up

Thank you for reading this new tutorial!

The same technique can be used to generate any kind of custom visualization, so if you have any requests, feel free to ask!

Of course, if you face any issue with this solution or have ideas on how to improve it, I’m more than happy to learn from you.

Tristan / @ladataviz

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

Build and deploy a Tableau Extension with React, Git, and Netlify

In this first technical blog post, I’ll do my best to take you through the steps to create, build and deploy a Tableau Extension using Git, React, and Netlify.

Before we start, you should know that Javascript, React and, in general, web development is not my main skill. I’m a Data Visualization Engineer, and I spend much more time building dashboard rather than web applications.

However, I was encouraged to write this article to help other beginners. Indeed, if I was able to do it, you can surely do it too! Let’s start!

Our goal and why this tutorial

The goal of this tutorial is to set up a very basic Extension, that just says « Hello » plus the name of the current dashboard:

Yes, I agree, it’s not very useful. However, we’re going to use three of the current most exciting technology:

  • React: a component-based and feature-oriented JavaScript library for building user interfaces
  • GitHub: the leading version control management tool
  • Netlify: a free and super easy hosting and deployment service that you can link to GitHub

With those technologies, you’ll be able to

  • Develop powerful extensions (and use the Tableau UI API)
  • Have your code safe, secured, and versioned
  • Be able to work with other developers easily
  • Make the extensions available to the world
  • Have continuous deployement (meaning that you just have to push new features, and everyone will see the modifications)

If that sounds good, let’s start!

Initialize your React App

As we’ll build our Extension using React, the first step is to initialize a React application.

To do that, you need to first install Node. You can download and install it here: https://nodejs.org/en/.

Then, open a Terminal, navigate to a folder where you want to initialize your React app, and write the following command:

npx create-react-app hello_world_extensions_tutorial

This will install and initialize a default React application name hello_world_extensions_tutorial.
Navigate to the newly created folder and start the application:

cd hello_world_extensions_tutorial
yarn start

Once all the scripts have loaded, a web browser page will automatically open and display the default React init page:

Our React app is working, the next step is to publish and synchronize it with GitHub.

Sync with Github

The React application already is already initialized to use git. The only thing we have to do is create the repository on GitHub and link it to our React app.

Go to https://github.com/, log in (or create an account if you don’t have one) and create a new repository. Name the new repository hello_world_extensions_tutorial.

On the quick setup, we’ll use the « push an existing repository » command lines. In a terminal, navigate to the react app folder create earlier, and copy-paste the two lines (Note: your command lines will be a bit different):

After pushing your code, you should see your entire React app folder in GitHub:

Our default app is on GitHub. The next step is to develop the Extension.

Create our first Extension

Using your favorite code editor (I’m using VS Code) open your hello_world_extensions_tutorial folder.

There are four main steps to build our Extension.

  • Add the Extensions API library in the public folder

You can download the library here:

Unzip the downloaded file and add tableau.extensions.1.3.0.min.js in the public folder.

  • Reference the library in the index.html

In the public folder, open index.html and add the reference of the script under the title:

<script src= »tableau.extensions.1.3.0.min.js »></script>

  • Write the application

The next step is to actually develop the application. To do that, in the src folder, we’ll modify the App.js file.

Note: As the official Tableau tutorial uses class and componentDidMount I choose to use them, but if you are familiar with React Hooks, you can also replace the following code with the one here: https://github.com/ladataviz/hello_world_extensions_tutorial/blob/master/src/AppWithHooks.js.,

Here’s the code that returns « Hello  » + the dashboard name:

import React from "react";
require("./App.css");

//Needed to use the library
const { tableau } = window;

//Initialize the class and state
class AppComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dashboardName: "" };
  }

  //Update the state by passing the dashboard name
  componentDidMount() {
    tableau.extensions.initializeAsync().then(() => {
      const dashboardName = tableau.extensions.dashboardContent.dashboard.name;
      this.setState({
        dashboardName
      });
    });
  }

  //Render the Title
  render() {
    return <h1> Hello {this.state.dashboardName}</h1>;
  }
}

export default AppComponent;

You can copy-paste the code in the App.js file. I won’t go into the details of building an Extension in this post. You can find tutorials, get started, and API reference here: https://tableau.github.io/extensions-api/

  • Create the .trex manifest

The .trex manifest is the description of the Extension. The most important part is the url in the source-location where we define where the code is running. To test our application, the URL we need to specify is our local environment:
http://localhost:3000/index.html

At the root of the application folder, create a new file, Tutorial Local.trex, and write the following code:

<?xml version="1.0" encoding="utf-8"?> 
<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
  <dashboard-extension id="com.ladataviz.tutorial" extension-version="0.1.0">
    <default-locale>en_US</default-locale>
    <name resource-id="name"/>
    <description>Tutorial (React)</description>
    <author name="Tristan Guillevin" email="contact@ladataviz.com" organization="/" website="https://ladataviz.com"/>
    <min-api-version>1.0</min-api-version>
    <source-location>
      <url>http://localhost:3000/index.html</url> 
    </source-location>
        <icon></icon>
  </dashboard-extension>
  <resources>
    <resource id="name">
      <text locale="en_US">Tutorial</text>
    </resource>
  </resources>
</manifest>

You can modify the author and dashboard-extensions id fields.

The code of the Extensions is done, let’s see if it is working.

Test your app!

Run the application. Like before, open a terminal, navigate to the folder of the React app and start it:

cd hello_world_extensions_tutorial
yarn start

Open Tableau, create a simple Dashboard, name it Test, add an Extension and select the Tutorial Local .trex file. You should see this:

If you don’t, make that your React app is running in a terminal on http://localhost:3000/index.html (open this URL in a browser, you should see « Hello ») and that the code is similar to the one in my Git repository: https://github.com/ladataviz/hello_world_extensions_tutorial

If your Extension is working fine, let’s update the GitHub repository.

Push your changes

The first step is to push our modifications on GitHub. But first, you can check what modifications are ready to be pushed. To do that type git status on a terminal, in the application folder:

As you can see, there are two modified files (public/index.html and src/App.js) and two new files (the .trex manifest and the API library).

To push our changes we first need to add the changes in git, then commit them and finally push them in our master branch. Run the three following commands:

Git add . 
Git commit -m « Hello World Tutorial »
Git push 

On GitHub, you should see the description « Hello World Tutorial » next to the public, src folders and the .trex manifest:

Our GitHub repository is up to date. The next step is to deploy our application online so everyone can use it.

Deploy your application

To deploy the application, we’re using Netlify.

Start by logging in to app.netlify.com with your GitHub account. Then, click on New Site from Git to start configuring the deployment. The first step is to select the Git provider, we’re using GitHub:

The second step is to give Netlify access to your GitHub repository. First, you need to authorize the Netlify application on your GitHub account. This should be easy. Then, you need to authorize Netlify to access your repository hello_world_extensions_tutorial:

Finally, you can select in from the Netlify app:

The last step is to configure the build settings. Normally you have nothing to change, but make sure that the build command is yarn build and the publish directly is build/. Finally, you can click on Deploy:

Wait for the deployment of the site, and when all is green in the Overview, your site is deployed and ready. You can copy-paste the link of your site in a new web page to test it, it should say « Hello ».

Of course, you may want to modify the name of your site for something friendlier (nostalgic-einstein sounds good but not really representative of what the extensions do!). To do that, click on Site Settings and then Change site name:

Our site should be ready, I named mine helloworldtutorial.netlify.com (you can test it, it says « Hello »). Of course, you’ll need to name it differently!

Our Extension is deployed and available online. The last step is to create a new .trex manifest so you can start sharing your extension to the world.

A new .trex to share

As you know, the .trex manifest is where you describe the extension and reference the URL of the application. If we want to share your extensions, we need to create a new .trex file, referencing our deployed application.

Create a new file, Tutorial.trex and copy-paste the code from Tutorial local.trex in it. Then, you just need to update the url field in source-location to the URL of the deployed application on Netlify. In my case https://helloworldtutorial.netlify.com/index.html:

To make sure it’s working, you can open Tableau and, on a dashboard, select your new Extensions, Tutorial.trex, everything should be working as with the local file.

Anyone who possesses the Tutorial.trex file is now able to use your Extensions.

Your application folder now contains two .trex files. That’s fine as you can use the local one to test the ongoing new features you develop and keep the other one to test the features deployed online.

You can finally push the new .trex file on GitHub so you’ll have a link to share with people (https://github.com/ladataviz/hello_world_extensions_tutorial)

Wrap up

I hope you found this tutorial helpful. Sorry for the mistakes! Don’t hesitate to add comments so I can improve it!

Tristan