DC.js - Graphique à bulles
Un graphique à bulles est utilisé pour afficher trois dimensions des données. Il s'agit d'une variante du nuage de points, dans laquelle les points de données sont remplacés par des bulles. Les tailles des bulles sont représentées par rapport à la dimension des données. Il utilise les axes horizontaux et verticaux comme axes de valeur. Ce chapitre explique en détail le graphique à bulles.
Méthodes de graphique à bulles
Avant de commencer à dessiner un graphique à bulles, nous devons comprendre le dc.bubbleChartclass et ses méthodes. Le dc.bubbleChart utilise des mixins pour obtenir les fonctionnalités de base de dessin d'un graphique, qui sont répertoriées ci-dessous -
- dc.bubbleMixin
- dc.coordinateGridMixin
Le diagramme de classes complet de dc.bubbleChart est le suivant -
Le dc.bubbleChart obtient toutes les méthodes des mixins spécifiés ci-dessus. Il a également ses propres méthodes pour dessiner le graphique à bulles, qui sont expliquées ci-dessous -
élastiqueRadius ([rayon])
Cette méthode est utilisée pour activer le rayon de la bulle. Si nous désactivons cela, le rayon de la bulle sera automatiquement redimensionné.
sortBubbleSize ([sortBubbleSize])
Cette méthode est utilisée pour activer la fonction de tri dans les bulles. Les petites bulles viendront en premier, puis elles augmenteront progressivement.
Dessinez un graphique à bulles
Laissez-nous dessiner un graphique à bulles dans DC. Pour ce faire, nous devons suivre les étapes ci-dessous -
Étape 1: définir une variable
Définissons une variable comme indiqué ci-dessous -
var chart = dc.bubbleChart('#bubble');Ici, la fonction bubbleChart est mappée avec la bulle d'identification.
Étape 2: lire les données
Lire les données du howell1.csv fichier.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Si les données ne sont pas présentes, cela renvoie une erreur. Maintenant, attribuez les données à un filtre croisé. Ici, nous avons déjà téléchargé le fichier howell1.csv. Le même fichier sera utilisé ici et il ressemblera au bloc de code suivant.
"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0
....................
.....................Étape 3: Récupérez les enregistrements
Récupérons les enregistrements en utilisant le codage ci-dessous -
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});Ici, nous avons vérifié le sexe et défini la hauteur et la largeur de l'axe des x en utilisant la formule ci-dessus.
Étape 4: définir la dimension
Nous pouvons définir la dimension en utilisant le codage donné ci-dessous -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});Une fois la dimension attribuée, regroupez le sexe en utilisant le codage ci-dessous -
var genderGroup = genderDimension.group().reduceCount();Étape 5: Générer le graphique
Maintenant, générez un graphique à bulles en utilisant le codage ci-dessous -
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})Ici,
Nous avons attribué la largeur du graphique à 1200 et la hauteur à 400.
Ensuite, nous avons spécifié les points de marge.
Ensuite, nous avons attribué la dimension de genre et le groupe.
L'accesseur de clé et de valeur renvoie la clé et la valeur des bulles.
Calculez la fonction d'accesseur de valeur de rayon à l'aide de la formule - Math.floor((p.value / 10)) + 1.
Étape 6: Dessinez des bulles
Maintenant, dessinez les bulles en utilisant le codage ci-dessous -
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});Ici,
La fonction d3.scale.linear est utilisée pour construire une nouvelle échelle linéaire avec la plage de domaine spécifiée [0,240] pour l'axe des x.
De même, nous avons attribué des valeurs d'échelle linéaire y et rayon.
Nous avons spécifié la valeur minimale de l'étiquette de rayon comme 1000, les valeurs de remplissage des axes x et y comme 200 et 100 respectivement.
Ensuite, nous avons spécifié une valeur de taille relative de bulle maximale égale à 0,7.
Effectuez le rendu des lignes de quadrillage horizontales et verticales, puis mappez avec le titre de la clé de bulle et des valeurs.
Étape 7: définir TickFormat
Définissez les formats de ticket pour les axes x et y en utilisant le codage ci-dessous -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});Enfin, effectuez le rendu du graphique à l'aide de chart.render() méthode.
Étape 8: Exemple de travail
La liste complète des codes est illustrée dans le bloc de code suivant. Créer une page Webbubble.html et ajoutez-y les modifications suivantes.
<html>
<head>
<title>Bubble chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>Maintenant, demandez le navigateur et nous verrons la réponse suivante.