Intro

Data visualization can be fun! Especially if one steps outside the regular tool sets. In this example, I took concepts from game development and applied them to data visualization.

The Trace

One of the concepts present in game development is tracing. This basically works like this: A trace is issued in vector coordinates, let’s say from vector A to vector B. If, in the path from A to B, the trace hits an object, it will report back which object it hit, how many objects were hit, and much more.

As an example, in games when a projectile hits a character, it’s usually done via a trace that starts at the shooter’s location and is oriented towards the center of the screen (where the aim is—usually). Some ballistic calculations are also performed, but this is beyond the scope of this article.

In this example, I mischievously ‘hid’ collision objects behind the artwork. Another technique is to use those objects in plain sight but with totally transparent materials (with performance costs due to the shader calculations of transparency). After all, this is a Three.js scene with a locked camera.

Stylized map drawing Link

Moving on. Behind the artwork, there are collision objects. Once the trace hits that object and it’s detected, an EVENT can occur. Paired with data, for example, California: ‘Candidate A’, or Texas: ‘Candidate B’, a fun game of data visualization can be composed.

The little popup animations are hand-drawn (sprite art) and are triggered strategically based on the dataset.

This demo was created using Three.js, a JavaScript 3D library.

To Do

One day, I will find the time to implement more of these ideas.