Saturday, December 28, 2013

The Power of Visualisation

Let us first quote Wikepedia verbatim:
'The adage "A picture is worth a thousand words" refers to the notion that a complex idea can be conveyed with just a single still image. It also aptly characterizes one of the main goals of visualization, namely making it possible to absorb large amounts of data quickly.'
Now let us make some slight amendments:
  • append 'or dynamic interactive images' to the first sentence.
  • append 'or grasp complex notions almost instantly' to the last sentence.
You then have the updated definition of the power of visualization. There is nothing conceptually new here, of course.
Charles Minard made his famous flow chart of Napoleon's disastrous Russian campaign in 1869 (see below). In a sweeping look, you can see the number of men as the armies advance, the main cities on their path, the rivers they go through, and the dates and the deadly temperature on they way back, all at once.

It is proof of how the potential of visualisation was already understood as far back as in the 19th century. Incidentally, this map is a also a memorable representation of the abyss leadership's hubris can lead to.

Another pioneer of visualisation is Florence Nightingale. Her famous 'Diagram of the causes of mortality in the armies in the East' (see below), published in 1858, is an example of the graphical representation she would use with members of the British Parliament, who were most unlikely to read a traditional statistical report.

It indeed clear to anybody who thinks about it for a second that the human brain has evolved to remarkable speed and accuracy when it comes to absorbing visual information.

Take a look at the images below.

Whatever your 'math level', isn't it surprising how much faster you could read the facial expressions ? While surely the simple arithmetic involved in the integer multiplication shown is quite a few orders of magnitude less complex a task. Despite this, wasn't reading the face completely effortless ? Whereas the multiplication required at least some concentration (12x7=84) ?

It seems obvious that reading other people's expressions well and fast has been a key factor to survival, for as long as humans have existed (and they inherited this ability from their ancestors), while it is hard to imagine a situation where mental calculation speed is a life of death matter. Additionally people at large have been literate on a large scale for maybe only a few hundred years. 

I believe this is one of the instances where we perform the tasks at hand using what Nobel prize winner Daniel Kahneman calls our 2 systems.
  • System 1: Fast thinking, intuition, automatic, frequent, emotional, stereotypic, subconscious.
  • System 2: Slow thinking, effortful, infrequent, logical, calculating, conscious.
These 2 systems are radically different and probably correspond to different parts of the brain. I suspect System 2 operates in the cortex while System 1 is located in the inner animal layers of the  brain.
He develops this concept in his popular book 'Thinking Fast and Slow'.

At least, this basic experiment should make it definitively clear that humans' cognitive abilities must be understood on a 'per channel' basis, and that the vision system (i.e. the eyes and image processing that comes with it) is a very impressive such channel.

From there, anybody trying to convey a message to other people should devote a lot of attention to the images and films they use. Naturally this is no news and since the dawn of the mass media age, marketers and politicians, often working hand in hand, have refined this art to a science.

Even in disciplines less concerned with power, an effort of synthesis will usually culminate in a graphical representation. As an example, the periodic table (published by Dmitri Mendeleev in 1869 - notice it is the same date as Charles Minard's chart) is an attempt to organize all atoms in a 2D array on the basis of their atomic numbers, electron configuration and chemical properties (see below).

Let us fast forward.
Enter web technologies.

Today, with the digitisation of about everything, the data available is massive. It is both overwhelming and easily accessible, and the tools to shape it into something digestible (through the eyes :-) are powerful and free.
So it has become possible for even an average person to gather data about a topic, analyse it, create and distribute a synthesis/visualisation.

About the tools, the browser has become the instrument of choice for data visualisation and publication. There are many powerful javascript libraries, the most famous, ubiquitous probably being d3.js.
The press is adapting to this change and the New York Times (the creator of d3.js happens to work for them) regularly publishes interesting graphical reports, for instance:
A list of interesting d3.js powered graphical representations is here.

Now to the point of this brief post.
Data visualisation techniques has  primarily been used to make meaningful syntheses out of large amounts of data. But it can also be can also be taken advantage of to introduce sophisticated concepts, and as such is a powerful tool in education. It is particularly useful in the introductory stage of a difficult notion. Indeed, a dynamic, possibly interactive visual representation of a notion/concept is usually fun to watch/manipulate, requires no effort whatsoever on the part of the viewer/participant. In addition there also still a touch of novelty/coolness about a 'dataviz', because as efficient it has always been and as easy to make it has become, they are not entirely that common. Which is another reason why people can interested.

With this in mind, below are 2 graphical representations of not so trivial concepts.
These graphical representations are clearly not enough to master of these concepts rigorously, but I think can greatly ease the path to in-depth understanding through a first visual representation of the ideas involved.

Miniature (60%) previews are visible below.
Click on the links for the full sized pages.
The code and the references are in github repos: Bezier CurvesDFT

In short, Beziers curves are parametric curves invented by Pierre Bezier at Renault, and Paul De Casteljau, in the 1960's, in order to efficiently describe complex free form shapes and accurately communicate between designers/engineers and manufacturers. This was a major issue in the automobile and aircraft industries at the time. Today Bezier curves are everywhere in graphics software.

In short, the Discrete Fourier Transform (DFT) of a time series maps it to the the frequency space and the inverse (IDFT) transformation brings back the original signal. Each time series has a unique representation in the frequency space, from which the time series can be reconstructed.
The DFT and IDFT are respectively: \( X_k = \sum_{n=0}^{N-1} x_n \cdot e^{(-2 \pi i\, k\, n) / N} \) and \(x_n = \frac{1}{N} \sum_{k=0}^{N-1} X_k \cdot e^{(2 \pi i\, k\, n) / N}\)
The animation is designed to help understand how a sum of monofrequency signals, represented by complex \(e^{2 i \pi f n}\), can approximate an arbitrary given time series, based on a few typical examples. The complex exponentials are projected to the real axis (vertical) to obtain the time series.