Data Joins/Binding

Learn about data joins and the methods used for data joining.

We'll cover the following

Introduction

Data joining is a fundamental concept in D3.js, and it allows us to bind the data of an array with each element, HTML or SVG (we will cover it in the next chapter) selection.

It binds data with selection elements and makes the manipulation of elements based on data much easier. We will use data binding throughout the course to draw different visualizations.

There are two methods that are used to bind data to a D3 selection which are explained below:

datum()

Let’s explore the first method. The datum() method joins data points with a single D3 selection. See the following example for a better understanding.

Get hands-on with 1200+ tech skills courses.