D3.js - Disegno di grafici

D3.js viene utilizzato per creare un grafico SVG statico. Aiuta a disegnare i seguenti grafici:

  • Grafico a barre
  • Grafico a cerchio
  • Grafico a torta
  • Grafico a ciambella
  • Grafico a linee
  • Grafico a bolle, ecc.

Questo capitolo spiega come disegnare grafici in D3. Cerchiamo di capire ciascuno di questi in dettaglio.

Grafico a barre

I grafici a barre sono uno dei tipi di grafico più comunemente utilizzati e vengono utilizzati per visualizzare e confrontare il numero, la frequenza o altre misure (ad esempio la media) per diverse categorie o gruppi discreti. Questo grafico è costruito in modo tale che le altezze o le lunghezze delle diverse barre siano proporzionali alla dimensione della categoria che rappresentano.

L'asse x (l'asse orizzontale) rappresenta le diverse categorie che non ha scala. L'asse y (l'asse verticale) ha una scala e questo indica le unità di misura. Le barre possono essere disegnate verticalmente o orizzontalmente a seconda del numero di categorie e della lunghezza o complessità della categoria.

Disegna un grafico a barre

Creiamo un grafico a barre in SVG usando D3. Per questo esempio, possiamo usare ilrect elements per i bar e text elements per visualizzare i nostri valori di dati corrispondenti alle barre.

Per creare un grafico a barre in SVG utilizzando D3, seguiamo i passaggi indicati di seguito.

Step 1 - Adding style in the rect element - Aggiungiamo il seguente stile all'elemento rect.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Aggiungi la seguente classe CSS per applicare gli stili ai valori di testo. Aggiungi questo stile all'elemento di testo SVG. È definito di seguito:

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

Qui, Fill viene utilizzato per applicare i colori. L'ancoraggio del testo viene utilizzato per posizionare il testo verso l'estremità destra delle barre.

Step 3 - Define variables- Aggiungiamo le variabili nello script. È spiegato di seguito.

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

Qui,

  • Width - Larghezza dell'SVG.

  • Scalefactor - Ridimensionato a un valore in pixel visibile sullo schermo.

  • Barheight - Questa è l'altezza statica delle barre orizzontali.

Step 4 - Append SVG elements - Aggiungiamo elementi SVG in D3 utilizzando il codice seguente.

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Qui, selezioneremo prima il corpo del documento, creeremo un nuovo elemento SVG e poi lo aggiungeremo. Costruiremo il nostro grafico a barre all'interno di questo elemento SVG. Quindi, imposta la larghezza e l'altezza di SVG. L'altezza è calcolata come altezza della barra * numero di valori di dati.

Abbiamo preso l'altezza della barra come 30 e la lunghezza dell'array di dati è 4. Quindi l'altezza SVG è calcolata come barheight * datalength che è 120 px.

Step 5 - Apply transformation - Applichiamo la trasformazione in bar utilizzando il seguente codice.

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

Qui, ogni barra all'interno corrisponde a un elemento. Pertanto, creiamo elementi di gruppo. Ciascuno degli elementi del nostro gruppo deve essere posizionato uno sotto l'altro per creare un grafico a barre orizzontali. Prendiamo una formula di trasformazione indice * altezza barra.

Step 6 - Append rect elements to the bar- Nel passaggio precedente, abbiamo aggiunto elementi di gruppo. Ora aggiungi gli elementi rect alla barra usando il codice seguente.

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

Qui, la larghezza è (valore dati * fattore di scala) e l'altezza è (altezza barra - margine).

Step 7 - Display data- Questo è l'ultimo passaggio. Visualizziamo i dati su ciascuna barra utilizzando il codice seguente.

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

Qui, la larghezza è definita come (valore dati * fattore di scala). Gli elementi di testo non supportano il riempimento o il margine. Per questo motivo, dobbiamo dargli un offset "dy". Viene utilizzato per allineare il testo verticalmente.

Step 8 - Working example- L'elenco completo del codice è mostrato nel seguente blocco di codice. Crea una pagina webbarcharts.html e aggiungi le seguenti modifiche.

barcharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

Ora richiedi il tuo browser, vedrai la seguente risposta.

Grafico a cerchio

Un grafico a cerchio è un grafico statistico circolare, suddiviso in sezioni per illustrare una proporzione numerica.

Disegna un grafico a cerchio

Creiamo un grafico a cerchio in SVG usando D3. Per fare ciò, dobbiamo attenerci ai seguenti passaggi:

Step 1 - Define variables- Aggiungiamo le variabili nello script. È mostrato nel blocco di codice sottostante.

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

Qui,

  • Width - larghezza dell'SVG.

  • Height - altezza dell'SVG.

  • Data - matrice di elementi di dati.

  • Colors - applica i colori agli elementi del cerchio.

Step 2 - Append SVG elements - Aggiungiamo elementi SVG in D3 utilizzando il codice seguente.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Apply transformation - Applichiamo la trasformazione in SVG utilizzando il codice seguente.

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

Qui,

var g = svg.selectAll(“g”) - Crea un elemento di gruppo per contenere i cerchi.

.data(data) - Associa il nostro array di dati agli elementi del gruppo.

.enter() - Crea segnaposto per i nostri elementi di gruppo.

.append(“g”) - Aggiunge elementi del gruppo alla nostra pagina.

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

Qui, la traduzione viene utilizzata per posizionare i tuoi elementi rispetto all'origine.

Step 4 - Append circle elements - Ora, aggiungi elementi circle al gruppo utilizzando il codice seguente.

g.append("circle")

Ora aggiungi gli attributi al gruppo usando il codice seguente.

.attr("cx", function(d, i) {
   return i*75 + 50;
})

Qui, usiamo la coordinata x del centro di ogni cerchio. Stiamo moltiplicando l'indice del cerchio per 75 e aggiungendo un riempimento di 50 tra i cerchi.

Successivamente, impostiamo la coordinata y del centro di ogni cerchio. Serve per uniformare tutti i cerchi ed è definito di seguito.

.attr("cy", function(d, i) {
   return 75;
})

Quindi, imposta il raggio di ogni cerchio. È definito di seguito,

.attr("r", function(d) {
   return d*1.5;
})

Qui, il raggio viene moltiplicato per il valore dei dati insieme a una costante "1,5" per aumentare le dimensioni del cerchio. Infine, riempi i colori per ogni cerchio usando il codice seguente.

.attr("fill", function(d, i){
   return colors[i];
})

Step 5 - Display data- Questo è l'ultimo passaggio. Visualizziamo i dati su ogni cerchio utilizzando il codice seguente.

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

Step 6 - Working Example- L'elenco completo del codice è mostrato nel seguente blocco di codice. Crea una pagina webcirclecharts.html e aggiungi le seguenti modifiche.

circlecharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

Ora, richiedi il tuo browser e di seguito sarà la risposta.

Grafico a torta

Un grafico a torta è un grafico statistico circolare. È diviso in sezioni per mostrare la proporzione numerica. Cerchiamo di capire come creare un grafico a torta in D3.

Disegna un grafico a torta

Prima di iniziare a disegnare un grafico a torta, dobbiamo comprendere i seguenti due metodi:

  • Il metodo d3.arc () e
  • Il metodo d3.pie ().

Cerchiamo di capire entrambi questi metodi in dettaglio.

The d3.arc() Method- Il metodo d3.arc () genera un arco. È necessario impostare un raggio interno e un raggio esterno per l'arco. Se il raggio interno è 0, il risultato sarà un grafico a torta, altrimenti il ​​risultato sarà un grafico ad anello, che verrà discusso nella sezione successiva.

The d3.pie()Method- Il metodo d3.pie () viene utilizzato per generare un grafico a torta. Prende un dato dal set di dati e calcola l'angolo iniziale e l'angolo finale per ogni fetta del grafico a torta.

Disegniamo un grafico a torta utilizzando i seguenti passaggi.

Step 1 - Applying styles - Applichiamo il seguente stile a un elemento arco.

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

Qui, il riempimento viene utilizzato per applicare i colori. Un ancoraggio del testo viene utilizzato per posizionare il testo verso il centro di un arco.

Step 2 - Define variables - Definire le variabili nello script come mostrato di seguito.

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

Qui,

  • Width - Larghezza dell'SVG.

  • Height - Altezza dell'SVG.

  • Radius - Può essere calcolato utilizzando la funzione di Math.min (larghezza, altezza) / 2;

Step 3 - Apply Transformation - Applicare la seguente trasformazione in SVG utilizzando il codice seguente.

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Ora aggiungi i colori usando il d3.scaleOrdinal funzionare come indicato di seguito.

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

Step 4 - Generate a pie chart - Ora, genera un grafico a torta utilizzando la funzione indicata di seguito.

var pie = d3.pie()
   .value(function(d) { return d.percent; });

Qui puoi tracciare i valori percentuali. Per restituire è necessaria una funzione anonimad.percent e impostalo come valore della torta.

Step 5 - Define arcs for pie wedges - Dopo aver generato il grafico a torta, definire ora l'arco per ciascuna fetta di torta utilizzando la funzione indicata di seguito.

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

Qui, questo arco sarà impostato sugli elementi del percorso. Il raggio calcolato è impostato su raggio esterno, mentre il raggio interno è impostato su 0.

Step 6 - Add labels in wedges- Aggiungi le etichette a spicchi di torta fornendo il raggio. È definito come segue.

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

Step 7 - Read data- Questo è un passaggio importante. Possiamo leggere i dati utilizzando la funzione indicata di seguito.

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

Qui, populations.csvcontiene il file di dati. Ild3.csvla funzione legge i dati dal set di dati. Se i dati non sono presenti, genera un errore. Possiamo includere questo file nel tuo percorso D3.

Step 8 - Load data - Il passaggio successivo consiste nel caricare i dati utilizzando il codice seguente.

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

Qui, possiamo assegnare i dati agli elementi del gruppo per ciascuno dei valori dei dati dal set di dati.

Step 9 - Append path - Ora, aggiungi percorso e assegna un "arco" di classe ai gruppi come mostrato di seguito.

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

Qui, il riempimento viene utilizzato per applicare il colore dei dati. È tratto dad3.scaleOrdinal funzione.

Step 10 - Append text - Per visualizzare il testo nelle etichette utilizzando il codice seguente.

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

Qui, l'elemento di testo SVG viene utilizzato per visualizzare il testo nelle etichette. Gli archi dell'etichetta che abbiamo creato in precedenza utilizzandod3.arc()restituisce un punto del centroide, che è una posizione per le etichette. Infine, forniamo i dati utilizzando ild.data.browser.

Step 11 - Append group elements - Aggiungi gli attributi degli elementi del gruppo e aggiungi il titolo della classe per colorare il testo e renderlo corsivo, specificato nel passaggio 1 e definito di seguito.

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

Step 12 - Working Example- Per disegnare un grafico a torta, possiamo prendere un set di dati della popolazione indiana. Questo set di dati mostra la popolazione in un sito Web fittizio, definito come segue.

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

Creiamo una visualizzazione del grafico a torta per il set di dati sopra. Crea una pagina web "piechart.html" e aggiungi il codice seguente.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>

Tutorial D3.js

Licensed under cc by-sa 3.0