DC.js - Blasendiagramm
Ein Blasendiagramm wird verwendet, um drei Dimensionen der Daten anzuzeigen. Es ist eine Variation des Streudiagramms, bei dem die Datenpunkte durch Blasen ersetzt werden. Die Blasengrößen werden in Bezug auf die Datendimension dargestellt. Es werden horizontale und vertikale Achsen als Wertachsen verwendet. In diesem Kapitel wird das Blasendiagramm ausführlich erläutert.
Blasendiagramm-Methoden
Bevor wir mit dem Zeichnen eines Blasendiagramms fortfahren, sollten wir das verstehen dc.bubbleChartKlasse und ihre Methoden. Das dc.bubbleChart verwendet Mixins, um die grundlegenden Funktionen zum Zeichnen eines Diagramms zu erhalten, die unten aufgeführt sind -
- dc.bubbleMixin
- dc.coordinateGridMixin
Das vollständige Klassendiagramm des dc.bubbleChart lautet wie folgt:
Das dc.bubbleChart ruft alle Methoden der oben angegebenen Mixins ab. Es hat auch seine eigenen Methoden, um das Blasendiagramm zu zeichnen, die unten erklärt werden -
elastischer Radius ([Radius])
Diese Methode wird verwendet, um den Blasenradius zu aktivieren. Wenn wir dies deaktivieren, wird der Blasenradius automatisch neu skaliert.
sortBubbleSize ([sortBubbleSize])
Diese Methode wird verwendet, um die Sortierfunktion in Blasen zu aktivieren. Kleinere Blasen kommen zuerst und nehmen dann allmählich zu.
Zeichnen Sie ein Blasendiagramm
Zeichnen wir ein Blasendiagramm 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.bubbleChart('#bubble');Hier wird die Funktion bubbleChart der ID-Blase zugeordnet.
Schritt 2: Lesen Sie die Daten
Lesen Sie die Daten aus dem howell1.csv Datei.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Wenn keine Daten vorhanden sind, wird ein Fehler zurückgegeben. Ordnen Sie nun die Daten einem Crossfilter zu. Hier haben wir bereits die Datei howell1.csv heruntergeladen. Hier wird dieselbe Datei verwendet, die dem folgenden Codeblock ähnelt.
"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) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});Hier haben wir das Geschlecht überprüft und den Höhen- und Breitenbereich der x-Achse mit der obigen Formel festgelegt.
Schritt 4: Stellen Sie die Dimension ein
Wir können die Dimension mit der unten angegebenen Codierung einstellen -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});Nachdem die Dimension zugewiesen wurde, gruppieren Sie das Geschlecht mit der unten angegebenen Codierung -
var genderGroup = genderDimension.group().reduceCount();Schritt 5: Generieren Sie das Diagramm
Erstellen Sie nun ein Blasendiagramm mit der unten angegebenen Codierung -
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})Hier,
Wir haben die Diagrammbreite als 1200 und die Höhe als 400 zugewiesen.
Als nächstes haben wir die Randpunkte angegeben.
Dann haben wir die Geschlechtsdimension und -gruppe zugewiesen.
Der Schlüssel- und Wert-Accessor gibt den Schlüssel und den Wert aus den Blasen zurück.
Berechnen Sie die Radiuswert-Accessor-Funktion mit der Formel - Math.floor((p.value / 10)) + 1.
Schritt 6: Blasen zeichnen
Zeichnen Sie nun die Blasen mit der unten angegebenen Codierung -
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});Hier,
Mit der Funktion d3.scale.linear wird eine neue lineare Skala mit dem angegebenen Domänenbereich [0,240] für die x-Achse erstellt.
In ähnlicher Weise haben wir lineare Skalenwerte für y und Radius zugewiesen.
Wir haben den minimalen Radius-Beschriftungswert als 1000, die Auffüllwerte für die x-Achse und die y-Achse als 200 bzw. 100 angegeben.
Als nächstes haben wir einen maximalen relativen Wert für die Blasengröße als 0,7 angegeben.
Rendern Sie die horizontalen und vertikalen Gitterlinien und ordnen Sie sie dem Titel für den Blasenschlüssel und die Werte zu.
Schritt 7: Stellen Sie TickFormat ein
Stellen Sie die Ticketformate für die x- und y-Achse mit der unten angegebenen Codierung ein -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});Zum Schluss rendern Sie das Diagramm mit der chart.render() Methode.
Schritt 8: Arbeitsbeispiel
Die vollständige Codeliste ist im folgenden Codeblock dargestellt. Erstellen Sie eine Webseitebubble.html und fügen Sie die folgenden Änderungen hinzu.
<html>
<head>
<title>Bubble chart 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 = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
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";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.