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
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:
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
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!
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