DC.js - Nuage de points
Un nuage de points est un type de diagramme mathématique. Il est représenté à l'aide des coordonnées cartésiennes pour afficher les valeurs de deux variables pour un ensemble de données. Les données sont affichées comme une collection de points et les points peuvent être colorés. Ce chapitre explique en détail un nuage de points.
Méthodes de nuage de points
Avant de passer à dessiner un nuage de points, nous devons comprendre le dc.scatterPlotclass et ses méthodes. Le dc.scatterPlot utilise des mixins pour obtenir les fonctionnalités de base de dessin d'un graphique. Le mixin utilisé par dc.scatterPlot est donné ci-dessous -
- dc.coordinateGridMixin
Le diagramme de classes complet du dc.scatterPlot est le suivant -
Le dc.scatterPlot obtient toutes les méthodes des mixins spécifiés ci-dessus. Il a ses propres méthodes pour dessiner le nuage de points, qui sont expliquées comme suit.
customSymbol ([symbole])
Cette méthode est utilisée pour obtenir ou définir le générateur de symboles.
emptySize ([taille])
Cette méthode est utilisée pour définir ou obtenir le rayon des symboles lorsque le groupe est vide.
excluCouleur ([couleur])
Cette méthode est utilisée pour obtenir ou définir la couleur des symboles exclus du filtre du graphique.
excluOpacity ([opacité])
Cette méthode est utilisée pour obtenir ou définir l'opacité des symboles exclus du filtre du graphique.
excluSize ([taille])
Il est utilisé pour définir ou obtenir la taille des symboles exclus du filtre du graphique.
mis en surbrillance ([taille])
Il est utilisé pour définir ou obtenir le rayon des symboles en surbrillance.
symbole ([type])
Il est utilisé pour obtenir ou définir le type de symbole utilisé pour chaque point.
Dessiner un nuage de points
Dessinez un nuage de points dans DC. Dans cet exemple, prenons un ensemble de données nommé commehowell1.csvfichier. L'exemple de fichier de données est le 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
...............
...............L'exemple de fichier ci-dessus contient de nombreux enregistrements. Nous pouvons télécharger le fichier en cliquant sur le lien suivant et en l'enregistrant dans notre emplacement DC.
howell1.csv
Maintenant, suivons les étapes suivantes pour dessiner un diagramme de dispersion dans DC.
Étape 1: définir une variable
Définissons une variable comme indiqué ci-dessous -
var chart = dc.scatterPlot('#scatter');Ici, la fonction scatterplot () est mappée avec l'id scatter.
Étape 2: lire les données
Lisez les données du fichier howell1.csv comme indiqué ci-dessous -
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. Plus tard, affectez les données à un filtre croisé.
É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";
}
});Ici, nous avons vérifié le sexe.
Étape 4: définir la dimension
Vous pouvez définir la dimension en utilisant le codage ci-dessous -
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});Une fois la dimension attribuée, regroupez le sexe en utilisant le codage ci-dessous -
var hwGroup = hwDimension.group().reduceCount();Étape 5: Générer un graphique
Maintenant, générez une carte thermique en utilisant le codage donné ci-dessous -
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);Ici,
- Nous avons attribué la largeur du graphique à 800 et la hauteur à 600.
- Application de la fonction d3.scale.linear () pour les axes x et y.
- La valeur brushOn activée est false.
- Ensuite, étiquette de l'axe des x affectée comme hauteur et étiquette de l'axe des y comme poids.
- Définissez la taille du symbole sur huit et la valeur de remplissage sur 10.
- Enfin, regroupez les données et effectuez le rendu du graphique.
Étape 6: Exemple de travail
La liste complète des codes est la suivante. Créer une page Webscatter.html et ajoutez-y les modifications suivantes.
<html>
<head>
<title>Scatter plot 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 = "scatter"></div>
</div>
<script language = "javascript">
var chart = dc.scatterPlot('#scatter');
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";
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);
chart.render();
});
</script>
</body>
</html>Maintenant, demandez le navigateur et nous verrons la réponse suivante.