Data Visualization with Python

Data is everywhere, so let’s have fun and code some cool data visualization with Python in TouchDesigner. Let’s see how.

If you’re not a programmer, coding can be intimidating at first. I do not have a formal background in computer science myself, so when I started approaching programming I felt lost. But compared to many other languages, Python offers a wonderfully welcoming entry point into coding.

Why? Because its syntax is simple and clear, it comes with tons of ready-to-use libraries and it is very easy to read. Most of all, Python provides a perfect tool for data manipulation. We can use Python to get data, analyze it and use it in TouchDesigner for creative purposes. So let’s start having fun.

Data Visualization with Python: Data we Need

Almost a year ago, I relocated to Barcelona, Spain. Since I love taking naps under trees, I wanted to find out which districts in Barcelona have the most trees to choose from. To fulfill this goal, I am going to build a data visualization example. First, I want to draw a map of all the districts of Barcelona.

Luckily for us, we can take advantage of an open project where we can download a GeoJSON city map. So, we create a Text DAT and write this simple script:

(Remember to change the file path)

Let’s analyze it.

First, we load the JSON library. Then, we load the JSON file, create a Table DAT, and fill it with data. To do this, we write a for loop that iterates through all the entries in the JSON and parses them into columns.

The next step is converting the DAT table to a CHOP, split the channels, finding the minimum and maximum values for each channel, applying some math and merge the channels. Then we convert data to visuals via the Limit SOP and render it.

We can use the Add SOP as well by referencing the Table DAT without the CHOP conversion

Adding Trees

Now that we have our map of Barcelona, we want to populate it with trees. Luckily, we can rely on an official repository from the Barcelona City generalitat (city council) that provides data on the number of green areas across the city’s districts*.

Let’s create another Text DAT and write a simple script:

Remember to download libraries in case they are not installed

Let’s analyze it.

We load the JSON file, filter the results to keep only the data we need – such as district name, latitude, and longitude – and then populate a table with the filtered data. Then we split columns, apply some math, merge data and instance them in the GEO COMP.

Adding Captions

Captions can help us better understand the information, so let’s add them in our Python data visualization. To do so, let’s add another Text DAT.

Let’s analyze it.

First, we reference the previous table and create a new Table DAT. We add headers and rows and initialize a list. Then, using a for loop, we check the list length and if all variables are included, create a row for each district by summing the data. The result is a table that aggregates all the values.

What is next? We take data and apply some math to match the screen resolution, manually create x and y coords of our rectangle SOP and instance data into the Geo COMP.

Adding Text

Text can help us better understand information. That is why we add a block of Text TOPs to display the names of the districts, from the greenest to the least green. Next, we composite all our visual layers and voilà, our beautiful data visualization is complete!

Sadly, it turns out that the district I live in is the least green one. But I would not lose heart: with the subway, I can reach the greenest district in just ten minutes for my much-desired nap.

Wrap Up

Python is an incredibly powerful tool for data visualization in TouchDesigner, unlocking nearly endless possibilities. Its clarity makes it possible to achieve complex results with just a few lines of code. As always, the sky is the limit.

* Parks are not included

Download the patch