Apprenez D3.js en 5 minutes

Une introduction à la création de représentations visuelles de vos données

D3.js est une bibliothèque JavaScript utilisée pour manipuler des documents basés sur des données. Il utilise HTML, CSS et SVG pour créer des représentations visuelles des données qui peuvent être visualisées sur n'importe quel navigateur moderne.

Il fournit également des fonctionnalités impressionnantes pour les interactions et les animations.

Dans ce tutoriel, nous explorerons les concepts de base et les fonctionnalités de D3.js. Nous apprendrons comment l'utiliser à l'aide de quelques exemples tels que le rendu d'un graphique à barres, le rendu d'éléments HTML et SVG et leur application de transformations et d'événements.

Nous avons également créé un cours gratuit en 10 parties sur D3.js sur Scrimba. Vérifiez le ici.

Premiers pas avec D3

Comme D3.js est une bibliothèque JavaScript, vous pouvez simplement l'inclure dans votre fichier HTML à l'intérieur d'une balise de script.

La source complète et les tests sont également disponibles en téléchargement sur GitHub.

Sélection DOM

En utilisant D3.js, nous pouvons manipuler le modèle d'objet de document (DOM), ce qui signifie que nous pouvons sélectionner des éléments et leur appliquer diverses transformations.

Commençons par un exemple simple, où nous utiliserons D3 pour sélectionner et modifier la couleur et la taille de la police d'une balise de titre.

 Learn D3 in 5 minutes

Today is a beautiful day!!

d3.select('h3').style('color', 'darkblue'); d3.select('h3').style('font-size', '24px');

Donc, nous enchaînons simplement la select()méthode sur l' d3objet, puis nous effectuons un suivi style(). Le premier paramètre dicte ce que nous voulons changer et le second donne la valeur. Voici le résultat:

Liaison de données

Le prochain concept que vous devrez apprendre est la liaison de données, car c'est l'une des fonctionnalités les plus intéressantes de D3. En l'utilisant, nous pouvons peupler ou manipuler des éléments DOM en temps réel.

Dans notre HTML, nous avons une simple liste non ordonnée <ul>:

    Nous voulons créer les éléments de liste à l'aide d'un objet de données. Voici le code pour faire exactement cela:

     var fruits = ['apple', 'mango', 'banana', 'orange']; d3.select('ul') .selectAll('li') .data(fruits) .enter() .append('li') .text(function(d) { return d; });

    Dans notre code JavaScript ci-dessus, D3 sélectionne d'abord <ul> an d any

  • INSI éléments de it using de elect() andméthodes de selectAll (). Cela peut sembler un peu étrange que nous soyons en train de sélectionner letous les éléments li avant de les créer, mais c'est comme ça que D3 fonctionne.

    Nous transmettons ensuite les données avec la data()méthode et ajoutons enter(), ce qui fonctionne un peu comme une boucle. Tout après ce point sera exécuté une fois par élément du fruitstableau.

    En d'autres termes, il ajoute ensuite un <li> pour chaque élément des données. Pour every

  • Original text


  • tag, il ajoute également du texte à l'intérieur de t usinla méthode text (). Le eparamètre d inside la fonction de rappel text () fait référence à l'élément du tableau à l' itération donnée (apple, mang o, etc.).

    Voici donc notre résultat final:

    Création d'éléments SVG

    Scalable Vector Graphics (SVG) est un moyen de rendre des éléments graphiques et des images dans le DOM. Comme SVG est basé sur des vecteurs, il est à la fois léger et évolutif. D3 utilise SVG pour créer tous ses visuels, et c'est donc un élément de base de la bibliothèque.

    Ici, dans l'exemple ci-dessous, un rectangle est dessiné à l'aide de D3 dans un conteneur SVG.

    //Select SVG elementvar svg = d3.select('svg');
    //Create rectangle element inside SVGsvg.append('rect') .attr('x', 50) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'green');

    Dans ce code, D3 rend un élément rectangle à l'intérieur du DOM. Il sélectionne d'abord l'élément SVG, puis rend un élément rectangle à l'intérieur. Il définit également les coordonnées x et y du rectangle ainsi que ses propriétés de largeur, de hauteur et de remplissage à l'aide de la attr()méthode.

    Créer un graphique à barres

    D3 nous permet également de créer de nombreux types de tableaux et de graphiques pour représenter les données de manière efficace. Dans l'exemple ci-dessous, nous créons un graphique à barres simple à l'aide de D3.

    Commençons par créer une balise SVG directement dans notre HTML.

    Ensuite, nous écrirons le JavaScript dont nous avons besoin pour rendre le graphique à barres dans notre vg> tag:

    var data = [80, 120, 60, 150, 200];
    var barHeight = 20;
    var bar = d3.select('svg') .selectAll('rect') .data(data) .enter() .append('rect') .attr('width', function(d) { return d; }) .attr('height', barHeight - 1) .attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

    In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.

    After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.

    For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.

    We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.

    Here’s the result:

    Event Handling

    Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.

    d3.select('#btn') .on('click', function () { d3.select('body') .append('h3') .text('Today is a beautiful day!!'); });

    So when we click the button, the text below appears:

    Conclusion

    D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.

    There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

    Thank you :)

    I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)