DC.js - Carte de chaleur
Une carte thermique est une représentation graphique des données sous la forme d'une carte, dans laquelle les valeurs de données sont représentées sous forme de couleurs. Ce chapitre explique en détail une carte thermique.
Avant de commencer à dessiner une carte thermique, nous devons comprendre le dc.heatMapclass et ses méthodes. Le dc.heatMap utilise des mixins pour obtenir les fonctionnalités de base de dessin d'un graphique, qui sont répertoriées ci-dessous -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Le diagramme de classes complet de dc.heatMap est le suivant -
Le dc.heatMap obtient toutes les méthodes des mixins spécifiés ci-dessus. Il a ses propres méthodes pour dessiner la carte thermique, qui sont expliquées ci-dessous -
boxOnClick ([gestionnaire])
Cette méthode est utilisée pour obtenir ou définir le gestionnaire, lorsqu'une cellule individuelle est cliquée dans la carte thermique.
cols ([cols])
Cette méthode permet d'obtenir ou de définir les clés pour créer les colonnes de la carte thermique.
colsLabel ([étiquette])
Cette méthode est utilisée pour obtenir ou définir le libellé de la colonne, qui est représenté comme le nom de la colonne. De même, nous pouvons également créer une étiquette de ligne.
lignes ([lignes])
Cette méthode est utilisée pour obtenir ou définir les valeurs utilisées pour créer les lignes de la carte thermique.
xAxisOnClick ([gestionnaire])
Cette méthode est utilisée pour obtenir ou définir le gestionnaire, lorsqu'un tick de colonne est cliqué sur l'axe des x.
xBorderRadius ([bordure])
Cette méthode est utilisée pour définir le rayon de la bordure X. Si la valeur est définie sur 0, vous obtiendrez des rectangles complets.
Dessiner une carte thermique
Dessinez une carte thermique 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.heatMap('#heatmap');Ici, la fonction heatMap est mappée avec l'id heatmap.
Étape 2: lire les données
Lisez les données du howell1.csv fichier comme indiqué ci-dessous -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Ici, nous avons utilisé le même fichier howell1.csv et il ressemble à celui ci-dessous -
"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) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});Ici, nous avons vérifié le sexe et défini la plage de hauteur et de largeur de l'axe des x en utilisant la formule ci-dessus.
Étape 4: définir la dimension
Vous pouvez définir la dimension en utilisant le codage ci-dessous -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});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 un graphique
Maintenant, générez une carte thermique en utilisant le codage donné ci-dessous -
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";
})
.calculateColorDomain()
chart.render();
});Ici,
- Nous avons attribué la largeur du graphique à 20 × 45 + 80 et la hauteur à 2 × 45 + 40.
- 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 cartes thermiques.
- Nous devons utiliser la fonction colorAccessor () pour renvoyer la couleur.
- Enfin, définissez le titre et effectuez le rendu du graphique.
Étape 6: Exemple de travail
Le codage complet est le suivant. Créer une page Webheatmap.html et ajoutez-y les modifications suivantes.
<html>
<head>
<title>DC heat map 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 = "heatmap"></div>
</div>
<script language = "javascript">
var chart = dc.heatMap('#heatmap');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " +
(d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";})
.calculateColorDomain()
chart.render();
});
</script>
</body>
</html>Maintenant, demandez le navigateur et nous verrons la réponse suivante.