Ungefähr 4,5% der Weltbevölkerung sind farbenblind.
Millionen Menschen weltweit haben nur eine Artwork von Sehbehinderung. Die Zahlen werden erheblich höher, wenn Sie alle Bedingungen berücksichtigen. Es ist jedoch ein selten diskutiertes Thema.
Als Datenprofi möchten Sie, dass niemand Ihre Bilder falsch interpretiert. Sicher, besonders klar zu sein ist mehr Arbeit, aber Sie werden einen anständigen Teil der Bevölkerung glücklicher machen.
Heute erhalten Sie 5 umsetzbare Tipps, um Ihre vorhandenen Visualisierungen zugänglich zu machen.
Konkrete Richtlinien zur Implementierung der Zugänglichkeit in Ihrer Datenvisualisierung
Lassen Sie uns zunächst einige allgemeine Richtlinien durchgehen, die Sie befolgen sollten, wenn Zugänglichkeit hat eine oberste Priorität.
Alles, was unten aufgeführt ist, ist eine kuratierte und erheblich verkürzte Checkliste der A11Y -Projekt. Wenn Sie sich fragen, ist „A11Y“ eine Abkürzung für „Zugänglichkeit“ (11 Buchstaben zwischen „A“ und „Y“).
Wie auch immer, hier ist, worauf Sie achten sollten:
- Verlassen Sie sich nicht auf Farbe, um die Daten zu erklären – Ein anständiger Teil der Bevölkerung ist farbinterblind oder leiden unter einer anderen Sehbehinderung. Muster sind ein Weg zu gehen.
- Wenn Sie Farbe verwenden, gehen Sie mit dunkleren, kontrastischen Tönen -Leichte und geringe kontrastreiche Farben machen es quick unmöglich, visuell zwischen Gruppen in einer Tabelle zu unterscheiden.
- Verstecke keine wichtigen Daten hinter Interaktionen – Hover -Veranstaltungen sind nur auf dem Desktop verfügbar. Die Mehrheit Ihrer Benutzer befindet sich auf Smartphones.
- Verwenden Sie Etiketten und Legenden – Ohne sie weiß der Leser nicht, was die Daten darstellen.
- Daten in klare Erkenntnisse übersetzen – Vereinfachen Sie die Daten so weit wie möglich und noch einige. Sie möchten nicht, dass etwas für die Interpretation offen ist.
- Stellen Sie den Kontext an und erklären Sie die Visualisierung – Wenn machbar, kommentieren Sie Datenpunkte von Interesse und fügen Sie Untertitel/Bildunterschrift hinzu.
- Lassen Sie Benutzer mit Bildschirmlesern im Auge behalten – Personen mit Sehbehinderungen verwenden Bildschirmleser, um Webseiten zu navigieren. Verwenden Sie den Alt -Textual content, um Ihre eingebetteten Diagramme zu beschreiben.
Vor diesem Hintergrund habe ich 5 umsetzbare Optimierungen gefunden, die Sie gerade an Ihre Visualisierungen vornehmen können.
Lassen Sie uns in #1 eintauchen.
1. Verwenden Sie eine kontrastische oder farblich-freundliche Farbpalette
Der einfachste Weg zu verstehen, warum Farbauswahl wichtig ist, besteht darin, zuerst das Falsche zu tun.
Betrachten Sie den folgenden Datensatz:
x = np.array(("New York", "San Francisco", "Los Angeles", "Chicago", "Miami"))
y1 = np.array((50, 63, 40, 68, 35))
y2 = np.array((77, 85, 62, 89, 58))
y3 = np.array((50, 35, 79, 43, 67))
y4 = np.array((59, 62, 33, 77, 72))Es ist ein perfekter Kandidat für ein gestapeltes Bar -Diagramm. Mit anderen Worten, um Workplace-Standorte auf der X-Achse zu zeigen und Mitarbeiter zu stapeln, zählt die Y-Achse.
Stellen Sie sich jetzt vor, Sie möchten wirklich grün sind.
Möglicherweise möchten Sie einzelne Bar -Portionen in verschiedenen Grüntönen färben. Es ist eine schreckliche Praxis (mit Ausnahme einiger monochromatischer Farbpaletten), wie Sie aus den folgenden sehen können:
plt.bar(x, y1, label="HR", coloration="#32a852")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#3ebd61")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#2bc254")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#44c767")
plt.title("(DON'T) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Viele Leute fragen sich, wie ihre Tabelle aussehen würde, wenn sie in einem schwarz-weißen Buch gedruckt würden.
Dieser würde nur geringfügig schlechter aussehen, aber nur, weil er von Anfang an schrecklich aussieht. Die Unterscheidung zwischen Bar -Portionen ist selbst für Menschen ohne Sehbehinderungen eine Herausforderung.
Sie können diese Web site verwenden, um den Kontrast zwischen zwei Farben zu überprüfen.
Lassen Sie es uns mit einer mit hohen kontrastellen Farbpalette beheben.
Benutzerdefinierte Farbpalette mit hoher kontrastischer Farbpalette
Ich werde mit der Annahme fortfahren, dass Sie die Farbe grün mögen.
Frage: Wie können Sie aus einer Farbe eine kontrastreiche Farbpalette erstellen?
Antwort: Beginnen Sie mit einem dunklen Farbton und beenden Sie eine Farbe, die Ihrer Primärfarbe ähnlich ist. In diesem Fall ist Gelbgold ein perfekter Kandidat.
Sie erhalten das Beste aus beiden Welten auf diese Weise. Sie verwenden immer noch Farben, die Sie mögen, und die Farben müssen nicht leichter werden (was den Kontrast verringern würde), wenn Sie die Barsegmente durchlaufen.
In der Praxis läuft dies darauf hinaus, mit dem herumzuspielen coloration Parameter für alle Segmente:
plt.bar(x, y1, label="HR", coloration="#14342B")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#BAB700")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400")
plt.title("(DO) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
So viel einfacher für die Augen.
Vordefinierte Farbpalette Farbblind
Betrachten Sie jedoch die folgenden Szenarien:
- Sie haben nicht die Zeit, mit verschiedenen Farbkombinationen herumzuspielen
- Sie haben Zeit, aber es gibt ungefähr ein Dutzend Kategorien in Ihrem Datensatz (lesen Sie: Dutzend Farben zu finden)
Es gibt eine einfachere Lösung, um Ihr Diagramm -Farbschema in den Augen zu erleichtern und gleichzeitig Menschen mit Sehbehinderungen zu berücksichtigen.
Eine solche Lösung besteht darin, eine farbblindfreundliche Farbpalette zu verwenden.
Die erste Zeile des Snippets zeigt Ihnen, wie:
plt.fashion.use("tableau-colorblind10")
plt.bar(x, y1, label="HR")
plt.bar(x, y2, backside=y1, label="Engineering")
plt.bar(x, y3, backside=y1 + y2, label="Advertising")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales")
plt.title("(DO) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Diese Palette enthält 10 farbblindfreundliche Farben, sodass sie intestine zu Diagrammen mit 10 Gruppen oder weniger passt.
Wenn Sie mehr brauchen, werden Sie Ihre Visualisierungsstrategie vielleicht besser überdenken.
2. Hören Sie auf Farben zu – verwenden Sie stattdessen Muster
Eine weitere gute Möglichkeit, jegliche Artwork von Fehlinterpretation aus Ihren Diagrammen zu entfernen, besteht darin, Muster anstelle von Farben (oder als Ergänzung zu Farben) zu verwenden.
Matplotlib hat 10 Lukenmuster Sie können wählen.
Sie können die Luken weiter anpassen, indem Sie ihre Dichte erhöhen oder mehrere Muster kombinieren. Aber das ist ein Thema für ein anderes Mal.
Um Muster zu implementieren, fügen Sie die hinzu hatch Parameter zu plt.bar(). Das folgende Beispiel beseitigt die Farbe insgesamt durch Einstellung fill=False:
plt.bar(x, y1, label="HR", fill=False, hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", fill=False, hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", fill=False, hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", fill=False, hatch="//")
plt.title("(DO) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Jetzt gibt es keine Möglichkeit, Daten in diesem Diagramm falsch zu interpretieren.
Können Sie Muster mit Farbe mischen?
Wenn Sie das Beste aus beiden Welten wollen, ist Colour + Muster dort, wo es sich befindet.
Sie möchten den Parameter fill = false entfernen und sie mit ändern coloration. Oder kopieren Sie einfach den folgenden Code -Snippet:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.title("(DO) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Dunkle Muster sind in Balkensegmenten deutlich sichtbar, aber das ist möglicherweise nicht immer der Fall.
Der edgecolor Der Parameter steuert die Musterfarbe. Mal sehen, was passiert, nachdem wir es an Weiß gesetzt haben:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*", edgecolor="#FFFFFF")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx", edgecolor="#FFFFFF")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#BAB700", hatch="..", edgecolor="#FFFFFF")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="///", edgecolor="#FFFFFF")
plt.title("(MAYBE) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Das Muster ist sichtbar für HR Und Maschinenbau Abteilungen, aber die beiden an der Spitze sind eine andere Geschichte.
Möglicherweise haben Sie keine Probleme, die Linien im obersten Diagrammsegment zu sehen, sondern in die Schuhe einer Individual mit Sehbehinderungen. Sie sollten immer Ihr Referenzrahmen sein.
Erinnern: Helle Muster funktionieren intestine auf dunklen Hintergründen. Dunkelfarbene Muster funktionieren intestine auf hellen Hintergründen. Entsprechend einstellen.
3.. Überfordert der Benutzer nicht mit den Informationen
Dieses Prinzip geht in zwei Richtungen:
- Setzen Sie nicht zu viele Informationen auf ein einzelnes Diagramm
- Geben Sie nicht zu viele Diagramme nebeneinander, z. B. in Ihren Anwendungen/Dashboards
Beides gleichzeitig ist etwas von einem ultimative Sünde in der Datenvisualisierung.
Beginnen wir zunächst ein paar weitere Abteilungen in den Combine ein.
Die Daten werden schwer zu verwalten Python Pay attention, additionally habe ich mich stattdessen für einen Pandas -Datenframe entschieden:
import pandas as pd
df = pd.DataFrame({
"HR": (50, 63, 40, 68, 35),
"Engineering": (77, 85, 62, 89, 58),
"Advertising": (50, 35, 79, 43, 67),
"Gross sales": (59, 62, 33, 77, 72),
"Buyer Service": (31, 34, 61, 70, 39),
"Distribution": (35, 21, 66, 90, 31),
"Logistics": (50, 54, 13, 71, 32),
"Manufacturing": (22, 51, 54, 28, 40),
"Upkeep": (50, 32, 61, 69, 50),
"High quality Management": (20, 21, 88, 89, 39)
}, index=("New York", "San Francisco", "Los Angeles", "Chicago", "Miami"))
df
Lassen Sie uns nun die farbenblindfreundliche Palette mit der Anzahl der Mitarbeiter professional Ort und der Abteilung als gestapelter Balkendiagramm aufzeichnen. Um die Dinge besonders voll zu machen, habe ich auch Textual content gezählt in die Mischung:
plt.fashion.use("tableau-colorblind10")
ax = df.plot(form="bar", stacked=True)
for container in ax.containers:
ax.bar_label(container, label_type="heart", fontsize=10, coloration="#000000", fontweight="daring")
plt.title("(DON'T) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(title="Division", bbox_to_anchor=(1.05, 1), loc='higher left', ncol=1)
plt.present()
Das ist nur hässlich.
Repair #1 – präsentieren Sie weniger Informationen
Eine Möglichkeit, dieses unausgesagte Chaos zu lösen, besteht darin, dem Benutzer weniger Informationen anzuzeigen.
Zum Beispiel nur zeigen, dass Mitarbeiter in einer Stadt (über die Abteilungen) zählen. Sie können dann a hinzufügen Dropdown -Menü An der Seite des Diagramms, damit der Benutzer den Büroort steuern kann.
Die folgenden Snippet -Angestellten professional Abteilung in Chicago als horizontaler Balkendiagramm:
chicago_data = df.loc("Chicago").sort_values()
bars = plt.barh(chicago_data.index, chicago_data.values, coloration="#60935D", edgecolor="#000000")
for bar in bars:
plt.textual content(bar.get_width() + 2, bar.get_y() + bar.get_height() / 2, f"{int(bar.get_width())}", va="heart", ha="left", fontsize=14, coloration="#000000")
plt.title("(DO) Worker Depend by Division in Chicago", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Depend")
plt.ylabel("Division")
plt.present()
Repair #2 – reorganisieren die Daten neu
Wenn es keine Possibility ist, weniger Informationen zu zeigen, können Sie vielleicht können Sie Übertragen Sie Ihre Daten.
Zum Beispiel haben wir es mit 5 Bürostandorten und 10 Abteilungen zu tun. Das Anzeigen von 10 Spalten anstelle von 10 Barsegmenten ist für die Augen einfacher.
Auf diese Weise zeigen Sie am Ende Bürostandorte als Barsegmente anstelle von Abteilungen:
df_transposed = df.T
df_sorted = df_transposed.loc(df_transposed.sum(axis=1).sort_values().index)
ax = df_sorted.plot(form="barh", width=0.8, edgecolor="#000000", stacked=True)
for container in ax.containers:
ax.bar_label(container, label_type="heart", fontsize=10, coloration="#FFFFFF", fontweight="daring")
plt.title("(DO) Worker Depend Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.present()
Es geht nur darum, das Downside umzufreuen.
Die Tabelle auf Bild 10 ist meilenweit vor der Tabelle auf Bild 8. Es ist eine Tatsache. Niemand kann damit streiten.
4. Geben Sie ausführliche Erklärungen für Daten in Ihren Diagrammen
Sie können Untertitel- und/oder Bildunterschriftenabschnitte Ihres Diagramms nutzen, um zusätzliche Informationen hinzuzufügen.
Dies ist praktisch, wenn Sie mehr Kontext über die Daten bereitstellen, Quellen angeben oder die Hauptpunkte Ihrer Visualisierung zusammenfassen möchten. Der letzte ist am besten für Menschen mit Sehbehinderungen anwendbar.
Das Downside mit Matplotlib ist, dass es es hat keine spezielle Funktion Für Tabellenuntertitel und Untertitel. Sie können Suptitle () verwenden, aber Sie müssen mit X- und Y-Achse-Koordinaten herumspielen.
Hier ist ein Beispiel:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.suptitle("Chart exhibits how the workers are distributed per division and per workplace location.nChicago workplace has essentially the most workers.", x=0.125, y=0.98, ha="left", fontsize=14, fontstyle="italic")
plt.title("Worker Depend Per Location And Division", fontsize=20, fontweight="daring", y=1.15, loc="left")
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Wenn Sie eine Bildunterschrift gegenüber einem Untertitel bevorzugen, haben Sie nur die Änderung der y-Achse-Koordinate in plt.suptitle():
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.suptitle("Chart exhibits how the workers are distributed per division and per workplace location.nChicago workplace has essentially the most workers.", x=0.125, y=0, ha="left", fontsize=14, fontstyle="italic")
plt.title("Worker Depend Per Location And Division", fontsize=20, fontweight="daring", y=1.06, loc="left")
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Alles in allem kann ein Untertitel oder eine Bildunterschrift der entscheidende Faktor sein, wenn Sie Ihre Nachricht an eine Individual mit Sehbehinderungen korrekt erhalten.
Machen Sie es einfach nicht 10 Absätze lang. Ansonsten ist es wieder der 3. Punkt dieses Artikels.
5. Alt -Textual content hinzufügen, wenn Sie Diagramme einbetten
Viele Menschen mit Sehbehinderungen verwenden Bildschirmleser.
Das Downside mit Bildschirmlesern und Diagrammen ist, dass sie einfach nicht koexistieren können. Möglicherweise können sie Textelemente aus dem Diagramm aufnehmen, aber sie können den visuellen Inhalt nicht interpretieren. Wenn Sie additionally Ihre Visualisierungen teilen (z. B. in eine Web site einbetten), müssen Sie Alt -Textual content hinzufügen.
Dies ist ein Absatz, den der Bildschirmleser Ihrem Benutzer vorlegt.
Um demonstrieren, lassen Sie uns die verwenden plt.savefig() Funktion zum Speichern des Diagramms als Bild:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.suptitle("Chart exhibits how the workers are distributed per division and per workplace location.nChicago workplace has essentially the most workers.", x=0.125, y=0, ha="left", fontsize=14, fontstyle="italic")
plt.title("Worker Depend Per Location And Division", fontsize=20, fontweight='daring', y=1.06, loc="left")
plt.xlabel("Workplace Location")
plt.ylabel("Depend")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.savefig("determine.jpg", dpi=300, bbox_inches="tight")Fügen Sie in einem neuen HTML -Dokument eine hinzu <img> Markieren Sie das auf das Bild. Hier sollten Sie Alt -Textual content angeben:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<physique>
<img
fashion="width: 800px;"
src="determine.jpg"
alt="Stacked bar chart. It exhibits how the workers are distributed per division and per workplace location. Chicago workplace has essentially the most workers."
>
</physique>
</html>
Sie können den ALT -Textual content nicht sehen, wenn Sie die HTML -Datei öffnen, aber das liegt daran, dass Sie keinen Bildschirmleser verwenden.
Wenn der Bildschirmleser erkannt wird, wird der ALT -Textual content dem Benutzer automatisch vorgelesen.
Das Beste, was Sie tun können, ist eine Verwendung a Bildschirmleser -Plugin Oder zeigen Sie auf das Bild, das in HTML nicht existiert:
<img
fashion="width: 800px;"
src="doesnotexist.jpg"
alt="Stacked bar chart. It exhibits how the workers are distributed per division and per workplace location. Chicago workplace has essentially the most workers."
>
Jetzt kann das Bild nicht gefunden werden, sodass stattdessen der ALT -Textual content angezeigt wird.
Summieren der Datenvisualisierungsgängigkeit
Und dort haben Sie es – 5 Dinge, die Sie beim Entwerfen von Datenvisualisierungen immer berücksichtigen sollten.
Diese Tipps sind im Allgemeinen hilfreich, sind jedoch von entscheidender Bedeutung, wenn Zugänglichkeit von wesentlicher Bedeutung ist. Und es sollte immer sein. Es erfordert ein bisschen zusätzliche Arbeit von Ihrem Ende, macht jedoch Ihre Ergebnisse für Millionen zusätzlicher Menschen weltweit zugänglich.