Wie kann ich dieses Diagramm so gestalten (Linienfarben und Anzahl der Linien auswählen), dass es verständlich ist?

Ich entwerfe ein Diagramm für eine Website mit Highcharts . Dieses Diagramm enthält viele Ausbruchskurven (im Grunde kumulative Krankheitsinzidenz im Laufe der Zeit). Der Zweck dieser speziellen Grafik besteht darin, mehrere Kurven schnell und einfach mit der aktuellen Situation eines Beamten des öffentlichen Gesundheitswesens vergleichen zu können (die „Punktschätzung“).

Jede Kurve hat eine Punktzahl (zwischen 0 und 100), die angibt, wie ähnlich sie der Punktschätzung ist. Ich möchte die Top-X-Bewertungskurven anzeigen und sie entsprechend ihrer Bewertung einfärben.

Bei zwei Dingen kann ich mich schwer entscheiden:

  1. Was ist die maximale Anzahl an Kurven, die ich gleichzeitig anzeigen kann?
  2. Wie soll ich die Kurven einfärben, damit sie visuell unterscheidbar sind und die Punktzahlen darstellen?

Dinge, die ich versucht habe:

Verwenden von ColorBrewer zum Auswählen von Farben (dunklere Farbe → höhere Punktzahl):

Geben Sie hier die Bildbeschreibung ein

Machen Sie dickere Linien, um höhere Punktzahlen anzuzeigen:

Geben Sie hier die Bildbeschreibung ein

Keine dieser Optionen ist jedoch besonders gut, da sie die Zeilen nicht entsprechend der Partitur anpassen. Stattdessen werden die Linien kategorisch eingefärbt. Wenn die Punktzahl der höchsten Wertungslinie 100 und die nächsthöchste Wertungslinie 10 ist, unterscheiden sich die Farben nicht um 1/10, wenn dies sinnvoll ist.

Dies führte dazu, dass ich versuchte, Graustufenlinien auf einer linearen Skala anzupassen (z. B. ist eine Punktzahl von 100 vollständig schwarz (#000000) und eine Punktzahl von 50 ist #808080). In der Praxis sind Linien jedoch immer noch nicht wirklich leicht zu unterscheiden:

Geben Sie hier die Bildbeschreibung ein

Hier ist es trotz der Tatsache, dass zwischen der besten und der schlechtesten Wertungslinie 19 Punkte Unterschied liegen, fast unmöglich, sie voneinander zu unterscheiden. Das Ändern der Linienstärke hilft einigen:

Geben Sie hier die Bildbeschreibung ein

Aber wenn ich dann zu viele Kurven hinzufüge, wird es einfach zu unordentlich. Hier ist ein Beispiel (Linienstärke konstant):

Geben Sie hier die Bildbeschreibung ein

Ich brauche natürlich eine Anleitung. Hinter diesem Problem muss Wissenschaft stecken. Wie soll ich diese Grafik gestalten?

Option 1 scheint mir ziemlich gut zu funktionieren, wenn Sie die Farbpalette etwas mehr öffnen, anstatt nur warme Töne zu verwenden. Rot am höchsten, orange als nächstes, grün ... blau am niedrigsten ... usw.
Ich würde gerne, aber ich kenne keinen algorithmischen Weg, dies zu tun. Ich brauche einen Algorithmus, um zu sagen, dass 100% das höchste Rot ist, 78,9% so und so usw. Ich brauche eine genaue Zuordnung. Ich möchte keine kategoriale Zuordnung. Die Farbstärke sollte anhand der Punktzahl bestimmt werden.
Um meinen vorherigen Kommentar klarer zu machen, möchte ich eine deterministische Abbildung, die mir eine Farbe C für eine Punktzahl S liefert. f(S) = C. Der Trick besteht darin, die Funktion f so zu definieren, dass das Farbspektrum visuell sinnvoll ist.
Es hängt wirklich davon ab, was Sie überhaupt mit dem Diagramm zu kommunizieren versuchen. Ich würde vorschlagen, die Bücher von Edward Tufte durchzulesen.
Aber die Bauchreaktion ist, dass Sie versuchen, viel zu viel durch Farben und Strichstärken zu kommunizieren. Kommuniziert die x/y-Achse nicht alles, was Sie kommunizieren müssen?
Die x/y-Achse vermittelt definitiv die wichtigen Dinge, aber da ich mehrere Linien anzeige, möchte ich, dass der Benutzer sie anhand ihrer Punktzahl unterscheiden kann. Die Partitur wird nicht durch eine der Achsen dargestellt.

Antworten (2)

Um dies technisch zu realisieren, bietet jedes anständige Plotprogramm Möglichkeiten, Farbachsen nach Belieben anzupassen. Soweit ich das beurteilen kann, ermöglicht Highcharts dies : Sie setzen Stopps auf Ihrer Farbachse mit Farben, die Sie definieren, und alles andere wird linear zwischen diesen Farben interpoliert. Auf diese Weise können Sie das volle Farbspektrum mit einer „exakten Abbildung“, wie Sie es nennen, nutzen.

Was die Wahl der Farbe angeht, gibt es Dutzende von Farbschemata, die genau für solche Zwecke zur Verfügung stehen, sehen Sie sich zB diese an . Ich kann Ihnen nicht sagen, was für Ihre Anwendung am besten ist, aber hier sind einige Gedanken:

  • Für eine maximale Anzahl unterscheidbarer Farben gehen Sie einmal um das Farbrad herum und von dunkel nach hell, also zB schwarz → dunkelgrün → leicht dunkelblau → leicht hellrot → (hell) gelb → weiß.
  • Denken Sie an Farbenblindheit, insbesondere an Rot-Grün (da es am weitesten verbreitet ist). Das obige Schema tut dies, indem Rot und Grün in Bezug auf die Helligkeit weit entfernt platziert werden.
  • Sie können Ihre Stopps so wählen, dass Unterschiede in einem bestimmten Bereich Ihrer Punktzahl besser sichtbar sind als in anderen. Wenn zum Beispiel die Kurven mit den höchsten Werten am relevantesten und am wichtigsten zu unterscheiden sind, können Sie Ihr Farbschema so anordnen, dass es mehr Unterschiede in diesem Bereich zeigt, dh die Stopps nicht in gleichem Abstand platzieren, sondern so, dass die meisten von ihnen innen sind der Wertebereich, dessen Unterscheidung am wichtigsten ist.

Wie soll ich die Kurven einfärben, damit sie visuell unterscheidbar sind und die Punktzahlen darstellen?

Dies hängt wirklich von Ihren Daten ab und davon, was für die Zuschauer wichtig ist. Die zentrale Frage, die Sie sich stellen müssen, lautet: Sind alle relevanten Informationen gut ersichtlich?

Denken Sie auch daran, die Auswahl der Bereiche Ihrer Abszisse und Ordinate in Bezug auf die wichtigen Daten und nicht in Bezug auf alle Daten zu konzentrieren. Wenn beispielsweise die Außenlinie in Ihrem letzten Beispiel nicht wirklich relevant ist oder der Betrachter nur wissen muss, dass sie weit außerhalb der Skala liegt, sollten Sie Ihre Ordinate bei 250 k stoppen.

Das ist toll! Ich hatte keine Ahnung, dass Highcharts diese Option hat. Ich dachte zunächst, das würde meine Probleme lösen, aber ich habe eine andere Lösung gefunden, die Highcharts tatsächlich ähnlich ist stops. Weitere Informationen finden Sie in meiner Antwort.

@Wrzlprmft hat einen hervorragenden Kommentar abgegeben, der wirklich geholfen hat. Seine Lösung hat mich zwar nicht zu 100 % dorthin gebracht, aber sie hat mich auf den richtigen Weg gebracht.

Diese Web-App ist eine Django-App (Python). Aus diesem Grund habe ich mich entschieden, eine Bibliothek namens spectra zu verwenden . Spectra hat die gleiche Funktionalität wie Highcharts stopsmit linearGradient. Spectra erlaubt mir, dies zu tun:

>>> color_scale = spectra.scale(['red', 'blue']).domain([0, 100])
>>> color = color_scale(39.33)
>>> color.hexcode
'#9b0064'

Das ist genau das, was ich brauche.

Wie kann ich dieses Diagramm so gestalten (Linienfarben und Anzahl der Linien auswählen), dass es verständlich ist?
AntwortenHierDatenschutz-Bestimmungen1y, 0v