Einführung
Ja gibt es 2 Schlüsseltrends für den digitalen Journalismus, würden diese:
- Mehr Daten über Ihre Kunden werden generiert und erfasst.
- Erhöhung der Bahndurchdringung (oder mobil) zwischen Kunden und der Notwendigkeit, Datengeschichten über das Web zu erzählen.
Hier kommt D3.js ins Spiel.. D3.js ist zum heiligen Gral der interaktiven Datenvisualisierung geworden.
D3.js im Vergleich zu anderen Alternativen
Ich denke, die Popularität von D3.js in der Data-Science-Bruderschaft stimmt nicht mit seinem wahren Potenzial überein. Der Hauptgrund ist, dass Sie andere Fähigkeiten benötigen (als Beispiel, HTML, CSS- und JavaScript-Kenntnisse) als die meisten herkömmlichen Tools für Data Science oder Machine Learning. Zur selben Zeit, Es gibt leicht verfügbare Tools wie QlikView und Tableau, die diese Funktionalität bieten.
Trotz dieses, wenn du Dashboards willst / personalisierte Datengeschichten, die kostengünstig im Web bereitgestellt werden, D3.js ist eines der besten verfügbaren Tools. Und deshalb glauben wir daran, diesen Lernpfad zu schaffen.
Wir haben unten einen Lernpfad für Anfänger entworfen. Wenn Sie es zuerst einschüchternd finden, mach dir keine Sorgen, das ist natürlich. Aber, wenn Sie versprechen, Ihren ersten Schritt in D3.js zu machen, Wir versprechen, dass wir Ihnen ständig helfen werden, die aufeinanderfolgenden Hindernisse zu überwinden.
Notiz: Dieser Lernpfad wurde unter der Annahme entwickelt, dass Sie mit Programmier- und Webentwicklungssprachen noch nicht vertraut sind. (HTML / CSS und JavaScript). Wenn du sie schon kennst, Sie können die entsprechenden Abschnitte überspringen.
Was ist D3.js??
Datengesteuerte Dokumente (D3) ist eine Open-Source-JavaScript-Bibliothek zum Erstellen dynamischer und interaktiver Visualisierungen, die in einem modernen Webbrowser aktiviert sind. Läuft hauptsächlich mit HTML, SVG, CSS und JavaScript. Wurde erstellt von Mike Bostock, Informatiker und Spezialist für Datenvisualisierung (im Bild).
D3.js ist extrem schnell, responsive und unterstützt auch große Datensätze zum Erstellen dynamischer Animationen in Webbrowsern. Eine Sammlung nützlicher Codierungs-Plugins und -Komponenten macht d3-Codes wiederverwendbar.
Tipp für Anfänger: Wenn Sie ein Anfänger sind, kann zwischen Java-Programmiersprache und JavaScript-Skriptsprache verwechselt werden. Sohn 2 absolut unabhängige Sprachen. Java wird hauptsächlich für die Software- und Anwendungsentwicklung verwendet, während JavaScript verwendet wird, um interaktive Webseiten zu erstellen.
Paso 0: Motivation – Warum D3.js lernen??
Ich glaube wirklich an ihn Goldener Kreis erklärt von Simon Sinek. Er sagt, wenn du mit etwas anfängst, beginnen mit “Warum”?
Bevor Sie Ihre Reise antreten, muss eine Antwort auf diese Frage haben:
Warum sollten Sie D3.js lernen??
Ö
Wie wird mir D3.js helfen??
Lass mich dir helfen, deine Antwort zu finden. Sieh dir das an Scott Murray-Gespräch, Autor der interaktiven Datenvisualisierung für das Web, um die wahre Kraft der Erstellung webfähiger Visualisierungen zu verstehen.
5 Beispiele aus der realen Welt
Das ist wichtig. Lassen Sie mich Ihnen einige der Visualisierungen zeigen, die mit d3 erstellt werden. Sie müssen diese Visualisierungen nicht analysieren, aber du bekommst Inspiration und möchtest eine erstellen.
- Festnahme durch die Polizei im Januar 2012 In New York
- Markov-Prozess
- Visuelle Einführung in maschinelles Lernen
- Rennstrecke führt zum Sieg
- Verbindungen zwischen Oscar-Anwärtern
Ich würde Ihnen dringend empfehlen, auf jeder dieser Seiten einige Zeit damit zu verbringen, mit den Elementen auf diesen Seiten zu interagieren. Sie werden beginnen, die Leistungsfähigkeit dessen zu sehen, was D3.js Ihnen bieten kann!!
Durchscrollen Mehr von 600 Beispiele in D3.
Relevanz der Datenvisualisierung
Wenn Sie die obigen Beispiele überprüft haben, Ich bin sicher, dass Sie die Relevanz der Visualisierung der Daten nicht betonen müssen. Sie wissen bereits, wie gut Daten für sich selbst sprechen können. Als Datenwissenschaftler, Ihr wahres Motiv sollte darin bestehen, den Stakeholdern das Modell zu erklären. Die eigentliche Sache liegt in der Präsentation von Daten für nicht-analytische Interessengruppen. Sie wollen keine Zahlen, aber eine schön gestaltete Geschichte mit Zahlen. Wenn Sie diese Aufgabe mit D3 ausführen können, ausgezeichnete Arbeit.
Paso 1: Lernen Sie die Grundlagen: HTML, CSS, SVG, Javascript
Klären Sie zuerst Ihre Programmiergrundlagen. Wenn Sie keine Vorkenntnisse im Programmieren haben, beginnen mit HTML und CSS Verlauf von Codeakademie. Es ist ein interaktiver Kurs und der beste Ausgangspunkt.
Sobald Sie mit HTML und CSS fertig sind, Fahren Sie fort, um die Argumente von . zu lernen Javascript. Sie können den Javascript-Kurs von Codeakademie was ist mehr.
Sie können auch überprüfen Prise der Generalversammlung, um HTML zu lernen, CSS und JavaScript interaktiv. Sobald Sie mit Javascript fertig sind, weiter zu jQuery. Halten Sie sich an Codeakademie ein Mal noch. Es ist ein kurzer Kurs. Aber, sehr nützlich für D3.
Schließlich, du brauchst Skalierbare Vektorgrafiken (SVG). Spielt eine wichtige Rolle bei der Erstellung verschiedener Formen, die in eine d3-Visualisierung eingebettet sind. Dafür, du kannst das verfolgen Lernprogramm die w3schools.
Im Augenblick, sollte in der Lage sein, grundlegende interaktive Webseiten zu erstellen. Jetzt ist es an der Zeit, praktische Erfahrungen zu sammeln.
Teste deine Fähigkeiten: Um Ihr HTML-Wissen zu testen, CSS, Javascript, Mach das Übung um Webprojekte zu erstellen. Dies sollte Ihnen helfen, Vertrauen in die Codierung zu gewinnen.
Zusätzlich: Wenn Sie sich immer noch tief in diese Argumente versenkt fühlen, Nimm das voller Kurs das Freecode-Camp. Wenn Sie alle Niveaus dieses Kurses erfolgreich abgeschlossen haben, Sie sind mehr als bereit, zum nächsten Schritt überzugehen.
Paso 2: descargar, D3.js installieren und ausführen
Jetzt müssen Sie einen Texteditor installieren, in dem Sie codieren können. Das ist ein entscheidender Faktor. Die Auswahl eines guten Texteditors verleiht dem Code einen echten Schub und Spannung. ich benutze, Ich bevorzuge und empfehle Sublime Text. Sind ein Open-Source-Editor, schnell und einfach zu bedienen. Es unterstützt viele nützliche Plugins und Anpassungsoptionen, um das Encoding-Erlebnis erstaunlich zu machen.
Nachdem Sie einen Texteditor installiert haben, Der nächste Schritt besteht darin, die d3.js-Bibliothek herunterzuladen und zu installieren, was auch ganz einfach ist.
Sie können die vollständige d3-Zip-Datei herunterladen von hier. Erstellen Sie einen Ordner auf Ihrem lokalen Computer und entpacken Sie ihn. Sie finden die Javascript-Dateien mit dem Namen d3.js Ja d3.min.js.
So laden Sie die d3-Bibliothek in Ihren Texteditor, du kannst es auf verschiedene Arten machen, entweder von Ihrem lokalen Computer oder von Ihrer Quelle. Vergessen Sie nicht, dieses Skript im Abschnitt hinzuzufügen
:<!--D3 von der Quellwebsite laden--> <script src="https://d3js.org/d3.v3.min.js"></Skript> <!--D3 vom lokalen Computer laden--> <Skripttyp="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"></Skript>
Paso 3: Beginnen Sie mit D3 – erstes Beispiel
Dann, sollte das Kapitel 1b des Kurses von abarbeiten Udacity. Einführung in die D3-Konzepte anhand eines einfachen Beispiels. Sobald Sie ein einfaches Beispiel durchgearbeitet haben, Sie können weitere Details zum Erstellen von Elementen basierend auf Daten anzeigen.
Sie können sich beides ansehen:
- Kapitel 7 – Kapitel 20 von dashingd3 Tutorials; Ö
- Kapitel 4 – Kapitel 17 aus dem Buch von Scott Murray
Beide behandeln verschiedene Aspekte von d3 im Detail, Vorausgesetzt, Sie haben Vorkenntnisse in html, CSS, Javascript.
Paso 4: Übungszeit
In diesem Stadium, sollte praktische Kenntnisse von d3 erworben haben. Sie sollten jetzt mit dem Codieren dieser verschiedenen Sprachen vertraut sein. Lassen Sie uns nun einige grundlegende Visualisierungstechniken üben, die Sie in den vorherigen Schritten gelernt haben..
Die Idee hinter diesen Beispielen ist, Sie zum Üben zu bringen. Überprüfe nicht den Code am Anfang. Probieren Sie es zuerst selbst aus. Nach, Überprüfe die Antwort, wenn du nicht weiterkommst.
Beispiel 1: ein Tortendiagramm erstellen
<!DOCTYPE-html>
<html>
<Kopf>
<Titel>Pfad mit Linie</Titel>
<Skripttyp="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"></Skript>
</Kopf>
<Karosserie>
<Skript>
var-Daten = [20, 50, 80];
var r = 150;
var canvas = d3.select("Karosserie").anhängen("svg")
.attr("Breite", 1500)
.attr("Höhe", 1500);
var color = d3.scale.ordinal()
.Bereich(["Orange", "rot", "Grün"]);
var-Gruppe = canvas.append("g")
.attr("verwandeln", "Übersetzen(200, 200)");
var arc = d3.svg.arc()
.Innenradius(80)
.äußererRadius(R);
var pie = d3.layout.pie()
.Wert ( Funktion(D) { zurück d; });
var arcs = group.selectAll(".Bogen")
.Daten(Kuchen(Daten))
.Eintreten()
.anhängen("g")
.attr("Klasse", "Bogen");
Bögen.anhängen("Weg")
.attr("D", Bogen)
.attr("füllen", Funktion(D) { Farbe zurück(d.daten)});
Bögen.anhängen("Text")
.attr("verwandeln", Funktion(D) { Rückkehr "Übersetzen(" + arc.centroid(D) + ")"; })
.attr("Textanker", "Mitte")
.attr("Schriftgröße", "1.5in")
.Text(Funktion(D) { d.data zurückgeben; });
</Skript> </Karosserie> </html>
Produktion: Sieht das so aus:
Beispiel 2: Erstellen Sie ein animiertes Balkendiagramm
<!DOCTYPE-html>
<html>
<Kopf>
<Skripttyp="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"></Skript>
</Kopf>
<Karosserie>
<div-Klasse="Container">
<h2>Animiertes Balkendiagramm</h2>
<div-ID="Diagramm"></div>
</div>
<Skript>
var bardata = [];
zum (var i = 0; ich<50; ich++){
bardata.push(Mathe.runde(Math.zufällig()*30))
}
bardata.sort(Funktion Zahlen vergleichen(ein,B){
zurück a-b;
})
var-Marge = { oben: 30, rechts: 30, Unterseite: 40, links: 50}
var Höhe = 400 - Margin.top - Marge.unten,
Breite = 600 - Rand.rechts - Rand.links,
barBreite = 50,
barOffset = 5;
var tempColor;
var-Tooltip = d3.select('Karosserie').anhängen('div')
.Stil('Position', 'absolut')
.Stil('Polsterung', '0 10px')
.Stil('Hintergrund', 'Weiß')
.Stil('Opazität', 0)
var yScale = d3.scale.linear()
.Domain([0, d3.max(Bardaten)])
.Bereich([0, Höhe])
var xScale = d3.scale.ordinal()
.Domain(d3.Bereich(0,bardata.length))
.ReichweiteBänder([0,Breite], .3)
var color = d3.scale.linear()
.Domain([0, bardata.length*.63, bardata.length])
.Bereich(['#ffb832','#c61c6f','#d33682'])
var myChart = d3.select('#Diagramm').anhängen('svg')
.Stil('Hintergrund', '#e7e0cb')
.attr('Breite', Breite + Rand.links + Rand.rechts)
.attr('Höhe', Höhe + Margin.top + Marge.unten)
.anhängen('g')
.attr('verwandeln','Übersetzen(' + Rand.links+','+ Marge.top + ')')
.Wählen Sie Alle('recht')
.Daten(Bardaten)
.Eintreten()
.anhängen('recht')
.Stil('füllen', Funktion(D,ich){
Farbe zurück(ich);
})
.attr('Breite', xScale.rangeBand())
.attr('x', Funktion(D,ich){
xScale zurückgeben(ich);
})
.attr('Höhe', 0)
.attr('und', Höhe)
.An('Mouseover', Funktion(D){
Tooltip.Übergang()
.Stil('Opazität', 0.9)
tooltip.html(D)
.Stil('links', (d3.event.pageX - 35)+'px')
.Stil('oben', (d3.event.pageY - 40)+'px')
tempColor = this.style.fill;
d3.wählen(Dies)
.Stil('Opazität', .5)
.Stil('füllen', 'Gelb')
})
.An('ausfahren', Funktion(D){
d3.wählen(Dies)
.Stil('Opazität', 1)
.Stil('füllen', tempColor)
})
myChart.Übergang()
.attr('Höhe', Funktion(D){
yScale zurückgeben(D);
})
.attr('und', Funktion(D){
Rücklaufhöhe - ySkala(D);
})
.verzögern(Funktion(D,ich){
zurück i*20;
})
.Dauer(5000)
.Leichtigkeit('elastisch')
var vGuideScale = d3.scale.linear()
.Domain([0, d3.max(Bardaten)])
.Bereich([Höhe, 0])
var vAxis = d3.svg.axis()
.Skala(vGuide-Skala)
.Orient('links')
.Zecken(10)
var vGuide = d3.select('svg').anhängen('g')
vAchse(vGuide)
vGuide.attr('verwandeln','Übersetzen('+rand.links+',' + Margin.top + ')')
vGuide.selectAll('Weg')
.Stil({füllen: 'keiner', Schlaganfall: '#000'})
vGuide.selectAll('Leitung')
.Stil({Schlaganfall: '#000'})
var hAxis = d3.svg.axis()
.Skala(xSkala)
.Orient('Unterseite')
.tickWerte(xScale.domain().Filter(Funktion(D,ich){
Rückkehr !(ich % (bardata.length/5));
}))
var hGuide = d3.select('svg').anhängen('g')
hAchse(hGuide)
hGuide.attr('verwandeln', 'Übersetzen('+rand.links+',' + (Höhe + Margin.top) + ')')
hGuide.selectAll('Weg')
.Stil({füllen: 'keiner', Schlaganfall: '#000'})
hGuide.selectAll('Leitung')
.Stil({Schlaganfall: '#000'})
</Skript>
</Karosserie>
</html>
Produktion: Dieses Balkendiagramm sieht so aus: Klicke hier
Beispiel 3: Erstellen Sie einen einfachen Kartenumriss
Ich habe dieses Beispiel anhand der Bostoner Nachbarschaftskarte demonstriert. Die Idee ist, die Argumente des Mappings zu verstehen, ohne in schicke Sachen einzutauchen.
<html>
<Kopf>
<Titel>Grundlegende D3-Karte</Titel>
<script src="https://d3js.org/d3.v3.min.js" Zeichensatz="utf-8"></Skript>
<script src="nachbarschaften.js"></Skript>
</Kopf>
<Karosserie>
<Skript>
var Breite = 700,
Höhe = 580;
var svg = d3.select( "Karosserie" )
.anhängen( "svg" )
.attr( "Breite", Breite )
.attr( "Höhe", Höhe );
var g = svg.append( "g" );
var albersProjection = d3.geo.albers()
.Skala( 190000 )
.drehen( [71.057,0] )
.Center( [0, 42.313] )
.Übersetzen( [Breite/2, Höhe/2] );
var geoPath = d3.geo.path()
.Projektion( albersProjektion );
g.Alles auswählen( "Weg" )
.Daten( Nachbarschaften_json.features )
.Eintreten()
.anhängen( "Weg" )
.attr( "füllen", "#ccc" )
.attr( "D", geoPath );
</Skript>
</Karosserie>
</html>
Produktion: Dies ist der Umriss der Bostoner Nachbarschaftskarte:
Diese Beispiele sollen nur Appetit machen. Das eigentliche Spiel beginnt mit animierten geografischen Karten. Sobald Sie mit dem Erstellen dieser elementaren Visualisierungen vertraut sind, gehe zum nächsten Level. für Karten, d3 funktioniert am besten mit Geojson- und Topojson-Formaten. Geojson ist die standardmäßige geografische Datendatei. Aber, topojson gilt als schneller und kann große Datensätze in kleiner Größe laden (komprimierte Daten).
Andere nützliche Ressourcen
Hier sind einige weitere hilfreiche Ressourcen, die Sie möglicherweise hilfreich finden:
- Github-Repository von d3.js-Tutorials
- Schließe den Udacity-Kurs in d3.js ab
- Bestes Youtube-Tutorial zu d3.js
- Offizielle D3 Website
- D3 Tipps und Tricks: kostenloses E-Book
Auch so, wenn Sie D3 schwer zu erlernen finden, Zögern Sie nicht, Ihre Probleme im Kommentarbereich unten zu teilen.
