D3JS - Premiers Pas

Les formes de base, le style et le chargement de données

Dernière mise à jour le 04/07/2018

Les formes de base

Dans ce premier tutoriel, nous allons prendre en main la librairie D3JS au travers de quelques exemples simples. Voici la trame de base d'un fichier HTML permettant d'utiliser la librairie D3JS dans sa version 4.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="https://d3js.org/d3.v5.js"></script>
		<style type="text/css">
			#svg1 {
				height: 75px;
			}
		</style>
	</head>
 
	<body>
		<div id="svg1"></div>
	</body>
</html>
<script type="text/javascript">
	// Notre code viendra ici
</script>

D3JS est particulièrement fort pour manipuler du SVG. Ainsi il est très facile de créer un rectangle. On commence par sélectionner le DIV dans lequel on va créer notre SVG en utilisant son ID :

var svg = d3.select("#svg1").append("svg");

Il faut bien sûr que cet ID soit déclaré dans la page. Ensuite, nous ajoutons l'objet rect à ce SVG. Nous le positionnons de manière relative par les attributs x et y exprimés en pixels. Une des propriétée de D3JS est que chaque fonction retourne l'objet qui l'a exécuté, ce qui permet d'enchainer les appels de méthodes (method chaining pattern en anglais). On en profite pour définir la largeur et la hauteur de notre rectangle.

svg.append("rect")
	.attr("x",20)
	.attr("y",20)
	.attr("width",200)
	.attr("height",50);

Ce qui nous donne ce superbe rectangle noir :

Pourquoi ne pas s'amuser un peu en utilisant une boucle pour créer plusieurs rectangles de dimensions variables. Nous allons pour cela utiliser la balise G pour grouper nos rectangle

svg = d3.select("#svg2").append("svg");
	var group = svg.append("g");
	for (var i = 0; i < 3; ++i) {
		group.append("rect")
			.attr("x",20 + 100 * i)
			.attr("y",20)
			.attr("width",10 + 10 * i)
			.attr("height",50)
			.style("fill", "lightgrey")
			.style("stroke","black")
			.style("stroke-width","3");
	}

Nous voyons aussi qu'il est possible de modifier le style par défaut de la même façon que nous avons créé notre rectangle.
Notons également que nous aurions pu directement écrire dans notre DOM le code HTML suivant pour obtenir le premier rectangle :

<svg width="200" height="50">
	<rect x="20" y="20" width="200" height="50" fill="black" />
</svg>

Il existe par ailleurs d'autres formes basiques :

svg.append("circle")
	.attr("cx",150)
	.attr("cy",50)
	.attr("r",30);
svg.append("ellipse")
	.attr("cx",150)
	.attr("cy",50)
	.attr("rx",30)
	.attr("ry",20);
svg.append("line")
	.attr("x1",150)
	.attr("y1",50)
	.attr("x2",180)
	.attr("y2",100)
	.style("stroke","black")
	.style("stroke-width","5");
svg.append("polyline")
	.attr("points","150,20 200,20 250,50 200,70 130,40")
	.style("fill", "none")
	.style("stroke","black")
	.style("stroke-width","2");
svg.append("polyline")
	.attr("points","150,20 200,20 250,50 200,70 200,30 150,30");

Nous venons de parcourir rapidement les formes de base que D3JS permet de manipuler.
Nous verrons dans les chapitres suivants que cette librairie permet une manipulation beaucoup plus avancée des SVG.

Les données

Toute la puissance de D3JS réside dans la facilité avec laquelle il permet la manipulation de données au format JSON. Prenons par exemple l'ensemble de données suivant :

const data = [
	{"position":1, "country":"Chine", "population":1355045511},
	{"position":2, "country":"Inde", "population":1210193422},
	{"position":3, "country":"États-Unis", "population":315664478},
	{"position":4, "country":"Indonésie", "population":237641326},
	{"position":5, "country":"Brésil", "population":193946886},
	{"position":6, "country":"Pakistan", "population":182614855},	
	{"position":7, "country":"Nigeria", "population":174507539},
	{"position":8, "country":"Bangladesh", "population":152518015},	
	{"position":9, "country":"Russie", "population":143056383},
	{"position":10, "country":"Japon", "population":127650000}
];

Il s'agit de la liste des 10 pays les plus peuplés au monde.
Après avoir sélectionné le noeud DOM sur lequel nous souhaitons ajouter notre SVG, nous ajoutons un groupe qui contiendra tous les rectangles.

var group = svg.append("g");

Le code est ici un peu délicat à saisir au premier abord car la méthode selectAll() ne peut rien sélectionner directement puisqu'il n'existe aucun noeud DOM dans notre noeud G. C'est la combinaison de la méthode data() (2) qui va lire notre tableau et de la méthode enter() (3) qui va être exécutée pour chaque entrée du tableau qui va permettre l'ajout d'un rectangle au niveau du noeud G (4). Chaque barre est placé tous les 30px (5) et d'une largeur de 20px (7). A la vertical, les barres commencent toutes au même endroit (6) et font une hauteur qui correspond à un ratio de la population des données (8).

group.selectAll(".node")
	.data(data) // 2
	.enter() // 3
		.append("rect") // 4
		.attr("x", function(d) {return d.position * 30}) // 5
		.attr("y", 0) //6
		.attr("width", 20) // 7
		.attr("height", function(d) {return d.population / 10000000}); // 8

Le résultat obtenu n'est pas extraordinaire mais permet de voir comment D3JS associe la manipulation d'une liste de noeuds auxquels sont rattachés des données. Il nous a suffit de déclarer des fonctions pour accéder aux données de notre JSON.

Dans un chapitre ultérieur nous verrons comment utiliser ces mêmes données pour créer un graphique de type Bar Chart un peu plus élégant que celui-ci.

A suivre : Carte interactive Voir le tutoriel

comments powered by Disqus