DC.js - Scatter Plot
Un grafico a dispersione è un tipo di diagramma matematico. Viene rappresentato utilizzando le coordinate cartesiane per visualizzare i valori per tipicamente due variabili per un insieme di dati. I dati vengono visualizzati come una raccolta di punti e i punti possono essere colorati. Questo capitolo spiega in dettaglio un grafico a dispersione.
Metodi del grafico a dispersione
Prima di passare a disegnare un grafico a dispersione, dovremmo capire il dc.scatterPlotclasse e i suoi metodi. Il dc.scatterPlot utilizza i mixin per ottenere la funzionalità di base del disegno di un grafico. Il mixin utilizzato da dc.scatterPlot è dato di seguito -
- dc.coordinateGridMixin
Il diagramma delle classi completo di dc.scatterPlot è il seguente:
Il dc.scatterPlot ottiene tutti i metodi dei mixin sopra specificati. Ha i suoi metodi per disegnare il grafico a dispersione, che vengono spiegati come segue.
customSymbol ([symbol])
Questo metodo viene utilizzato per ottenere o impostare il generatore di simboli.
emptySize ([size])
Questo metodo viene utilizzato per impostare o ottenere il raggio dei simboli quando il gruppo è vuoto.
excludedColor ([color])
Questo metodo viene utilizzato per ottenere o impostare il colore per i simboli esclusi dal filtro del grafico.
excludedOpacity ([opacity])
Questo metodo viene utilizzato per ottenere o impostare l'opacità per i simboli esclusi dal filtro del grafico.
excludedSize ([size])
Viene utilizzato per impostare o ottenere la dimensione per i simboli esclusi dal filtro del grafico.
highlightSize ([size])
Viene utilizzato per impostare o ottenere il raggio per i simboli evidenziati.
simbolo ([tipo])
Viene utilizzato per ottenere o impostare il tipo di simbolo utilizzato per ogni punto.
Disegna un diagramma a dispersione
Disegniamo un grafico a dispersione in DC. In questo esempio, prendiamo un set di dati denominato comehowell1.csvfile. Il file di dati di esempio è il seguente:
"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
...............
...............Il file di esempio precedente contiene molti record. Possiamo scaricare il file facendo clic sul seguente collegamento e salvandolo nella nostra posizione DC.
howell1.csv
Ora, seguiamo i passaggi successivi per disegnare un grafico a dispersione in DC.
Passaggio 1: definire una variabile
Definiamo una variabile come mostrato di seguito:
var chart = dc.scatterPlot('#scatter');Qui, la funzione scatterplot () è mappata con la dispersione id.
Passaggio 2: leggere i dati
Leggere i dati dal file howell1.csv come mostrato di seguito -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Se i dati non sono presenti, restituisce un errore. Successivamente, assegna i dati a un crossfilter.
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";
}
});Qui abbiamo controllato il sesso.
Passaggio 4: impostare la dimensione
È possibile impostare la dimensione utilizzando la codifica fornita di seguito:
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});Dopo che la dimensione è stata assegnata, raggruppa il sesso utilizzando la codifica fornita di seguito:
var hwGroup = hwDimension.group().reduceCount();Passaggio 5: genera un grafico
Ora, genera una mappa di calore utilizzando la codifica fornita di seguito:
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);Qui,
- Abbiamo assegnato la larghezza del grafico a 800 e l'altezza a 600.
- Applicata la funzione d3.scale.linear () sia per l'asse x che per l'asse y.
- Abilitato il valore brushOn come false.
- Quindi, assegnate l'etichetta dell'asse x come altezza e l'etichetta dell'asse y come peso.
- Imposta la dimensione del simbolo su otto e il valore di riempimento su 10.
- Infine, raggruppa i dati e visualizza il grafico.
Passaggio 6: esempio di lavoro
L'elenco completo del codice è il seguente. Crea una pagina webscatter.html e aggiungi le seguenti modifiche.
<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>Ora, richiedi il browser e vedremo la seguente risposta.