DC.js - Heat Map
Eine Wärmekarte ist eine grafische Darstellung von Daten in Form einer Karte, in der Datenwerte als Farben dargestellt werden. In diesem Kapitel wird eine Heatmap ausführlich erläutert.
Bevor wir fortfahren, um eine Heatmap zu zeichnen, sollten wir das verstehen dc.heatMapKlasse und ihre Methoden. Die dc.heatMap verwendet Mixins, um die grundlegenden Funktionen zum Zeichnen eines Diagramms zu erhalten, die unten aufgeführt sind -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
Das vollständige Klassendiagramm der dc.heatMap lautet wie folgt:
Die dc.heatMap ruft alle Methoden der oben angegebenen Mixins ab. Es hat seine eigenen Methoden zum Zeichnen der Wärmekarte, die unten erklärt werden -
boxOnClick ([Handler])
Diese Methode wird verwendet, um den Handler abzurufen oder festzulegen, wenn auf eine einzelne Zelle in der Heatmap geklickt wird.
cols ([cols])
Diese Methode wird verwendet, um die Schlüssel zum Erstellen der Spalten der Heatmap abzurufen oder festzulegen.
colsLabel ([label])
Diese Methode wird verwendet, um die Spaltenbezeichnung abzurufen oder festzulegen, die als Spaltenname dargestellt wird. In ähnlicher Weise können wir auch eine Zeilenbeschriftung durchführen.
Zeilen ([Zeilen])
Diese Methode wird verwendet, um die Werte abzurufen oder festzulegen, die zum Erstellen der Zeilen der Heatmap verwendet werden.
xAxisOnClick ([Handler])
Diese Methode wird verwendet, um den Handler abzurufen oder festzulegen, wenn ein Spalten-Tick auf der x-Achse angeklickt wird.
xBorderRadius ([border])
Diese Methode wird verwendet, um den X-Randradius festzulegen. Wenn der Wert auf 0 gesetzt ist, erhalten Sie volle Rechtecke.
Zeichnen Sie eine Heatmap
Zeichnen wir eine Heatmap in DC. Dazu müssen wir die folgenden Schritte ausführen -
Schritt 1: Definieren Sie eine Variable
Definieren wir eine Variable wie unten gezeigt -
var chart = dc.heatMap('#heatmap');Hier wird die HeatMap-Funktion mit der ID-Heatmap abgebildet.
Schritt 2: Lesen Sie die Daten
Lesen Sie die Daten aus dem howell1.csv Datei wie unten gezeigt -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Hier haben wir dieselbe howell1.csv-Datei verwendet und sie sieht wie folgt aus:
"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
......................
......................Schritt 3: Holen Sie sich die Datensätze
Lassen Sie uns die Datensätze mit der unten angegebenen Codierung abrufen -
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;
}
});Hier haben wir das Geschlecht überprüft und den Höhen- und Breitenbereich der x-Achse mithilfe der obigen Formel festgelegt.
Schritt 4: Stellen Sie die Dimension ein
Sie können die Dimension mit der unten angegebenen Codierung einstellen -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});Nachdem die Dimension zugewiesen wurde, gruppieren Sie das Geschlecht mit der unten angegebenen Codierung -
var genderGroup = genderDimension.group().reduceCount();Schritt 5: Erstellen Sie ein Diagramm
Erstellen Sie nun eine Heatmap mit der unten angegebenen Codierung -
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();
});Hier,
- Wir haben die Diagrammbreite als 20 × 45 + 80 und die Höhe als 2 × 45 + 40 zugewiesen.
- Dann haben wir die Geschlechtsdimension und -gruppe zugewiesen.
- Der Schlüssel- und Wert-Accessor gibt den Schlüssel und den Wert aus den Heatmaps zurück.
- Wir müssen die Funktion colorAccessor () verwenden, um die Farbe zurückzugeben.
- Stellen Sie abschließend den Titel ein und rendern Sie das Diagramm.
Schritt 6: Arbeitsbeispiel
Die vollständige Codierung ist wie folgt. Erstellen Sie eine Webseiteheatmap.html und fügen Sie die folgenden Änderungen hinzu.
<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>Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.