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.

↰ Previous page Next page ↱