Data visualization in interactive art is one of the best ways to convey information in a creative and meaningful manner. Let’s explore some data visualization techniques in TouchDesigner.
We live in a world of data. According to estimates, about 402.74 million terabytes of data are produced each day. How can we make the most of it? Through data visualization, of course.
Data visualization in interactive art: The Five C’s
Data visualization helps us find useful information in data. By using data visualization techniques, we can create meaningful experiences for our audience. To do so, as with everything in life, we need to follow some basic rules. That is why it is important to always keep in mind the Five C’s of data visualization:
- Capture: The first step is, of course, gathering the data and, most importantly, the data that is truly relevant to our project
- Clean: Not all data is good data. That’s why, when dealing with large datasets, it is crucial to clean out background noise
- Combine: Merging multiple datasets can help us uncover valuable insights and extract meaningful information for visualization purposes
- Calculate: Displaying information often requires performing calculations, so this is another cornerstone to keep in mind
- Control: Having control over the data means simplifying the final outputs to meet user needs, whether that’s an audience at a live installation or a demanding CEO
Sounds good? Let’s dive into interactive data visualization techniques in TouchDesigner.
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
Getting the Data
There are tons of freely available datasets out there. For our project, we will use statistics about the gender pay gap in the European Union*.
The goal of our visualization is to highlight the difference between the average gross hourly earnings of male and female employees, expressed as a percentage of male earnings. This will be our starting point.
In our TouchDesigner patch, create a Table DAT, load the .csv file, select the data we need, and apply calculations to fit the data into our visuals.
We use a bar chart template to display our data. The Y coordinates are derived from the .csv file and show the gap between male and female hourly earnings across the 27 EU countries.
To get the X coordinates, we create a Pattern CHOP using the Ramp type, set the length to 27, and adjust the range to fit the screen width. We then merge the X and Y Table DATs.
Drawing the Data
Let’s make visuals. Create a rectangle and instance the Geo COMP using the data from the Table DAT. We add the standard rendering operators – Render, Cam, and Light – and now we have the first basic part of our data visualization.
To make things more interesting, we can duplicate the visual workflow. Instead of instancing all the Table DAT rows, we randomly select a single row using an LFO CHOP + Select DAT and instance just that single data point. Then we composite the flows to make the visuals more dynamic.
Adding Interaction
Interactivity helps guide users to better understand information in a simple and effective way. That’s why we will add a basic interactive element to our visualization.
There are many ways to create interactions. In this case, we use a simple slider to highlight information about the gender pay gap in each EU country.
We create a Slider COMP, apply some math to adjust the range, and merge the result into a new Table DAT. The slider selects a single row and highlights the corresponding bar in the visualization. Additionally, we use two Text TOPs to display the country name and the gender pay gap percentage.
By moving the slider, we can explore the data in action. Of course, other interactive approaches could be implemented depending on the needs.
Wrap Up
We live in a complex world. That is why information is essential to help us understand what is happening around us. But information must be simple, clear and effective.
In this sense, data visualization can truly make a difference.
Maybe we cannot change things, but, at least, we can understand them.
*Source: Eurostat
