📝 Rearrange diagram anatomy

docs/themes.rst

@@ -8,8 +8,8 @@ sich dann automatisch an. Lediglich in Ausnahmefällen müssen einzelne
 Komponenten geändert werden.
 
 Das cusy Design-System bietet zwei verschiedene Design-Themen, wie auf der Seite
-:doc:`viz/colors` gezeigt: *Dark* und *Light*. Beide Themen können in CSS
-angegeben werden mit:
+:doc:`viz/diagram-anatomy/colors` gezeigt: *Dark* und *Light*. Beide Themen
+können in CSS angegeben werden mit:
 
 .. code-block:: css
 

docs/viz/diagram-anatomy/aspect-ratios.rst

@@ -0,0 +1,80 @@
+Seitenverhältnisse
+==================
+
+Layout
+------
+
+.. raw:: html
+
+   <iframe title="Where the population of Europe is growing, and where it’s declining " aria-label="Map" id="datawrapper-chart-iUPVd" src="https://datawrapper.dwcdn.net/iUPVd/5/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="585"></iframe>
+
+Wenn der Platz begrenzt ist, können die Anmerkungen unterhalb der Visualisierung
+aufgelistet werden:
+
+.. raw:: html
+
+   <iframe title="Where the population of Europe is growing, and where it’s declining " aria-label="Map" id="datawrapper-chart-iUPVd" src="https://datawrapper.dwcdn.net/iUPVd/5/" scrolling="no" frameborder="0" style="width: 300; border: none;" height="585"></iframe>
+   <script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"])for(var e in a.data["datawrapper-height"]){var t=document.getElementById("datawrapper-chart-"+e)||document.querySelector("iframe[src*='"+e+"']");}}))}();</script>
+
+Liniendiagramme
+---------------
+
+Ein breites Layout verflacht Trends in Zeitreihen:
+
+.. figure:: linechart-wide2x.png
+   :alt: Ein breites und flaches Liniendiagramm mit drei beschrifteten und
+         farblich hervorgehobenen Linien
+
+Ein hohes Layout bewirkt das Gegenteil und betont oder dramatisiert Trends in
+den Daten:
+
+.. figure:: linechart-narrow2x.png
+   :alt: Das gleiche Diagramm wie vorher, aber mit einem schmalen und hohen
+         Layout.
+
+Was ist also ein „gutes“, „richtiges“ oder „ehrliches“ Seitenverhältnis für
+Liniendiagramme? Oft zitiert wird hierfür die sogenannte 45-Grad-Regel: Sie
+besagt, dass die durchschnittliche Neigung der Linien in einem Diagramm 45 Grad
+betragen sollte. Diese Regel geht auf die Studie `The Shape Parameter of a
+Two-Variable Graph <https://www.jstor.org/stable/2288843>`_ zurück. Das Thema
+der Studie war jedoch, wie gut Menschen in der Lage waren, die Neigungen zweier
+Linien in einem Diagramm zu vergleichen. Es ging also nicht darum, Erkenntnisse
+aus einer einzelnen Zeitreihe zu gewinnen oder in einem Liniendiagramm mit
+vielen Zeitreihen das große Ganze zu sehen. Zudem wurden in der Studie keine
+durchschnittlichen Steigungen von weniger als 45 Grad berücksichtigt.
+
+.. figure:: slope-errors.png
+   :alt: Zwei Liniendiagramme mit denselben Daten, wobei das zweite vertikal
+         gestaucht ist.
+
+   Beide Diagramme zeigen die gleichen Daten. Je intensiver das Rot ist, desto
+   größer ist der Fehler beim Vergleich der Steigung eines Chart-Segments mit
+   anderen Segmenten. Ein flacheres Layout führt zu geringeren Fehlern.
+
+Trotz der Unzulänglichkeiten der anfänglichen Studie könnte eine 45-Grad-Regel
+immer noch eine gute Ausgangsbasis für gut lesbare Diagramme sein.
+
+Die Studie `Multi-Scale Banking to 45°
+<http://vis.berkeley.edu/papers/banking/2006-Banking-InfoVis.pdf>`_ zeigte, dass
+bei unterschiedlichen Seitenverhältnissen unterschiedliche Signale in Zeitreihen
+wahrgenommen werden. Unten sind zwei Diagramme zu sehen, die dieselben Daten
+zeigen: die CO₂-Konzentration in einer Messstation auf Hawaii. Die Daten in
+beiden Diagrammen zeigen einen Aufwärtstrend mit jährlichen, saisonalen Zyklen:
+
+.. figure:: co2-square.png
+   :alt: Ein Liniendiagramm der CO₂-Konzentration in der Atmosphäre von 1959 bis
+         1990. Ein jährlicher Zyklus liegt über einen kontinuierlich steigenden
+         Trend.
+
+   Das Diagramm hat ein mehr oder weniger quadratisches Layout. Auf diesem
+   Diagramm kann man den Aufwärtstrend in der Zeitreihe gut erkennen: Der
+   jährliche Anstieg der CO₂-Konzentration beschleunigt sich.
+
+.. figure:: co2-flat.png
+   :alt: Das gleiche Diagramm wie vorher, jedoch in vertikaler Richtung stark
+         komprimiert.
+
+   Das zweite Diagramm hat ein flaches Layout. Der Aufwärtstrend ist weniger
+   sichtbar als im vorigen Diagramm. Dafür wird jedoch etwas anderes deutlicher:
+   Die saisonalen Abnahmen der CO₂-Konzentration sind steiler als die saisonalen
+   Zunahmen.

docs/viz/axes-and-labels.rst → docs/viz/diagram-anatomy/axes-and-labels.rst

@@ -5,6 +5,51 @@ Achsen und Beschriftungen bieten einen kritischen Kontext für Informationen in
 einem Diagramm. Verwendet einfache, leicht verständliche Beschreibungen und
 Metriken, um euer Diagramm und eure Achsen zu kennzeichnen.
 
+.. _z-axis:
+
+z-Achse
+-------
+
+Die z-Achse kann durch verschiedene Techniken simuliert werden:
+
+Ebenen
+~~~~~~
+
+Viele visuelle Designprogramme wie GIMP, Adobe Photoshop und Illustrator
+verwenden die Metapher der Ebenen für die Verwaltung der verschiedenen Elemente
+eines Designs. Ebenen werden jedoch auch in geografischen Informationssystemen
+verwendet:
+
+.. figure:: map_layers.png
+   :alt: Illustration der Ebenen einer Karte
+
+Dabei gibt es einige grundlegende Regeln, wie Elemente der Diagrammanatomie und die Datenpunkte übereinander gestapelt werden sollten:
+
+#. Der gesamte Text sollte sich über allen anderen Ebenen befinden.
+#. Datenmarkierungen (Punkte, Kreise, Balken, Linien, …) sollten über
+   unterstützenden Elementen, wie Gitternetzlinien, liegen.
+#. Wenn sich Datenmarkierungen überlappen können, stellt sicher, dass kleinere
+   Elemente über größere gezeichnet werden.
+
+   Alternativ kann eine leichte Transparenz der überdeckenden Elemente die
+   darunter liegenden Elemente durchscheinen lassen.
+
+Schatten
+::::::::
+
+In Material Design 2 wird die z-Achse mit Schatten simuliert:
+
+.. figure:: shadows.png
+   :alt: Material Design 2: Shadows applied at all levels
+
+   Quelle: `Elevation <https://m3.material.io/styles/elevation/overview#f9947307-4818-4d94-b98a-fa1cb5498eb1>`_
+
+Farbe
+:::::
+
+In Material Design 3 wird für die Simulation der z-Achse hingegen :ref:`Farbe
+<colour-hierarchy>` verwendet.
+
 Beginnend mit Null
 ------------------
 
@@ -48,7 +93,8 @@ Manchmal ist es nützlich, einen Teil der Achse zu überspringen, um Daten an de
 enthalten, wird die gerade Achsenlinie durch eine Sinuslinie ersetzt.
 
 Auf der X-Achse kann die Unterbrechung fließend sein, sollte jedoch 16px nicht
-unterschreiten. Auf der Y-Achse sollte die Distanzunterbrechung exakt 16px betragen.
+unterschreiten. Auf der Y-Achse sollte die Distanzunterbrechung exakt 16px
+betragen.
 
 .. figure:: axislabel-break-3.png
    :alt: Lücke im Datenbalkendiagramm

docs/viz/colors.rst → docs/viz/diagram-anatomy/colors.rst

@@ -1,5 +1,46 @@
+Farbe
+=====
+
+Farbe ist ein starker Gestaltungsmechanismus zur Schaffung einer visuellen
+Hierarchie. Sie kann signalisieren, welches die wichtigsten Elemente in einer
+Datenvisualisierung sind. Ein gängiges Muster ist die Verwendung
+
+#. einer auffälligen Farbe zur Hervorhebung und Kennzeichnung der
+   Datenmarkierungen oder Kategorien, die für die Aussage des Diagramms von
+   größter Bedeutung sind
+#. dezenterer Farben für andere sekundäre Datenmarkierungen oder Kategorien
+#. von Schwarz für die wichtigsten Textelemente, wie den Titel der
+   Visualisierung
+#. von Grau
+
+   * für weniger wichtige Datenmarken, die nur für den Kontext hinzugefügt
+     werden
+   * für unterstützende Diagrammelemente, wie Achsenbeschriftungen und
+     Gitterlinien
+
+.. figure:: colour-hierarchy.png
+   :alt: Farbhierarchie
+
+   Quelle: `Do vaccine mandates actually work?
+   <https://www.economist.com/graphic-detail/2022/01/22/do-vaccine-mandates-actually-work>`_
+
+.. _colour-hierarchy:
+
+Mit Farbe kann auch eine visuelle Hierarchie hergestellt werden. Dies wird
+:abbr:`z.B. (zum Beispiel)` in Material Design 3 verwendet, wobei die Höhe als
+der Abstand zwischen den Komponenten entlang der z-Achse in `dichteunabhängigen
+Pixeln (dps)
+<https://m2.material.io/design/layout/pixel-density.html#density-independence>`_
+gemessen wird:
+
+.. figure:: material-design-3-colour-hierarchy-1.png
+   :alt: Elevation in Material Design 3
+
+   Quelle: `Elevation
+   <https://m3.material.io/styles/elevation/applying-elevation>`_
+
 Farbpaletten
-============
+------------
 
 Die Farbpalette für Datenvisualisierungen ist eine ausgewählte Teilmenge der
 cusy-Design-Farbpalette. Sie wurde entwickelt, um die Zugänglichkeit und

docs/viz/diagram-anatomy.rst → docs/viz/diagram-anatomy/index.rst

@@ -1,8 +1,12 @@
 Aufbau eines Diagramms
 ======================
 
-Die Elemente, aus denen jedes Diagramm besteht, sind so konzipiert, dass sie
-harmonisch funktionieren. Jedes Teil spielt eine wichtige Rolle in der
+Es gibt viele unterschiedliche :doc:`../types/index` für Datenvisualisierungen.
+Die meisten Diagramme haben jedoch viele Elemente gemeinsam. Die richtige
+Anordnung dieser Elemente kann das Design eurer Visualisierung unterstützen.
+
+Die Elemente, aus denen jedes Diagramm besteht, sollten so konzipiert sein, dass
+sie harmonisch funktionieren. Jedes Teil spielt eine wichtige Rolle in der
 Datenkommunikation.
 
 Rechteckige Diagramme
@@ -39,9 +43,11 @@ Legende
     findet ihr in :doc:`legends`.
 
 Achsen
-    Die X-Achse ist horizontal und die Y-Achse ist vertikal. Achsen sollten vor
-    ihrem Hintergrund mit einem Kontrastverhältnis von 3:1 zugänglich sein.
-    Weitere Informationen findet ihr in :doc:`axes-and-labels`.
+    Wenn ein Diagramm `kartesische Koordinaten
+    <https://de.wikipedia.org/wiki/Kartesisches_Koordinatensystem>`_ verwendet,
+    ist die x-Achse die horizontale und die y-Achse die vertikale Achse.
+    Auch eine :ref:`z-axis` lässt sich simulieren. Weitere Informationen findet
+    ihr in :doc:`axes-and-labels`.
 
 Tooltip
     Ein Tooltip ist eine Meldung, die angezeigt wird, wenn sich ein Cursor über
@@ -84,4 +90,14 @@ Leistungskennzahl
    *Insgesamt 450*. Sie kann innerhalb eines Ringdiagramms verwendet
    werden, um eine Gesamtsumme oder die individuelle Anzahl eines Teils bei
    Interaktion anzuzeigen. Dieses Element kann auch unabhängig in
-   :doc:`dashboards` verwendet werden.
+   :doc:`../dashboards` verwendet werden.
+
+.. toctree::
+    :hidden:
+    :titlesonly:
+    :maxdepth: 0
+
+    axes-and-labels
+    legends
+    aspect-ratios
+    colors

docs/viz/index.rst

@@ -29,9 +29,6 @@ Daten mit schönen und zugänglichen Visualisierungen erzählen.
     :maxdepth: 0
 
     structure
+    diagram-anatomy/index
     types/index
-    diagram-anatomy
-    colors
-    axes-and-labels
-    legends
     dashboards