Update History:

- 2017-02-03 /First draft/

### Good Viz Way: Using a D3 Voronoi grid to improve a chart’s interactive experience

Welcome to the Viz Reflection series, this is the issue 3, today what I am talking about is a classic viz method called Voronoi diagram.

First, let’s see what is Voronoi diagram:

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. The Voronoi diagram of a set of points is dual to its Delaunay triangulation.

It is named after Georgy Voronoi, and is also called a Voronoi tessellation, a Voronoi decomposition, a Voronoi partition, or a Dirichlet tessellation (after Peter Gustav Lejeune Dirichlet). Voronoi diagrams have practical and theoretical applications to a large number of fields, mainly in science and technology but also including visual art.[1][2] They are also known as Thiessen polygons.[3][4][5]

*Source: https://en.wikipedia.org/wiki/Voronoi_diagram?oldformat=true*

Let’s see how it works on this case:

Ok, let’s come back to the blog, Nadieh Bremer, the maker of this viz, taken a data set from the Worldbank database, which contains the total GDP & GDP per capita (current US $) and the life expectancy at birth for all countries in the World. With two version of visualization, we can easily found the advantages of the Voronoi, and what’s the different between them, with the Voronoi, there is no empty area left, every pixel can towards to a element to show the results.

So, let’s go review the different of the two viz ways:

As you can see, **Left:** Without Voronoi grid, you can choose the element only when you move the mouse cursor on the element. **Right:** With Voronoi grid, when the cursor in the range of the current element voronoi grid, current element show the result. With the `d3.geom.voronoi()`

, we can design a graph more easily on interaction.

There is another example of the Voronoi diagram from a paper focus on the analyzing the urban region transport. From the paper the author told us they choose the voronoi diagram to partition the city into many anomaly cells but not the size grids because the Voronoi diagram can reflect out the real city road network which are often distributed unevenly [1].

**Resource:**

https://www.wikiwand.com/en/Voronoi_diagram

http://www.visualcinnamon.com/2015/07/voronoi.html

[1] Y. Ding, Y. Li, K. Deng, H. Tan, M. Yuan, and L. M. Ni, “Detecting and Analyzing Urban Regions with High Impact of Weather Change on Transport,” IEEE Transactions on Big Data, vol. PP, no. 99, pp. 1–1, 2016.