introduzione
Si hay 2 tendencias fundamentales que impulsan el periodismo digital, serían estas:
- Se genera y captura una mayor cantidad de datos sobre sus clientes.
- Aumento de la penetración web (o móvil) entre los clientes y necesidad de contar historias de datos por medio de la web.
Aquí es donde entra en juego D3.js. D3.js se ha convertido en el santo grial de la visualización interactiva de datos.
D3.js frente a otras alternatives
Creo que la popularidad de D3.js en la fraternidad de la ciencia de datos no está sincronizada con su verdadero potencial. El motivo principal es que necesita un conjunto de habilidades distinto (come esempio, HTML, CSS y conocimientos sobre JavaScript) que la mayoría de las herramientas convencionales para ciencia de datos o aprendizaje automático. Allo stesso tempo, esistono strumenti facilmente disponibili come QlikView e Tableau che offrono questa funzione.
Nonostante questo, quando desideri cruscotti / storie di dati personalizzate consegnate sul web a basso costo, D3.js è uno dei migliori strumenti disponibili. Ed è per questo che crediamo nella creazione di questo percorso di apprendimento.
Abbiamo progettato un percorso di apprendimento per principianti di seguito. Se lo trovi intimidatorio all'inizio, Non preoccuparti, è naturale. Ma, se prometti di fare il tuo primo passo in D3.js, ti promettiamo che ti aiuteremo costantemente a superare gli ostacoli successivi.
Nota: Questo percorso di apprendimento è stato progettato presumendo che tu sia un principiante nei linguaggi di programmazione e nello sviluppo web (HTML / CSS e JavaScript). Se li conosci già, puoi saltare le sezioni corrispondenti.
Cos'è D3.js?
Documenti controllati dai dati (RE3) è una libreria JavaScript open source utilizzata per creare visualizzazioni dinamiche e interattive in un browser web moderno. Funziona principalmente con HTML, SVG, CSS e JavaScript. È stato creato da Mike Bostock, informatico e specialista in visualizzazione dei dati (in immagine).
D3.js è estremamente veloce, reattivo e supporta inoltre grandi set di dati per creare animazioni dinamiche nei browser web. La raccolta di plugin e componenti di codifica utili rende il codice D3 riutilizzabile.
Consiglio per principianti: Se sei un principiante, puoi confonderti tra il linguaggio di programmazione Java e il linguaggio di scripting JavaScript. Figlio 2 lingue assolutamente indipendenti. Java è utilizzato principalmente per lo sviluppo di software e applicazioni, mentre JavaScript è utilizzato per creare pagine web interattive.
passo 0: Motivazione – Perché imparare D3.js?
Credo veramente nel cerchio d'oro spiegato da Simon Sinek. Lui dice, se stai iniziando qualcosa, inizia con “Come mai”?
Prima di iniziare il tuo viaggio, devi avere una risposta a questa domanda:
Perché dovrei imparare D3.js?
oh
Come mi aiuterà D3.js?
Lascia che ti aiuti a trovare la risposta. Guarda questa presentazione di Scott Murray, Autore di Visualizzazione interattiva dei dati per il Web, per capire il vero potere di creare visualizzazioni abilitate per il Web.
5 esempi del mondo reale
questo è essenziale. Lascia che ti mostri alcune delle visualizzazioni create con d3. Non è necessario analizzare queste visualizzazioni, ma ottieni ispirazione e voglia di creare una.
- Sciopero effettuato dalla polizia a gennaio di 2012 a New York
- Processo di Markov
- Introduzione visiva al machine learning
- Race Track conduce alla vittoria
- Connessioni tra i contendenti agli Oscar
Suggerirei vivamente di dedicare del tempo a ciascuna di queste pagine interagendo con gli elementi di queste pagine. Inizierai a vedere la potenza di ciò che D3.js può offrirti!
Scorrere per Più di 600 esempi in D3.
Rilevanza della visualizzazione dei dati
Se hai visto gli esempi precedenti, sono sicuro che non è necessario sottolineare la rilevanza di visualizzare i dati. Sai già quanto bene i dati possano parlare da soli. Come scienziato dei dati, Il vero motivo dovrebbe essere spiegare il modello alle parti interessate. La realtà emerge nella presentazione dei dati alle parti interessate che non sono analitiche. Non vogliono numeri, ma una storia splendidamente elaborata con numeri. Se puoi svolgere questo compito con D3, ottimo lavoro.
passo 1: Imparare i concetti di base: HTML, CSS, SVG, Javascript
Per prima cosa cancella le tue conoscenze di codifica di base. Se non hai conoscenze di codifica precedenti, inizia con HTML e CSS corso di Codecademy. È un corso interattivo ed è il posto migliore per iniziare.
Una volta terminato con HTML e CSS, procedi a imparare gli argomenti di Javascript. Puoi seguire il corso di Javascript da Codecademy Cosa c'è di più.
Inoltre puoi consultare Pizca della Assemblea Generale per imparare HTML, CSS e JavaScript in modo interattivo. Una volta terminato con Javascript, procedi a jQuery. Attenersi a codecademy Ancora una volta. È un corso breve. Ma, molto utile per D3.
Finalmente, hai bisogno Grafici vettoriali scalabili (SVG). Svolge un ruolo fondamentale nella creazione di varie forme integrate in una visualizzazione D3. Per questo, puoi seguire questo tutorial di w3schools.
A quest'ora, dovresti essere in grado di creare pagine web interattive di base. Ora è il momento di acquisire esperienza pratica.
Metti alla prova le tue abilità: Per esaminare la tua conoscenza di HTML, CSS, Javascript, fai questo esercizio di creare progetti web. Questo dovrebbe aiutarti a guadagnare fiducia nella programmazione.
Aggiuntivo: Se ti senti ancora sommerso da questi argomenti, prendi questo corso completo di Freecodecamp. Se completi con successo tutti i livelli di questo corso, sei più che pronto per passare al passo successivo.
passo 2: scarica, installare ed eseguire D3.js
Ora è necessario installare un editor di testo dove poter programmare. Questo è un fattore cruciale. La scelta di un buon editor di testo fornisce una vera spinta ed entusiasmo al codice. Io uso, preferisco e raccomando Sublime Text. È un editor open source, veloce e facile da usare. È compatibile con molti plugin utili e opzioni di personalizzazione per rendere l'esperienza di programmazione incredibile.
Dopo aver installato un editor di testo, il passo successivo è scaricare e installare la libreria d3.js, il che è inoltre piuttosto semplice.
Puoi scaricare il file zip completo di d3 da qui. Crea una cartella sul tuo computer e decomprimila. Troverai i file javascript con i nomi d3.js e d3.min.js.
Per caricare la libreria d3 nel tuo editor di testo, puoi farlo in diversi modi, sia dalla tua macchina locale che dalla sua sorgente. Non dimenticare di aggiungere questo script nella sezione
:<!--Carica D3 dal sito web sorgente--> <script src="http://d3js.org/d3.v3.min.js"></script> <!--Carica D3 dalla macchina locale--> <script type="text/javascript" src="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></script>
passo 3: Inizia a lavorare con D3 – primo esempio
Prossimo, dovresti lavorare lungo il capitolo 1b del corso da audacia. Ti presenterà i concetti di D3 tramite un esempio semplice. Una volta lavorato con un esempio di base, puoi vedere più dettagli su come creare elementi basati sui dati.
Puoi consultare uno qualsiasi dei due:
- Capitolo 7 – Capitolo 20 a partire dal dashingd3 tutorial; oh
- Capitolo 4 – Capitolo 17 del libro di Scott Murray
Entrambi trattano vari aspetti di d3 in dettaglio, supponendo che tu abbia conoscenze pregresse di HTML, css, javascript.
passo 4: tempo di pratica
In questa fase, dovresti aver acquisito conoscenze pratiche di d3. Ora dovresti sentirti a tuo agio nel codificare usando questi diversi linguaggi. Ora pratichiamo alcune tecniche di visualizzazione di base che hai imparato nei passaggi precedenti.
L'idea alla base di questi esempi è farti esercitare. Non controllare il codice all'inizio. Provalo prima da solo. Dopo, controlla la risposta se rimani bloccato.
Esempio 1: creare un grafico a torta
<!DOCTYPE html>
<html>
<testa>
<titolo>Percorso con Linea</titolo>
<script type="text/javascript" src="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></script>
</testa>
<corpo>
<script>
var data = [20, 50, 80];
var r = 150;
var canvas = d3.select("corpo").aggiungere("svg")
.attr("larghezza", 1500)
.attr("altezza", 1500);
var color = d3.scale.ordinal()
.gamma(["arancia", "rosso", "verde"]);
var group = canvas.append("G")
.attr("trasforma", "translate(200, 200)");
var arc = d3.svg.arc()
.innerRadius(80)
.raggio esterno(R);
var pie = d3.layout.pie()
.valore ( funzione(D) { ritorno d; });
var arcs = group.selectAll(".arc") .dati(torta(dati)) .accedere() .aggiungere("G") .attr("classe", "arc");
arcs.append("il percorso") .attr("D", arc) .attr("fill", funzione(D) { return color(d.data)});
arcs.append("testo") .attr("trasforma", funzione(D) { Restituzione "translate(" + arc.centroid(D) + ")"; }) .attr("text-anchor", "middle") .attr("font-size", "1.5em") .testo(funzione(D) { return d.data; });
</script> </corpo> </html>
Produzione: Assomiglia a questo:
Esempio 2: crear un gráfico de barras animado
<!DOCTYPE html>
<html>
<testa>
<script type="text/javascript" src="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></script>
</testa>
<corpo>
<div class="container">
<h2>Animated Bar Chart</h2>
<div id="chart"></Div>
</Div>
<script>
var bardata = [];
per (var i=0; io<50; i++){
bardata.push(Math.round(Math.random()*30))
}
bardata.sort(function compareNumbers(un,B){
return a-b;
})
var margin = { superiore: 30, Giusto: 30, parte inferiore: 40, sinistra: 50}
var height = 400 - margin.top - margin.bottom,
larghezza = 600 - margin.right - margin.left,
barWidth = 50,
barOffset = 5;
var tempColor;
var tooltip = d3.select('body').aggiungere('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)
var yScale = d3.scale.linear()
.dominio([0, d3.max(bardata)])
.gamma([0, altezza])
var xScale = d3.scale.ordinal()
.dominio(d3.range(0,bardata.length))
.rangeBands([0,larghezza], .3)
var color = d3.scale.linear()
.dominio([0, bardata.length*.63, bardata.length])
.gamma(['#ffb832','#c61c6f','#d33682'])
var myChart = d3.select('#chart').aggiungere('svg')
.style('background', '#e7e0cb')
.attr('width', larghezza + margin.left + margin.right)
.attr('height', altezza + margin.top + margin.bottom)
.aggiungere('g')
.attr('transform','translate(' + margin.left+','+ margin.top + ')')
.selectAll('rect')
.dati(bardata)
.accedere()
.aggiungere('rect')
.style('fill', funzione(D,io){
return color(io);
})
.attr('width', xScale.rangeBand())
.attr('x', funzione(D,io){
return xScale(io);
})
.attr('height', 0)
.attr('y', altezza)
.Su('mouseover', funzione(D){
tooltip.transition()
.style('opacity', 0.9)
tooltip.html(D)
.style('left', (d3.event.pageX - 35)+'px')
.style('top', (d3.event.pageY - 40)+'px')
tempColor = this.style.fill;
d3.select(this)
.style('opacity', .5)
.style('fill', 'yellow')
})
.Su('mouseout', funzione(D){
d3.select(this)
.style('opacity', 1)
.style('fill', tempColor)
})
myChart.transition()
.attr('height', funzione(D){
return yScale(D);
})
.attr('y', funzione(D){
return height - yScale(D);
})
.delay(funzione(D,io){
return i*20;
})
.duration(5000)
.ease('elastic')
var vGuideScale = d3.scale.linear()
.dominio([0, d3.max(bardata)])
.gamma([altezza, 0])
var vAxis = d3.svg.axis()
.scala(vGuideScale)
.orient('left')
.Zecche(10)
var vGuide = d3.select('svg').aggiungere('g')
vAxis(vGuide)
vGuide.attr('transform','translate('+margin.left+',' + margin.top + ')')
vGuide.selectAll('percorsi')
.style({fill: 'none', stroke: '#000'})
vGuide.selectAll('line')
.style({stroke: '#000'})
var hAxis = d3.svg.axis()
.scala(xScale)
.orient('bottom')
.tickValues(xScale.domain().filtro(funzione(D,io){
Restituzione !(io % (bardata.length/5));
}))
var hGuide = d3.select('svg').aggiungere('g')
hAxis(hGuide)
hGuide.attr('transform', 'translate('+margin.left+',' + (altezza + margin.top) + ')')
hGuide.selectAll('percorsi')
.style({fill: 'none', stroke: '#000'})
hGuide.selectAll('line')
.style({stroke: '#000'})
</script>
</corpo>
</html>
Produzione: è grafico a barreIl grafico a barre è una rappresentazione visiva dei dati che utilizza barre rettangolari per mostrare confronti tra diverse categorie. Ogni barra rappresenta un valore e la sua lunghezza è proporzionale ad esso. Questo tipo di grafico è utile per visualizzare e analizzare le tendenze, facilitare l'interpretazione delle informazioni quantitative. È ampiamente utilizzato in varie discipline, come le statistiche, Marketing e ricerca, Grazie alla sua semplicità ed efficacia.... se parece a esto: Haga clic aquí
Esempio 3: crear un esquema de mapa simple
He demostrado este ejemplo usando el mapa del vecindario de Boston. La idea es comprender los argumentos de la elaboración de mapas, sin sumergirse en cosas sofisticadas.
<html>
<testa>
<titolo>Basic D3 map</titolo>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="neighborhoods.js"></script>
</testa>
<corpo>
<script>
var width = 700,
altezza = 580;
var svg = d3.select( "corpo" )
.aggiungere( "svg" )
.attr( "larghezza", larghezza )
.attr( "altezza", altezza );
var g = svg.append( "G" );
var albersProjection = d3.geo.albers()
.scala( 190000 )
.ruotare( [71.057,0] )
.centro( [0, 42.313] )
.translate( [larghezza/2, altezza/2] );
var geoPath = d3.geo.path()
.proiezione( albersProjection );
g.selectAll( "il percorso" )
.dati( neighborhoods_json.features )
.accedere()
.aggiungere( "il percorso" )
.attr( "fill", "#ccc" )
.attr( "D", geoPath );
</script>
</corpo>
</html>
Produzione: Questo è lo schema della mappa del quartiere di Boston:
Questi esempi servono solo a stuzzicare l'appetito. Il vero gioco inizia con le mappe geografiche animate. Una volta che ti senti a tuo agio nel creare queste visualizzazioni elementari, passa al livello successivo. Per le mappe, d3 funziona meglio con i formati geojson e topojson. Geojson è il file di dati geografici predefinito. Ma, Topojson è considerato più veloce ed è in grado di caricare grandi insiemi di dati in dimensioni ridotte (dati compressi).
Altre risorse utili
Ecco alcune altre risorse utili che potrebbero esserti utili:
- Repository Github dei tutorial di d3.js
- Completa il corso Udacity su d3.js
- Il miglior tutorial su Youtube su d3.js
- Sito web ufficiale di D3
- Consigli e trucchi di D3: Ebook gratuito
Comunque, Se trovi D3 difficile da imparare, Non esitare a condividere i tuoi problemi nella sezione commenti qui sotto.
