Voronoi Diagrams and Heatmaps

In this chapter, we're going to look at two final diagrams. We're going to explore what is possible with the Voronoi support provided by D3, and we're going to create a heatmap diagram. To explore these two subjects, we'll create the following visualizations:

• We're going to start with a simple Voronoi diagram so we can better understand what a Voronoi is and what we can use it for.
• Next, we're going to create a Voronoi diagram of all the airport locations in the world to explore the aesthetic aspects of Voronois.
• We can also use Voronois to create very interesting-looking visualizations of random data. We'll use the approach we've seen in the previous two chapters to create a Voronoi fractal.
• Finally, we're going to create a heatmap that visualizes the usage of swearwords in movies.

We start by exploring Voronois. Before we start, though...

Simple Voronoi diagram

When we talk about Voronoi diagrams, it is good to start with understanding what a Voronoi diagram is. Wikipedia provides a nice short explanation of this:

In mathematics, a Voronoi diagram is a partitioning of a plane into regions based on distance to points in a specific subset of the plane. That set of points (called seeds, sites, or generators) is specified beforehand, and for each seed there is a corresponding region consisting of all points closer to that seed than to any other. These regions are called Voronoi cells.

In other words, we define a set of points on a 2D surface (for example, the screen), and the Voronoi diagram divides the surfaces into cells based on their distance to each of the points. It's easiest to understand by looking at an example. Say we've got the following set of random points:

The resulting Voronoi diagram looks like this:

As you can see, the rectangle...

Voronoi based on a list of airports

In this section, we're going to create a Voronoi diagram based on geographical data. We'll use a list of all the airports in the world, and use their locations to create a Voronoi diagram. We can create maps using this approach that look like this:

You can still see the general shape of the continents, even though we did not plot any geographic data. The first thing to do is get the data and sanitize it.

Prepare the data

We first download the list of airports from http://ourairports.com/data/airports.csv. This list contains information on all the airports and groups them by size. The data in this file looks like this:

"id","ident","type","name","latitude_deg","longitude_deg...

Generative art with nested Voronoi diagrams

Besides using Voronoi diagrams based on real data, we can also make a Voronoi of random data, like we did in the beginning of this chapter. Using this approach, we saw that you can quickly create nice-looking diagrams. In this section, we'll go one step further and create additional Voronoi diagrams inside the cells of an existing Voronoi diagram. If we do this a couple of times, we get a nice nested Voronoi diagram:

What you can see here is that each Voronoi cell itself is divided into more Voronoi cells, and these smaller cells themselves are divided once again. The result is a very nice-looking nested diagram.

In this section, we'll walk through the code to create this diagram.

Set up the Voronoi

The first...

Heatmap showing swearword usage in movies

For this last example, we're going to create a heatmap that shows how often swear words are used in movies. We're going to create a heatmap that looks like this:

In this figure, the colors show how often someone swears in that specific part of the movie. For this example, the movie is divided into 30 second segments. The numbers at the left side show how far in the movie we are, and the legend at the bottom shows the color coding used.

The first thing we need, though, is some data to visualize.

Preparing the data

The easiest way to determine the amount of swearing in a movie is by analyzing the subtitles. For most popular movies, you can download a subtitle file (in .srt format), which shows the time of a specific...

Summary

In this chapter, we've looked at two final visualization forms. We've shown how to create Voronoi diagrams and how to create heatmaps. We didn't go into the practical applications of Voronoi diagrams, but mostly looked at the aesthetic aspects of Voronoi diagrams. We created random Voronoi diagrams, map-based Voronoi diagrams using real-world data, and ended with a recursive Voronoi diagram. For the second part of this chapter, we showed you how you can create a heatmap that showed the amount of swearing in a movie. We showed you an approach to creating these kinds of maps that can also easily be applied to different kinds of data sets.

With this chapter, we're finished with the most important visualizations and parts of the D3 API. In the next chapter, we're going to look at how you can use some of the D3 APIs and other external tools to create, load, and manipulate some basic shapes...