Joining Data

In this lesson, we are going to learn about a process called joining data. We have been focused on working with elements. Now it is time to introduce data into the mix.

What is data in D3?

When you hear the word “data”, what do you think it means? Data, to D3, is text and numbers. Data by itself can not do anything. There needs to be an additional tool for displaying data to a reader. That is where D3 comes into play. Data visualization can be broken down into two pieces. There is the data itself, which can be text or number-based. For example, the number of dog owners in a city or the income of family households.

The second piece of data visualization is the visual part. In our case, this would be the HTML and CSS. The average reader can’t understand raw data or understand HTML and CSS. We need a way to connect our data with our HTML. D3 is a library that bridges this gap. It makes it easy to combine data and the visual.

Joining data overview

The process of associating a piece of data with an element is known as joining data.
D3 makes it very easy to join data. It is able to handle large amounts of data efficiently.

Let’s say we had an array of data. In the array, there are a total of five items. In our document, there can be five <p> elements. Neither the array nor the elements are connected.