leestott
cfd74ebbf1
|
4 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 4 weeks ago | |
README.md
Sinnvolle Visualisierungen erstellen
 |
|---|
| Sinnvolle Visualisierungen - Sketchnote von @nitya |
"Wenn man Daten lange genug foltert, gestehen sie alles." -- Ronald Coase
Eine der grundlegenden Fähigkeiten eines Data Scientists ist es, eine sinnvolle Datenvisualisierung zu erstellen, die dabei hilft, Fragen zu beantworten. Bevor Sie Ihre Daten visualisieren, müssen Sie sicherstellen, dass sie, wie in den vorherigen Lektionen, bereinigt und vorbereitet wurden. Danach können Sie entscheiden, wie Sie die Daten am besten präsentieren.
In dieser Lektion werden Sie Folgendes lernen:
- Wie man den richtigen Diagrammtyp auswählt
- Wie man irreführende Diagramme vermeidet
- Wie man mit Farben arbeitet
- Wie man Diagramme für bessere Lesbarkeit gestaltet
- Wie man animierte oder 3D-Diagrammlösungen erstellt
- Wie man kreative Visualisierungen entwickelt
Quiz vor der Lektion
Den richtigen Diagrammtyp auswählen
In den vorherigen Lektionen haben Sie mit Matplotlib und Seaborn verschiedene interessante Datenvisualisierungen erstellt. Im Allgemeinen können Sie mit Hilfe dieser Tabelle den richtigen Diagrammtyp für Ihre Fragestellung auswählen:
| Sie möchten: | Verwenden Sie: |
|---|---|
| Datenverläufe über die Zeit zeigen | Linie |
| Kategorien vergleichen | Balken, Kreis |
| Gesamtsummen vergleichen | Kreis, gestapelter Balken |
| Beziehungen zeigen | Streuung, Linie, Facette, Doppellinie |
| Verteilungen zeigen | Streuung, Histogramm, Boxplot |
| Proportionen zeigen | Kreis, Donut, Waffel |
✅ Je nach Beschaffenheit Ihrer Daten müssen Sie diese möglicherweise von Text in numerische Werte umwandeln, damit ein bestimmtes Diagramm unterstützt wird.
Irreführung vermeiden
Selbst wenn ein Data Scientist sorgfältig den richtigen Diagrammtyp für die richtigen Daten auswählt, gibt es viele Möglichkeiten, wie Daten so dargestellt werden können, dass sie eine bestimmte Aussage unterstützen – oft auf Kosten der Datenintegrität. Es gibt viele Beispiele für irreführende Diagramme und Infografiken!
🎥 Klicken Sie auf das Bild oben, um einen Vortrag über irreführende Diagramme anzusehen.
Dieses Diagramm kehrt die X-Achse um, um das Gegenteil der Wahrheit basierend auf dem Datum darzustellen:
Dieses Diagramm ist noch irreführender, da das Auge nach rechts gezogen wird, um zu schließen, dass die COVID-Fälle in den verschiedenen Bezirken im Laufe der Zeit zurückgegangen sind. Tatsächlich wurden die Daten jedoch so umgeordnet, dass ein irreführender Abwärtstrend entsteht.
Dieses berüchtigte Beispiel verwendet Farbe UND eine umgekehrte Y-Achse, um zu täuschen: Statt zu zeigen, dass die Zahl der Waffentoten nach der Verabschiedung waffenfreundlicher Gesetze gestiegen ist, wird das Auge getäuscht, das Gegenteil zu glauben:
Dieses seltsame Diagramm zeigt, wie Proportionen manipuliert werden können – mit komischem Effekt:
Das Vergleichen von Unvergleichbarem ist ein weiterer fragwürdiger Trick. Es gibt eine wunderbare Website, die sich mit "spurious correlations" beschäftigt und "Fakten" zeigt, die Dinge wie die Scheidungsrate in Maine und den Margarineverbrauch korrelieren. Eine Reddit-Gruppe sammelt auch die hässlichen Anwendungen von Daten.
Es ist wichtig zu verstehen, wie leicht das Auge durch irreführende Diagramme getäuscht werden kann. Selbst wenn die Absicht des Data Scientists gut ist, kann die Wahl eines schlechten Diagrammtyps, wie z. B. eines Kreisdiagramms mit zu vielen Kategorien, irreführend sein.
Farbe
Wie Sie im obigen Diagramm zur "Waffengewalt in Florida" gesehen haben, kann Farbe eine zusätzliche Bedeutungsebene in Diagrammen hinzufügen, insbesondere in solchen, die nicht mit Bibliotheken wie ggplot2 und RColorBrewer erstellt wurden, die verschiedene geprüfte Farbpaletten bieten. Wenn Sie ein Diagramm von Hand erstellen, sollten Sie sich ein wenig mit der Farblehre beschäftigen.
✅ Beachten Sie bei der Gestaltung von Diagrammen, dass Barrierefreiheit ein wichtiger Aspekt der Visualisierung ist. Einige Ihrer Nutzer könnten farbenblind sein – wird Ihr Diagramm für Nutzer mit Sehbehinderungen gut dargestellt?
Seien Sie vorsichtig bei der Auswahl von Farben für Ihr Diagramm, da Farben Bedeutungen vermitteln können, die Sie möglicherweise nicht beabsichtigen. Die "pink ladies" im obigen "Höhen"-Diagramm vermitteln eine deutlich "weibliche" Bedeutung, die zur Absurdität des Diagramms beiträgt.
Während Farbbedeutungen in verschiedenen Teilen der Welt unterschiedlich sein können und je nach Farbton variieren, umfassen allgemeine Bedeutungen:
| Farbe | Bedeutung |
|---|---|
| rot | Macht |
| blau | Vertrauen, Loyalität |
| gelb | Glück, Vorsicht |
| grün | Ökologie, Glück, Neid |
| lila | Freude |
| orange | Lebendigkeit |
Wenn Sie ein Diagramm mit benutzerdefinierten Farben erstellen, stellen Sie sicher, dass Ihre Diagramme sowohl barrierefrei sind als auch die Farben mit der beabsichtigten Bedeutung übereinstimmen.
Gestaltung Ihrer Diagramme für bessere Lesbarkeit
Diagramme sind nicht sinnvoll, wenn sie nicht lesbar sind! Nehmen Sie sich einen Moment Zeit, um die Breite und Höhe Ihres Diagramms so zu gestalten, dass es gut zu Ihren Daten passt. Wenn eine Variable (z. B. alle 50 Bundesstaaten) angezeigt werden muss, stellen Sie sie nach Möglichkeit vertikal auf der Y-Achse dar, um ein horizontal scrollendes Diagramm zu vermeiden.
Beschriften Sie Ihre Achsen, fügen Sie bei Bedarf eine Legende hinzu und bieten Sie Tooltips für ein besseres Verständnis der Daten.
Wenn Ihre Daten textlastig und ausführlich auf der X-Achse sind, können Sie den Text für eine bessere Lesbarkeit schräg stellen. plot3D bietet 3D-Diagramme, wenn Ihre Daten dies unterstützen. Mit dieser Bibliothek können anspruchsvolle Datenvisualisierungen erstellt werden.
Animation und 3D-Diagramme
Einige der besten Datenvisualisierungen heutzutage sind animiert. Shirley Wu hat beeindruckende Visualisierungen mit D3 erstellt, wie z. B. 'film flowers', bei denen jede Blume eine Visualisierung eines Films darstellt. Ein weiteres Beispiel für den Guardian ist 'bussed out', eine interaktive Erfahrung, die Visualisierungen mit Greensock und D3 kombiniert und ein Scrollytelling-Artikel-Format verwendet, um zu zeigen, wie NYC mit seinem Obdachlosenproblem umgeht, indem Menschen aus der Stadt geschickt werden.
"Bussed Out: How America Moves its Homeless" vom Guardian. Visualisierungen von Nadieh Bremer & Shirley Wu
Auch wenn diese Lektion nicht ausreicht, um diese leistungsstarken Visualisierungsbibliotheken im Detail zu lehren, können Sie sich mit D3 in einer Vue.js-App versuchen, indem Sie eine Bibliothek verwenden, um eine Visualisierung des Buches "Gefährliche Liebschaften" als animiertes soziales Netzwerk darzustellen.
"Les Liaisons Dangereuses" ist ein Briefroman, der als eine Reihe von Briefen präsentiert wird. Geschrieben 1782 von Choderlos de Laclos, erzählt er die Geschichte der bösartigen, moralisch bankrotten sozialen Manöver zweier rivalisierender Protagonisten der französischen Aristokratie im späten 18. Jahrhundert, des Vicomte de Valmont und der Marquise de Merteuil. Beide kommen am Ende zu Fall, aber nicht ohne erheblichen sozialen Schaden anzurichten. Der Roman entfaltet sich als eine Reihe von Briefen, die an verschiedene Personen in ihrem Umfeld geschrieben wurden, um Rache zu planen oder einfach Ärger zu machen. Erstellen Sie eine Visualisierung dieser Briefe, um die Hauptakteure der Erzählung visuell zu entdecken.
Sie werden eine Web-App abschließen, die eine animierte Ansicht dieses sozialen Netzwerks anzeigt. Sie verwendet eine Bibliothek, die erstellt wurde, um ein Netzwerk zu visualisieren mit Vue.js und D3. Wenn die App läuft, können Sie die Knoten auf dem Bildschirm verschieben, um die Daten neu anzuordnen.
Projekt: Ein Diagramm zur Darstellung eines Netzwerks mit D3.js erstellen
Dieser Lektionenordner enthält einen
solution-Ordner, in dem Sie das abgeschlossene Projekt als Referenz finden können.
-
Folgen Sie den Anweisungen in der README.md-Datei im Stammverzeichnis des Starter-Ordners. Stellen Sie sicher, dass NPM und Node.js auf Ihrem Computer laufen, bevor Sie die Abhängigkeiten Ihres Projekts installieren.
-
Öffnen Sie den Ordner
starter/src. Dort finden Sie einenassets-Ordner mit einer .json-Datei, die alle Briefe des Romans enthält, nummeriert und mit einer 'to'- und 'from'-Annotation versehen. -
Vervollständigen Sie den Code in
components/Nodes.vue, um die Visualisierung zu aktivieren. Suchen Sie nach der MethodecreateLinks()und fügen Sie die folgende verschachtelte Schleife hinzu.
Durchlaufen Sie das .json-Objekt, um die 'to'- und 'from'-Daten der Briefe zu erfassen, und bauen Sie das links-Objekt auf, damit die Visualisierungsbibliothek es verwenden kann:
//loop through letters
let f = 0;
let t = 0;
for (var i = 0; i < letters.length; i++) {
for (var j = 0; j < characters.length; j++) {
if (characters[j] == letters[i].from) {
f = j;
}
if (characters[j] == letters[i].to) {
t = j;
}
}
this.links.push({ sid: f, tid: t });
}
Führen Sie Ihre App über das Terminal aus (npm run serve) und genießen Sie die Visualisierung!
🚀 Herausforderung
Machen Sie eine Internetrecherche, um irreführende Visualisierungen zu entdecken. Wie täuscht der Autor den Nutzer, und ist dies beabsichtigt? Versuchen Sie, die Visualisierungen zu korrigieren, um zu zeigen, wie sie aussehen sollten.
Quiz nach der Lektion
Überprüfung & Selbststudium
Hier sind einige Artikel über irreführende Datenvisualisierungen:
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
Schauen Sie sich diese interessanten Visualisierungen historischer Objekte und Artefakte an:
Lesen Sie diesen Artikel darüber, wie Animationen Ihre Visualisierungen verbessern können:
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
Aufgabe
Erstellen Sie Ihre eigene benutzerdefinierte Visualisierung
Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.