Tutorial

D3.js: Understanding Selections and Comparing with Vanilla JavaScript

Published on March 4, 2019

JavaScript

D3.js: Understanding Selections and Comparing with Vanilla JavaScript

This article aims to show how selections work within D3. We’ll start with a basic project that includes d3.js as a script with no build system:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>D3: Selections</title>
  </head>
  <body>
    <div class="about-me">
      <p>Hi! My name is Paul and here's some facts about me.</p>
      <ul id="list">
        <li>I'm a powerlifter</li>
        <li>I'm studying MSc Data Science</li>
        <li>I love D3.js!</li>
      </ul>
    </div>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Consider how we may make selections and modify DOM elements without D3:

const listItems = [...document.getElementsByTagName('li')];

listItems.map(item => item.style.setProperty('font-weight', 'bold'));

vanilla JavaScript DOM selection

While this isn’t very complex right now, we can expect that things will get harder and more difficult to reason as we scale. Here’s why we need to consider D3.

Selections in D3

Notice how when we wanted to manipulate multiple elements in the DOM we had to map over them. D3 selections allow us to query one or more elements on the page and allows us to manipulate the whole selection without the need for iteration on our part.

It uses standard CSS selector syntax, so you can expect to query an element by it’s name, a class with .about-me, an id with #list, and so on.

We can select elements from the DOM with either:

select() takes one element from the DOM. If there are multiple matches, only the first one will be taken.
selectAll() takes all elements from the DOM.

Example

Let’s take a look at this with a code example. Doing the same as our vanilla JavaScript example can be done in one line:

const li = d3.selectAll('li').style('font-weight', 'bold');

As you can see, it returns a collection of elements which we can chain into other methods such as style.

If we change this to be select instead of selectAll, you’ll notice that I'm a powerlifter is the only li that gets bolded – this is expected as it’s the first li in the DOM.

Appending a new list item

To further show the power of selections, consider how we may want to add a new li to the DOM with JavaScript:

const ul = document.getElementsByTagName('ul')[0];

const newItem = document.createElement('li');

newItem.appendChild(document.createTextNode(`I'm learning about selections.`));

ul.appendChild(newItem);

Screenshot: Appending an element

Once again, this isn’t exactly the best workflow when we’re looking to create complex data visualizations. Let’s look at the same example with D3:

const ul = d3.select('ul');

ul.append('li').text(`I'm learning about selections`);

Much easier! Each function returns the updated value of the previous change or query, allowing us to chain methods together in a powerful way.

Sub Selections

We’re also able to select items within our selection. Let’s take a look at this by selecting the first li from within our ul selection and making it red:

const ul = d3.select('ul');

ul.select('li').style('color', 'red');

ul.append('li').text(`I'm learning about selections`);

As you can see, we’re not just limited to the initial selection. We can continue to make sub selections and get more specific about our implementation.

What do Selections Look Like?

Let’s use console.log to inspect our select query to look at what gets returned:

{
  _groups: [Array(1)]
  _parents: [html]
}

If we expand _groups, you’ll see that it returns our ul as per the selection. If we changed our selection to be selectAll('li'), the _groups returns an Array containing a collection of lis inside of a NodeList(3).

const li = d3.selectAll('li');

console.log(li);

_groups: Array(1)
  0: NodeList(3)
    0: li
    1: li
    2: li
_parents: [html]

Naturally, the _parents object contains the parent for this selection, being the root html object.

And that’s it for now! Stay tuned for more about using D3.js.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors

PaulHalliday

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.