1. NodeBox 3
    1. Homepage
    2. NodeBox 3Node-based app for generative design and data visualization
    3. NodeBox OpenGLHardware-accelerated cross-platform graphics library
    4. NodeBox 1Generate 2D visuals using Python code (Mac OS X only)
  2. Gallery
  3. Download
  4. Documentation
  5. Forum
  6. Blog

Creating Data Visualizations

First things first.

Before starting this section you should:

Random numbers.

Nodebox can be used to create data visuals. We will go over a few principles but let’s first visualize a set of random numbers.

data random numbers step 1

Let’s clean this up a bit with some extra nodes.

data random numbers step 2

The cost.

Following data was found online and stores a few macro economic figures and their explanation. We will do a similar example as above. You can have a look at the data or download a clean version of it here.

So far for the data itself. Now let’s create a similar shape as before to map the data on.

Try implementing color to the network.

the cost


They way data is represented can differ. In stead of using a line we will go over a procedure for an ellipse. Download this earthquakes data file.

The result so far is all information as text on top of each other. Next procedure will build the template to be used as points to translate all these different textpaths on.

Now we need a few transformation nodes to connect this data to the actual data.

earthquakes step 1

Have a look at the csv file and notice that it has a lot of columns. Let’s add the depth and magnitude to it.

You can change the second value of the divide node to make the rectangles longer.

earthquakes step 2

Now we need the location of the rect we’ve been using to visualize the depth parameter. It can be retrieved from divide2 which we used to give rect1 a height.

earthquakes step 3

Give it color by adding some color nodes and colorize nodes.

earthquakes final

Random pie.

Nodebox allows you to create subnetworks. You should read the subnetworks page if it doesn’t ring a bell.

Below we will have a look at a similar principle as in the first example except that we will visualize the numbers in a piechart. The construction of it will use a subnetwork.

Let’s start by creating a set of numbers. I want to be able to increase the amount of numbers in a seperate node.

Now for the pie. We will make a pie by using a arc node which has a few interesting parameters. The idea is to create a network that takes an increasing slice of the random numbers list to make a sum of them. This will go to the *Start Angle** parameter of the arc node. The degrees of the arc will be retrieved from our convert_range node.

This is how the subnetwork and all its published port looks:

pie subnet

Go back to the root network and

pie subnet

You can change the number of slices by changing numbers1.

Below is a pie in pie chart. This involves creating another subnet of the previous pie so it can be repeated for multiple sets of random numbers.

pie in pie

A zipmap example.

The zipmap node is an interesting node to have a separate example for it. Following datafile shows a selection of most used words on each Metallica-album. It was made using Textalyzer. Download it.

Now we will place them on a circle.

zipmap step1

In the second section we will create a set of points based on the number of albums. Note that the datafile points to the year in which the album was released. We will than decide that word from one album all go to the same point and that for each word.

The idea is to generate a number of points. We will do this be using a rect node connected to a scatter node.

The viewer pane will reveal only the same set of points but if you switch to data view you will see that each point has multiple points behind it (at the same location).

We will glue these two together.

zipmap step3

More zipmaps allow you to do more complex things:

zipmap step4