In this chapter we will cover:
- Binding array as data
- Binding object literals as data
- Binding functions as data
- Working with arrays
- Filtering with data
- Sorting with data
- Loading data from server
In this chapter, we are going to explore the most essential question in any data visualization project, how data can be represented both in programming constructs, and its visual metaphor. Before we start on this topic, some discussion on what data visualization is is necessary. In order to understand what data visualization is, first we need to understand the difference between data and information.
Data are raw facts. The word raw indicates that the facts have not yet been processed to reveal their meaning...Information is the result of processing raw data to reveal its meaning.
(Rob P., S. Morris, and Coronel C. 2009)
This is how data and information are traditionally defined in the digital information world. However, data visualization provides a much richer interpretation of this definition since information is no longer the mere result of processed raw facts but rather a visual metaphor of the facts. As suggested by Manuel Lima in his Information Visualization Manifesto that design in the material world, where form is regarded to follow function.
The same data set can generate any number of visualizations which may lay equal claim in terms of its validity. In a sense, visualization is more about communicating the creator's insight into data than anything else. On a more provocative note, Card, McKinlay, and Shneiderman suggested that the practice of information visualization can be described as:
The use of computer-supported, interactive, visual representations of abstract data to amplify cognition.
(Card S. & Mackinly J. and Shneiderman B. 1999)
In the following sections, we will explore various techniques D3 provides to bridge the data with the visual domain. It is the very first step we need to take before we can create a cognition amplifier with our data.
The task of matching each datum with its visual representation, for example, drawing a single bar for every data point you have in your data set, updating the bars when the data points change, and then eventually removing the bars when certain data points no longer exist, seems to be a complicated and tedious task. This is precisely why D3 was designed to provide an ingenious way of simplifying the implementation of this connection. This way of defining the connection between data and its visual representation is usually referred to as the enter-update-exit pattern in D3. This pattern is profoundly different from the typical imperative method most developers are familiar with. However, the understanding of this pattern is crucial to your effectiveness with D3 library, and therefore, in this section, we will focus on explaining the concept behind this pattern. First, let's take a look at the following conceptual illustration of the two domains:
Data and Visual Set
In the previous illustration, the two circles represent two joined sets. Set A depicts your data set while set B represents the visual elements. This is essentially how D3 sees the connection between your data and visual elements. You might be asking how elementary set theory is going to help your data visualization effort here. Let me explain.
Firstly, let us consider the question, how can I find all visual elements that currently represent its corresponding data point? The answer is A∩B; this denotes the intersection of sets A and B, the elements that exist in both Data and Visual domains.
Update Mode
The shaded area represents the intersection between the two sets—A and B. In D3, the selection.data function can be used to select this intersection—A∩B.
The selection.data(data) function, on a selection, sets up the connection between the data domain and visual domain as we discussed above. The initial selection forms the visual set B while the data provided in the data function forms the data set A respectively. The return result of this function is a new selection (a data-bound selection) of all elements existing in this intersection. Now, you can invoke the modifier function on this new selection to update all the existing elements. This mode of selection is usually referred to as the Update mode.
The second question we need to answer here is how can I locate data that has not yet been visualized. The answer is the set difference of A and B, denoted as AB, or visually, the following illustration:
Enter Mode
The shaded area in set A represents the data points that have not yet been visualized. In order to gain access to this AB subset, the following functions need to be performed on a data-bound D3 selection (a selection returned by the data function).
The selection.data(data).enter() function returns a new selection representing the AB subset, which contains all the data that has not yet been represented in the visual domain. The regular modifier function can then be chained to this new selection method to create new visual elements representing the given data elements. This mode of selection is simply referred to as the Enter mode.
The last case in our discussion covers the visual elements that exist in our data set but no longer have any corresponding data element associated with them. You might ask how this kind of visual element can exist in the first place. This is usually caused by removing the elements from the data set. If you initially visualized all data elements within your data set, after that you have removed some data elements. Now, you have certain visual elements that are no longer representing any valid data point in your data set. This subset can be discovered by using an inverse of the Update difference, denoted as BA.
Exit Mode
The shaded area in the previous illustration represents the difference we discussed here. The subset can be selected using the selection.exit function on a data-bound selection.
The selection.data(data).exit function, when invoked on a data-bound D3 selection, computes a new selection which contains all visual elements that are no longer associated with any valid data element. As a valid D3 selection object, the modifier function can then be chained to this selection to update and remove these visual elements that are no longer needed as part of our visualization. This mode of selection is called the Exit mode.
Together, the three different selection modes cover all possible cases of interaction between the data and visual domain. The enter-update-exit pattern is the cornerstone of any D3-driven visualization. In the following recipes of this chapter, we will cover the topics on how these selection methods can be utilized to generate data-driven visual elements efficiently and easily.