D3.js: Understanding Selections and Comparing with Vanilla JavaScript

Published on March 4, 2019
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.

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

Learn more about us

About the authors

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel