DC.js - Grafico a bolle
Un grafico a bolle viene utilizzato per visualizzare tre dimensioni dei dati. È una variazione del grafico a dispersione, in cui i punti dati vengono sostituiti da bolle. Le dimensioni delle bolle sono rappresentate rispetto alla dimensione dei dati. Utilizza gli assi orizzontale e verticale come assi dei valori. Questo capitolo spiega in dettaglio il grafico a bolle.
Metodi del grafico a bolle
Prima di passare a disegnare un grafico a bolle, dovremmo capire il dc.bubbleChartclasse e i suoi metodi. Dc.bubbleChart utilizza i mixin per ottenere le funzionalità di base del disegno di un grafico, elencate di seguito:
- dc.bubbleMixin
- dc.coordinateGridMixin
Il diagramma delle classi completo di dc.bubbleChart è il seguente:
Il dc.bubbleChart ottiene tutti i metodi dei mixin sopra specificati. Ha anche i suoi metodi per disegnare il grafico a bolle, che sono spiegati di seguito:
elasticRadius ([raggio])
Questo metodo viene utilizzato per abilitare il raggio della bolla. Se disabilitiamo questa opzione, il raggio della bolla verrà ridimensionato automaticamente.
sortBubbleSize ([sortBubbleSize])
Questo metodo viene utilizzato per abilitare la funzione di ordinamento nelle bolle. Verranno prima bolle più piccole e poi aumenteranno gradualmente.
Disegna un grafico a bolle
Disegniamo un grafico a bolle 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.bubbleChart('#bubble');Qui, la funzione bubbleChart è mappata con la bolla id.
Passaggio 2: leggere i dati
Leggi i dati da howell1.csv file.
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Se i dati non sono presenti, restituisce un errore. Ora, assegna i dati a un filtro incrociato. Qui abbiamo già scaricato il file howell1.csv. Lo stesso file verrà utilizzato qui e sarà simile al seguente blocco di codice.
"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) {
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);
});Qui, abbiamo controllato il sesso e abbiamo impostato l'intervallo di altezza e larghezza dell'asse x usando la formula sopra.
Passaggio 4: impostare la dimensione
Possiamo impostare la dimensione utilizzando la codifica fornita di seguito -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});Dopo che la dimensione è stata assegnata, raggruppa il sesso utilizzando la codifica fornita di seguito:
var genderGroup = genderDimension.group().reduceCount();Passaggio 5: genera il grafico
Ora, genera un grafico a bolle utilizzando la codifica fornita di seguito:
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);
})Qui,
Abbiamo assegnato la larghezza del grafico a 1200 e l'altezza a 400.
Successivamente, abbiamo specificato i punti di margine.
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 bolle.
Calcola la funzione di accesso del valore del raggio utilizzando la formula - Math.floor((p.value / 10)) + 1.
Passaggio 6: disegna le bolle
Ora, disegna le bolle usando la codifica fornita di seguito:
.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;
});Qui,
La funzione d3.scale.linear viene utilizzata per costruire una nuova scala lineare con l'intervallo di dominio specificato [0,240] per l'asse x.
Allo stesso modo, abbiamo assegnato valori di scala lineare y e raggio.
Abbiamo specificato il valore dell'etichetta del raggio minimo come 1000, i valori di riempimento dell'asse x e dell'asse y come 200 e 100 rispettivamente.
Successivamente, abbiamo specificato un valore massimo della dimensione relativa della bolla pari a 0,7.
Eseguire il rendering delle linee della griglia orizzontale e verticale, quindi eseguire la mappatura con il titolo per la chiave della bolla e i valori.
Passaggio 7: impostare TickFormat
Imposta i formati del biglietto per gli assi xey utilizzando la codifica fornita di seguito -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});Infine, renderizza il grafico usando il chart.render() metodo.
Passaggio 8: esempio di lavoro
L'elenco completo del codice è mostrato nel seguente blocco di codice. Crea una pagina webbubble.html e aggiungi le seguenti modifiche.
<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>Ora, richiedi il browser e vedremo la seguente risposta.