DC.js - Mappa termica
Una mappa termica è una rappresentazione grafica dei dati sotto forma di mappa, in cui i valori dei dati sono rappresentati come colori. Questo capitolo spiega in dettaglio una mappa termica.
Prima di passare a disegnare una mappa termica, dovremmo capire il dc.heatMapclasse e i suoi metodi. Dc.heatMap utilizza i mixin per ottenere le funzionalità di base per disegnare un grafico, che sono elencate di seguito:
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Il diagramma delle classi completo di dc.heatMap è il seguente:
La dc.heatMap ottiene tutti i metodi dei mixin sopra specificati. Ha i suoi metodi per disegnare la mappa di calore, che sono spiegati di seguito:
boxOnClick ([gestore])
Questo metodo viene utilizzato per ottenere o impostare il gestore, quando si fa clic su una singola cella nella mappa termica.
cols ([cols])
Questo metodo viene utilizzato per ottenere o impostare le chiavi per creare le colonne della mappa termica.
colsLabel ([label])
Questo metodo viene utilizzato per ottenere o impostare l'etichetta della colonna, rappresentata come nome della colonna. Allo stesso modo, possiamo eseguire anche un'etichetta di riga.
righe ([righe])
Questo metodo viene utilizzato per ottenere o impostare i valori utilizzati per creare le righe della mappa termica.
xAxisOnClick ([gestore])
Questo metodo viene utilizzato per ottenere o impostare il gestore, quando si fa clic su un segno di spunta di colonna nell'asse x.
xBorderRadius ([border])
Questo metodo viene utilizzato per impostare il raggio del bordo X. Se il valore è impostato su 0, otterrai rettangoli interi.
Disegna una mappa termica
Disegniamo una mappa di calore in DC. Per fare ciò, dobbiamo seguire i passaggi indicati di seguito:
Passaggio 1: definire una variabile
Definiamo una variabile come mostrato di seguito:
var chart = dc.heatMap('#heatmap');Qui, la funzione heatMap è mappata con l'id heatmap.
Passaggio 2: leggere i dati
Leggi i dati dal howell1.csv file come mostrato di seguito -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Qui, abbiamo utilizzato lo stesso file howell1.csv e appare come mostrato di seguito -
"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
......................
......................Passaggio 3: recupera i record
Cerchiamo di recuperare i record utilizzando la codifica fornita di seguito -
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;
}
});Qui, abbiamo controllato il sesso e abbiamo impostato l'intervallo di altezza e larghezza dell'asse x utilizzando la formula sopra.
Passaggio 4: impostare la dimensione
È possibile impostare la dimensione utilizzando la codifica fornita di seguito:
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Dopo che la dimensione è stata assegnata, raggruppa il sesso utilizzando la codifica fornita di seguito:
var genderGroup = genderDimension.group().reduceCount();Passaggio 5: genera un grafico
Ora, genera una mappa di calore utilizzando la codifica fornita di seguito:
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();
});Qui,
- Abbiamo assegnato la larghezza del grafico a 20 × 45 + 80 e l'altezza a 2 × 45 + 40.
- Quindi abbiamo assegnato la dimensione e il gruppo di genere.
- La funzione di accesso a chiave e valore restituisce la chiave e il valore dalle mappe di calore.
- Dobbiamo usare la funzione colorAccessor () per restituire il colore.
- Infine, imposta il titolo e visualizza il grafico.
Passaggio 6: esempio di lavoro
La codifica completa è la seguente. Crea una pagina webheatmap.html e aggiungi le seguenti modifiche.
<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>Ora, richiedi il browser e vedremo la seguente risposta.