TheBasicsyouneedtoknowwithd3
JavaScript

[Tutorial] The basics you need to know with d3 js

Introduction

In this article, we will see what are the basics you need to know for starting with d3 js. d3 js is a JavaScript library for manipulating what you want with data. You can create SVG with javascript methods. Honestly, it’s not easy to understand. Hope this helps. Let’s start with the select() method.

d3.select() and d3.selectAll()

The most basics in d3 js are select() and selectAll() are both essentials methods to manipulate SVG with d3 js. You would like to use these to select a node in your HTML. Let’s see an example with select(), first.

<html>
    <body>

    </body>
</html>
const body = d3.select("body");
console.log(body);

In this example, we just select the body node to manipulate it with d3 methods (we will see in this article in the next sections).

If you have to select multiple nodes, you can use selectAll() :

<html>
    <body>
      <a></a>
      <a></a>
    </body>
</html>
const a = d3.selectAll("a");
console.log(a);

It’s very important to understand select() and selectAll() because we will use these everywhere.

d3.enter(), d3.data() and d3.append()

The data method will be used to iterate on data (array) to append HTML nodes.

Imagine you have an array with 5 numbers and you would like to add 5 <li> for each value :

<html>
    <body>
      <a></a>
      <a></a>
      <ul></ul>
    </body>
</html>
const myNumbers = [12,50,2,13,125];
d3.select("ul")
  .selectAll("li")
  .data(myNumbers)
  .enter()
  .append("li");

You have to select the node ul to append li on it. After that, you would like to selectAll(“li”). data(myNumbers) is like a “foreach”, like a loop on your array. enter() is required here, because you use selectAll(“li”) but <li> aren’t here, yet. append(“li”) is used to create li nodes.

d3.text()

The text() method is used to append text in the nodes. If you would like to add texts for each <li>, you will write something like this :

<html>
    <body>
      <a></a>
      <a></a>
      <ul></ul>
    </body>
</html>
const myNumbers = [12,50,2,13,125];
d3.select("ul")
  .selectAll("li")
  .data(myNumbers)
  .enter()
  .append("li")
  .text("Examples");

It’s cool but not very efficient, maybe you would like to show values in your array. You can use a function in your text method.

<html>
    <body>
      <a></a>
      <a></a>
      <ul></ul>
    </body>
</html>
const myNumbers = [12,50,2,13,125];
d3.select("ul")
  .selectAll("li")
  .data(myNumbers)
  .enter()
  .append("li")
  .text((d) => d);

d3.attr()

attr method is the best toolkit to add attributes you want on your nodes.

Some examples of attributes you can add :

  • classes
  • height
  • width
  • fill (for SVG)
  • stroke (for SVG)
<html>
    <body>
      <a></a>
      <a></a>
      <ul></ul>
    </body>
</html>
const myNumbers = [12,50,2,13,125];
d3.select("ul")
  .selectAll("li")
  .data(myNumbers)
  .enter()
  .append("li")
  .text((d) => d)
  .attr("class","myClass");

As text(), you can use attr() with anonymous function in argument.

d3.style()

style() is used to add or set style in your nodes.

<html>
    <body>
      <a></a>
      <a></a>
      <ul></ul>
    </body>
</html>
const myNumbers = [12,50,2,13,125];
d3.select("ul")
  .selectAll("li")
  .data(myNumbers)
  .enter()
  .append("li")
  .text((d) => d)
  .attr("class","myClass")
  .style("color",(d)=>{
    return d > 20 ? "red" : "blue"; 
  });

It’s over for this article on d3.js, you can see this codepen to show all the code : https://codepen.io/pierre_terrat/pen/BaKReKG

I hope this article helps you with your start with d3 js. If you would like to go deeper, you can see this article: http://pierreterrat.com/tutorial-how-to-create-a-bar-chart-using-d3-js/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *