// Tutorial //

D3.js: Understanding Selections and Comparing with Vanilla JavaScript

Published on March 4, 2019
Default avatar
By PaulHalliday
Developer and author at DigitalOcean.
D3.js: Understanding Selections and Comparing with Vanilla JavaScript

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.

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">
    <title>D3: Selections</title>
    <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>

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

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.


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.`));


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');

_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.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here

About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!