DC.js - Streudiagramm
Ein Streudiagramm ist eine Art mathematisches Diagramm. Es wird unter Verwendung der kartesischen Koordinaten dargestellt, um Werte für typischerweise zwei Variablen für einen Datensatz anzuzeigen. Die Daten werden als Sammlung von Punkten angezeigt und die Punkte können farbig sein. In diesem Kapitel wird ein Streudiagramm ausführlich erläutert.
Streudiagramm-Methoden
Bevor wir fortfahren, um ein Streudiagramm zu zeichnen, sollten wir das verstehen dc.scatterPlotKlasse und ihre Methoden. Der dc.scatterPlot verwendet Mixins, um die Grundfunktionen zum Zeichnen eines Diagramms zu erhalten. Das von dc.scatterPlot verwendete Mixin ist unten angegeben -
- dc.coordinateGridMixin
Das vollständige Klassendiagramm des dc.scatterPlot lautet wie folgt:
Der dc.scatterPlot ruft alle Methoden der oben angegebenen Mixins ab. Es hat seine eigenen Methoden zum Zeichnen des Streudiagramms, die wie folgt erklärt werden.
customSymbol ([Symbol])
Diese Methode wird verwendet, um den Symbolgenerator abzurufen oder einzustellen.
emptySize ([Größe])
Diese Methode wird verwendet, um den Radius für Symbole festzulegen oder abzurufen, wenn die Gruppe leer ist.
ausgeschlossenFarbe ([Farbe])
Diese Methode wird verwendet, um die Farbe für Symbole abzurufen oder festzulegen, die vom Filter des Diagramms ausgeschlossen sind.
ausgeschlossene Kapazität ([Deckkraft])
Diese Methode wird verwendet, um die Deckkraft für Symbole abzurufen oder festzulegen, die vom Filter des Diagramms ausgeschlossen sind.
ausgeschlossenSize ([Größe])
Es wird verwendet, um die Größe für Symbole festzulegen oder abzurufen, die vom Filter des Diagramms ausgeschlossen sind.
hervorgehobene Größe ([Größe])
Es wird verwendet, um den Radius für hervorgehobene Symbole festzulegen oder abzurufen.
Symbol ([Typ])
Es wird verwendet, um den für jeden Punkt verwendeten Symboltyp abzurufen oder festzulegen.
Zeichnen Sie ein Streudiagramm
Zeichnen wir ein Streudiagramm in DC. Nehmen wir in diesem Beispiel einen Datensatz mit dem Namenhowell1.csvDatei. Die Beispieldatendatei lautet wie folgt:
"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
...............
...............Die obige Beispieldatei enthält viele Datensätze. Wir können die Datei herunterladen, indem wir auf den folgenden Link klicken und sie an unserem DC-Speicherort speichern.
howell1.csv
Befolgen Sie nun die folgenden Schritte, um ein Streudiagramm in DC zu zeichnen.
Schritt 1: Definieren Sie eine Variable
Definieren wir eine Variable wie unten gezeigt -
var chart = dc.scatterPlot('#scatter');Hier wird die Scatterplot () -Funktion mit der ID-Scatter abgebildet.
Schritt 2: Lesen Sie die Daten
Lesen Sie die Daten aus der Datei howell1.csv wie unten gezeigt -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Wenn die Daten nicht vorhanden sind, wird ein Fehler zurückgegeben. Weisen Sie die Daten später einem Crossfilter zu.
Schritt 3: Holen Sie sich die Datensätze
Lassen Sie uns die Datensätze mit der unten angegebenen Codierung abrufen -
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
});Hier haben wir das Geschlecht überprüft.
Schritt 4: Stellen Sie die Dimension ein
Sie können die Dimension mit der unten angegebenen Codierung einstellen -
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});Nachdem die Dimension zugewiesen wurde, gruppieren Sie das Geschlecht mit der unten angegebenen Codierung -
var hwGroup = hwDimension.group().reduceCount();Schritt 5: Erstellen Sie ein Diagramm
Erstellen Sie nun eine Heatmap mit der unten angegebenen Codierung -
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);Hier,
- Wir haben die Diagrammbreite als 800 und die Höhe als 600 zugewiesen.
- Wendet die Funktion d3.scale.linear () sowohl für die x- als auch für die y-Achse an.
- BrushOn-Wert als false aktiviert.
- Anschließend wird die Beschriftung der x-Achse als Höhe und die Beschriftung der y-Achse als Gewicht zugewiesen.
- Stellen Sie die Symbolgröße auf acht und den Füllwert auf 10 ein.
- Gruppieren Sie abschließend die Daten und rendern Sie das Diagramm.
Schritt 6: Arbeitsbeispiel
Die vollständige Codeliste lautet wie folgt. Erstellen Sie eine Webseitescatter.html und fügen Sie die folgenden Änderungen hinzu.
<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>Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.