D3.js - Graphiques de dessin
D3.js est utilisé pour créer un graphique SVG statique. Il est utile de dessiner les graphiques suivants -
- Diagramme à bandes
- Graphique circulaire
- Diagramme circulaire
- Graphique en anneau
- Graphique en ligne
- Graphique à bulles, etc.
Ce chapitre explique comment dessiner des diagrammes dans D3. Comprenons chacun de ces éléments en détail.
Diagramme à bandes
Les graphiques à barres sont l'un des types de graphiques les plus couramment utilisés et sont utilisés pour afficher et comparer le nombre, la fréquence ou une autre mesure (par exemple la moyenne) pour différentes catégories ou groupes discrets. Ce graphique est construit de telle manière que les hauteurs ou longueurs des différentes barres soient proportionnelles à la taille de la catégorie qu'elles représentent.
L'axe des x (l'axe horizontal) représente les différentes catégories qu'il n'a pas d'échelle. L'axe y (l'axe vertical) a une échelle et cela indique les unités de mesure. Les barres peuvent être dessinées verticalement ou horizontalement selon le nombre de catégories et la longueur ou la complexité de la catégorie.
Dessinez un diagramme à barres
Créons un histogramme en SVG en utilisant D3. Pour cet exemple, nous pouvons utiliser lerect elements pour les bars et text elements pour afficher nos valeurs de données correspondant aux barres.
Pour créer un histogramme en SVG à l'aide de D3, suivons les étapes ci-dessous.
Step 1 - Adding style in the rect element - Ajoutons le style suivant à l'élément rect.
svg rect {
fill: gray;
}
Step 2 - Add styles in text element- Ajoutez la classe CSS suivante pour appliquer des styles aux valeurs de texte. Ajoutez ce style à l'élément de texte SVG. Il est défini ci-dessous -
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
Ici, Fill est utilisé pour appliquer des couleurs. L'ancre de texte est utilisée pour positionner le texte vers l'extrémité droite des barres.
Step 3 - Define variables- Ajoutons les variables dans le script. Cela est expliqué ci-dessous.
<script>
var data = [10, 5, 12, 15];
var width = 300,
scaleFactor = 20,
barHeight = 30;
</script>
Ici,
Width - Largeur du SVG.
Scalefactor - Mise à l'échelle à une valeur de pixel visible à l'écran.
Barheight - Il s'agit de la hauteur statique des barres horizontales.
Step 4 - Append SVG elements - Ajoutons des éléments SVG dans D3 en utilisant le code suivant.
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
Ici, nous allons d'abord sélectionner le corps du document, créer un nouvel élément SVG, puis l'ajouter. Nous allons construire notre graphique à barres à l'intérieur de cet élément SVG. Ensuite, définissez la largeur et la hauteur de SVG. La hauteur est calculée comme la hauteur de la barre * le nombre de valeurs de données.
Nous avons pris la hauteur de la barre à 30 et la longueur du tableau de données est de 4. Ensuite, la hauteur SVG est calculée comme la hauteur de la barre * longueur de données qui est de 120 px.
Step 5 - Apply transformation - Appliquons la transformation en barre en utilisant le code suivant.
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
Ici, chaque barre à l'intérieur correspond à un élément. Par conséquent, nous créons des éléments de groupe. Chacun de nos éléments de groupe doit être positionné l'un en dessous de l'autre pour créer un graphique à barres horizontales. Prenons une formule de transformation index * hauteur de la barre.
Step 6 - Append rect elements to the bar- Dans l'étape précédente, nous avons ajouté des éléments de groupe. Ajoutez maintenant les éléments rect à la barre en utilisant le code suivant.
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
Ici, la largeur est (valeur des données * facteur d'échelle) et la hauteur est (hauteur de la barre - marge).
Step 7 - Display data- C'est la dernière étape. Laissez-nous afficher les données sur chaque barre en utilisant le code suivant.
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
Ici, la largeur est définie comme (valeur de données * facteur d'échelle). Les éléments de texte ne prennent pas en charge le remplissage ou la marge. Pour cette raison, nous devons lui donner un décalage «dy». Ceci est utilisé pour aligner le texte verticalement.
Step 8 - Working example- La liste complète des codes est affichée dans le bloc de code suivant. Créer une page Webbarcharts.html et ajoutez les modifications suivantes.
barcharts.html
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg rect {
fill: gray;
}
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [10, 5, 12, 15];
var width = 300
scaleFactor = 20,
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>
Maintenant, demandez à votre navigateur, vous verrez la réponse suivante.
Graphique circulaire
Un diagramme circulaire est un graphique statistique circulaire, qui est divisé en tranches pour illustrer une proportion numérique.
Dessinez un diagramme circulaire
Créons un diagramme circulaire en SVG en utilisant D3. Pour ce faire, nous devons respecter les étapes suivantes -
Step 1 - Define variables- Ajoutons les variables dans le script. Il est indiqué dans le bloc de code ci-dessous.
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
</script>
Ici,
Width - largeur du SVG.
Height - hauteur du SVG.
Data - tableau d'éléments de données.
Colors - appliquer des couleurs aux éléments du cercle.
Step 2 - Append SVG elements - Ajoutons des éléments SVG dans D3 en utilisant le code suivant.
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
Step 3 - Apply transformation - Appliquons la transformation en SVG en utilisant le code suivant.
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
Ici,
var g = svg.selectAll(“g”) - Crée un élément de groupe pour contenir les cercles.
.data(data) - Lie notre tableau de données aux éléments du groupe.
.enter() - Crée des espaces réservés pour nos éléments de groupe.
.append(“g”) - Ajoute des éléments de groupe à notre page.
.attr("transform", function(d, i) {
return "translate(0,0)";
})
Ici, translate est utilisé pour positionner vos éléments par rapport à l'origine.
Step 4 - Append circle elements - Maintenant, ajoutez des éléments de cercle au groupe en utilisant le code suivant.
g.append("circle")
Maintenant, ajoutez les attributs au groupe en utilisant le code suivant.
.attr("cx", function(d, i) {
return i*75 + 50;
})
Ici, nous utilisons la coordonnée x du centre de chaque cercle. Nous multiplions l'indice du cercle par 75 et ajoutons un remplissage de 50 entre les cercles.
Ensuite, nous définissons la coordonnée y du centre de chaque cercle. Ceci est utilisé pour uniformiser tous les cercles et il est défini ci-dessous.
.attr("cy", function(d, i) {
return 75;
})
Ensuite, définissez le rayon de chaque cercle. Il est défini ci-dessous,
.attr("r", function(d) {
return d*1.5;
})
Ici, le rayon est multiplié par la valeur des données avec une constante «1,5» pour augmenter la taille du cercle. Enfin, remplissez les couleurs de chaque cercle en utilisant le code suivant.
.attr("fill", function(d, i){
return colors[i];
})
Step 5 - Display data- C'est la dernière étape. Affichons les données sur chaque cercle en utilisant le code suivant.
g.append("text")
.attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.text(function(d) {
return d;
});
Step 6 - Working Example- La liste complète des codes est affichée dans le bloc de code suivant. Créer une page Webcirclecharts.html et ajoutez-y les modifications suivantes.
circlecharts.html
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
g.append("circle").attr("cx", function(d, i) {
return i*75 + 50;
})
.attr("cy", function(d, i) {
return 75;
})
.attr("r", function(d) {
return d*1.5;
})
.attr("fill", function(d, i){
return colors[i];
})
g.append("text").attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif").text(function(d) {
return d;
});
</script>
</body>
</html>
Maintenant, demandez votre navigateur et ce sera la réponse.
Diagramme circulaire
Un camembert est un graphique statistique circulaire. Il est divisé en tranches pour montrer la proportion numérique. Comprenons comment créer un camembert dans D3.
Dessiner un graphique à secteurs
Avant de commencer à dessiner un graphique à secteurs, nous devons comprendre les deux méthodes suivantes -
- La méthode d3.arc () et
- La méthode d3.pie ().
Laissez-nous comprendre ces deux méthodes en détail.
The d3.arc() Method- La méthode d3.arc () génère un arc. Vous devez définir un rayon intérieur et un rayon extérieur pour l'arc. Si le rayon intérieur est 0, le résultat sera un graphique à secteurs, sinon le résultat sera un graphique en anneau, qui est discuté dans la section suivante.
The d3.pie()Method- La méthode d3.pie () est utilisée pour générer un graphique à secteurs. Il prend les données du jeu de données et calcule l'angle de départ et l'angle de fin pour chaque coin du graphique à secteurs.
Dessinez un graphique à secteurs en suivant les étapes suivantes.
Step 1 - Applying styles - Appliquons le style suivant à un élément arc.
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
Ici, le remplissage est utilisé pour appliquer des couleurs. Une ancre de texte est utilisée pour positionner le texte vers le centre d'un arc.
Step 2 - Define variables - Définissez les variables dans le script comme indiqué ci-dessous.
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
</script>
Ici,
Width - Largeur du SVG.
Height - Hauteur du SVG.
Radius - Il peut être calculé en utilisant la fonction de Math.min (largeur, hauteur) / 2;
Step 3 - Apply Transformation - Appliquez la transformation suivante dans SVG en utilisant le code suivant.
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
Ajoutez maintenant des couleurs à l'aide du d3.scaleOrdinal fonction comme indiqué ci-dessous.
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);
Step 4 - Generate a pie chart - Maintenant, générez un camembert en utilisant la fonction ci-dessous.
var pie = d3.pie()
.value(function(d) { return d.percent; });
Ici, vous pouvez tracer les valeurs de pourcentage. Une fonction anonyme est requise pour retournerd.percent et définissez-le comme valeur de tarte.
Step 5 - Define arcs for pie wedges - Après avoir généré le graphique à secteurs, définissez maintenant l'arc pour chaque quartier à l'aide de la fonction ci-dessous.
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(0);
Ici, cet arc sera défini sur les éléments du chemin. Le rayon calculé est défini sur le rayon externe, tandis que le rayon interne est défini sur 0.
Step 6 - Add labels in wedges- Ajoutez les étiquettes dans les quartiers à tarte en fournissant le rayon. Il est défini comme suit.
var label = d3
.arc()
.outerRadius(radius)
.innerRadius(radius - 80);
Step 7 - Read data- C'est une étape importante. Nous pouvons lire les données en utilisant la fonction ci-dessous.
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
});
Ici, populations.csvcontient le fichier de données. led3.csvLa fonction lit les données de l'ensemble de données. Si les données ne sont pas présentes, une erreur est générée. Nous pouvons inclure ce fichier dans votre chemin D3.
Step 8 - Load data - L'étape suivante consiste à charger les données à l'aide du code suivant.
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
Ici, nous pouvons attribuer des données à des éléments de groupe pour chacune des valeurs de données de l'ensemble de données.
Step 9 - Append path - Maintenant, ajoutez le chemin et attribuez un «arc» de classe aux groupes comme indiqué ci-dessous.
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data.states); });
Ici, le remplissage est utilisé pour appliquer la couleur des données. Il est tiré dud3.scaleOrdinal fonction.
Step 10 - Append text - Pour afficher le texte dans les étiquettes en utilisant le code suivant.
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
Ici, l'élément de texte SVG est utilisé pour afficher du texte dans les étiquettes. Les arcs d'étiquette que nous avons créés précédemment en utilisantd3.arc()renvoie un point centroïde, qui est une position pour les étiquettes. Enfin, nous fournissons des données en utilisant led.data.browser.
Step 11 - Append group elements - Ajoutez des attributs d'éléments de groupe et ajoutez un titre de classe pour colorer le texte et le rendre en italique, ce qui est spécifié à l'étape 1 et défini ci-dessous.
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text")
.text("Top population states in india")
.attr("class", "title")
Step 12 - Working Example- Pour dessiner un camembert, nous pouvons prendre un ensemble de données de la population indienne. Cet ensemble de données montre la population dans un site Web factice, qui est défini comme suit.
population.csv
states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0
Créons une visualisation de graphique à secteurs pour l'ensemble de données ci-dessus. Créez une page Web «fragment.html» et ajoutez-y le code suivant.
<!DOCTYPE html>
<html>
<head>
<style>
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
</style>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400"></svg>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal([
'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
]);
var pie = d3.pie().value(function(d) {
return d.percent;
});
var path = d3.arc()
.outerRadius(radius - 10).innerRadius(0);
var label = d3.arc()
.outerRadius(radius).innerRadius(radius - 80);
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.states); });
console.log(arc)
arc.append("text").attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
});
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text").text("Top population states in india")
.attr("class", "title")
</script>
</body>
</html>
Tutoriel D3.js
- Tutoriel D3.js
- D3.js - Présentation
- D3.js - Installation
- D3.js - Concepts
- D3.js - Sélections
- D3.js - Jointure de données
- D3.js - Introduction à SVG
- D3.js - Transformation SVG
- D3.js - Transition
- D3.js - Animation
- D3.js - Graphiques de dessin
- D3.js - Graphiques
- D3.js - Géographies
- D3.js - API Array
- D3.js - API Collections
- D3.js - API de sélection
- D3.js - API Paths
- D3.js - API Scales
- D3.js - API Axis
- D3.js - API Shapes
- D3.js - API Colors
- D3.js - API de transitions
- D3.js - API de glissement
- D3.js - API de zoom
- D3.js - API Requests
- D3.js - API de valeurs séparées par des délimiteurs
- D3.js - API Timer
- D3.js - Exemple de travail