📝 Categorise diagram types in tiles

cusyio · Jan 12, 2024 · fdc3526 · fdc3526
1 parent ba9b0e3
commit fdc3526
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 12 deletions.
diff --git a/docs/conf.py b/docs/conf.py
@@ -33,6 +33,7 @@
     "sphinx.ext.graphviz",
     "sphinx.ext.todo",
     "sphinxcontrib.cairosvgconverter",
+    "sphinx_design",
 ]
 
 # Add any paths that contain templates here, relative to this directory.

diff --git a/docs/viz/index.rst b/docs/viz/index.rst
@@ -9,8 +9,8 @@ Daten mit schönen und zugänglichen Visualisierungen erzählen.
     :titlesonly:
     :maxdepth: 0
 
-    diagram-anatomy
     types/index
+    diagram-anatomy
     colors
     axes-and-labels
     legends

diff --git a/docs/viz/types/bar-charts.rst b/docs/viz/types/bar-charts.rst
@@ -11,6 +11,8 @@ vergleichen oder Trends im Zeitverlauf anzuzeigen.
 .. figure:: bar-timeseries.png
    :alt: Einfaches Balkendiagramm mit Zeitreihen
 
+.. _grouped-bar-charts:
+
 Gruppierte Balkendiagramme
 --------------------------
 
@@ -20,6 +22,8 @@ Kategorien hinweg zu vergleichen.
 .. figure:: bar-grouped-discrete.png
    :alt: Gruppierte Balken mit diskreten Werten
 
+.. _stacked-bar:
+
 Gestapelte Balkendiagramme
 --------------------------
 
@@ -32,6 +36,8 @@ zur Gesamtsumme.
 .. figure:: bar-stacked-timeseries.png
    :alt: Gestapeltes Balkendiagramm für Zeitreihen
 
+.. _horizontal-bar-charts:
+
 Horizontale Balkendiagramme
 ---------------------------
 

diff --git a/docs/viz/types/boxplot.png b/docs/viz/types/boxplot.png
diff --git a/docs/viz/types/graph-flowcharts.rst b/docs/viz/types/graph-flowcharts.rst
@@ -4,6 +4,8 @@ Graphen und Flussdiagramme
 Graphen
 -------
 
+.. _tree-diagram:
+
 Baumdiagramme
 ~~~~~~~~~~~~~
 
@@ -33,6 +35,8 @@ Kumulative Flussdiagramme
 Zustandsübergangsdiagramme
     zur grafischen Darstellung endlicher Automaten
 
+.. _alluvial-diagram:
+
 .. figure:: flowchart.png
    :alt: Alluviales Diagramm
 

diff --git a/docs/viz/types/index.rst b/docs/viz/types/index.rst
@@ -1,20 +1,171 @@
 Diagrammtypen
 =============
 
-Identifiziert zunächst den Zweck der Visualisierung, i.B. Vergleiche, Trends
-oder Anteile, und wählt anschließend einen der folgenden Diagrammtypen aus:
+Bestimmt zunächst den Zweck der Visualisierung und wählt dann den geeigneten
+Diagrammtyp.
 
 .. seealso::
    * `Visual Vocabulary – Designing with data
      <https://ft-interactive.github.io/visual-vocabulary/>`_
 
+Vergleiche
+----------
+
+.. grid:: 3
+
+   .. grid-item-card:: Balkendiagramm
+
+      .. image:: bar-discrete.png
+         :alt: Diskretes Balkendiagramm
+         :target: bar-charts.html
+
+   .. grid-item-card:: Gruppiertes Balkendiagramm
+
+        .. image:: bar-grouped-discrete.png
+           :alt: Gruppiertes Balkendiagramm
+           :target: bar-charts.html#grouped-bar-charts
+
+   .. grid-item-card:: Horizontales Balkendiagramm
+
+        .. image:: bar-horizontal-discrete.png
+           :alt: Horizontales Balkendiagramm
+           :target: bar-charts.html#horizontal-bar-charts
+
+   .. grid-item-card:: Blasendiagramm
+
+        .. image:: bubble-chart.png
+           :alt: Blasendiagramm
+           :target: scatter-bubble-charts.html#bubble-charts
+
+Trends
+------
+
+.. grid:: 3
+
+   .. grid-item-card:: Liniendiagramm
+
+      .. image:: line-chart-discrete.png
+         :alt: Diskretes Balkendiagramm
+         :target: line-area-charts.html#line-charts
+
+   .. grid-item-card:: Flächendiagramm
+
+      .. image:: area-chart-discrete.png
+         :alt: Flächendiagramm
+         :target: line-area-charts.html#area-charts
+
+   .. grid-item-card:: Boxplot
+
+      .. image:: boxplot.png
+         :alt: Boxplot
+         :target: line-area-charts.html#boxplots
+
+Teil-zu-Ganzes
+--------------
+
+.. grid:: 3
+
+   .. grid-item-card:: Ringdiagramm
+
+      .. image:: donut.png
+         :alt: Ringdiagramm
+         :target: piecharts.html#donut
+
+   .. grid-item-card:: Kreisdiagramm
+
+      .. image:: pie.png
+         :alt: Kreisdiagramm
+         :target: piecharts.html#pie
+
+   .. grid-item-card:: Gestapeltes Balkendiagramm
+
+      .. image:: bar-stacked-discrete.png
+         :alt: Gestapeltes Balkendiagramm
+         :target: bar-charts.html#stacked-bar
+
+   .. grid-item-card:: Gestapeltes Flächendiagramm
+
+      .. image:: area-chart-discrete.png
+         :alt: Gestapeltes Flächendiagramm
+         :target: line-area-charts.html#stacked-area
+
+   .. grid-item-card:: Halbkreisförmiges Ringdiagramm
+
+      .. image:: gauge-chart.png
+         :alt: Halbkreisförmiges Ringdiagramm
+         :target: piecharts.html#gauge
+
+   .. grid-item-card:: Tree Map
+
+      .. image:: treemap.png
+         :alt: Tree Map
+         :target: maps.html#tree-map
+
+Korrelationen
+-------------
+
+.. grid:: 3
+
+   .. grid-item-card:: Streudiagramm
+
+      .. image:: scatter-discrete.png
+         :alt: Streudiagramm
+         :target: scatter-bubble-charts.html#scatter
+
+   .. grid-item-card:: Heatmap
+
+      .. image:: heatmap.png
+         :alt: Heatmap
+         :target: maps.html#heatmap
+
+Verbindungen
+------------
+
+.. grid:: 3
+
+   .. grid-item-card:: Alluvial-Diagramm
+
+      .. image:: flowchart.png
+         :alt: Alluvial-Diagramm
+         :target: graph-flowcharts.html#alluvial-diagram
+
+   .. grid-item-card:: Baumdiagramm
+
+      .. image:: treediagram.png
+         :alt: Baumdiagramm
+         :target: graph-flowcharts.html#tree-diagram
+
+Geodaten
+--------
+
+.. grid:: 3
+
+   .. grid-item-card:: Choroplethenkarte
+
+      .. image:: map-choropleth.png
+         :alt: Choroplethenkarte
+         :target: maps.html#choropleth
+
+   .. grid-item-card:: Symbole für Proportionen
+
+      .. image:: map-proportion.png
+         :alt: Symbole für Proportionen
+         :target: maps.html#proportional-symbol
+
+   .. grid-item-card:: Verbindungskartee
+
+      .. image:: map-connecting.png
+         :alt: Verbindungskartee
+         :target: maps.html#verbindungskarten
+
 .. toctree::
-    :titlesonly:
-    :maxdepth: 0
-
-    bar-charts
-    line-area-charts
-    piecharts
-    scatter-bubble-charts
-    graph-flowcharts
-    maps
+   :hidden:
+   :titlesonly:
+   :maxdepth: 0
+
+   bar-charts
+   line-area-charts
+   piecharts
+   scatter-bubble-charts
+   graph-flowcharts
+   maps
diff --git a/docs/viz/types/line-area-charts.rst b/docs/viz/types/line-area-charts.rst
@@ -1,6 +1,8 @@
 Linien- und Flächendiagramme
 ============================
 
+.. _line-charts:
+
 Liniendiagramme
 ---------------
 
@@ -20,6 +22,8 @@ anzeigen und mehrere Datensätze vergleichen.
 .. figure:: line-curved-timeseries.png
    :alt: Liniendiagramm mit geschwungenen Kurven für Zeitreihen
 
+.. _area-charts:
+
 Flächendiagramme
 ----------------
 
@@ -29,6 +33,8 @@ sind mit Farben oder Mustern gefüllt.
 .. figure:: area-chart-discrete.png
    :alt: Flächendiagramm für diskrete Werte
 
+.. _stacked-area:
+
 Gestapelte Flächendiagramm
 --------------------------
 

diff --git a/docs/viz/types/maps.rst b/docs/viz/types/maps.rst
@@ -1,6 +1,8 @@
 Karten
 ======
 
+.. _heatmap:
+
 Heatmaps
 --------
 
@@ -10,6 +12,8 @@ einzelne in einer Matrix enthaltene Werte als Farben dargestellt werden.
 .. figure:: heatmap.png
    :alt: Spitzentemperatur über die Zeit
 
+.. _tree-map:
+
 Tree Maps
 ---------
 
@@ -18,9 +22,14 @@ Strukturen mit ineinander verschachtelten Rechtecken. Damit können anschaulich
 Größenverhältnisse dargestellt werden, indem die Fläche der Rechtecke
 proportional zur Datenmenge dargestellt wird.
 
+.. figure:: treemap.png
+   :alt: Treemap
+
 Geographische Karten mit Überlagerungen
 ---------------------------------------
 
+.. _choropleth:
+
 Choroplethenkarten
 ~~~~~~~~~~~~~~~~~~
 
@@ -33,6 +42,8 @@ einer Eigenschaft oder Menge in diesen Bereichen anzugeben.
 
    Beispiel einer Choroplethenkarte
 
+.. _proportional-symbol:
+
 Symbole für Proportionen
 ~~~~~~~~~~~~~~~~~~~~~~~~
 
@@ -45,6 +56,8 @@ Kreisfläche proportional zu ihrem Wert im Datensatz ist.
 
    Beispiel eines proportionalen Symbols
 
+.. _connecting-lines:
+
 Verbindungskarten
 ~~~~~~~~~~~~~~~~~
 

diff --git a/docs/viz/types/piecharts.rst b/docs/viz/types/piecharts.rst
@@ -1,18 +1,24 @@
 Kreis- und Ringdiagramme
 ========================
 
+.. _pie:
+
 Kreisdiagramm
 -------------
 
 .. figure:: pie.png
    :alt: Kreisdiagramm
 
+.. _donut:
+
 Ringdiagramm
 ------------
 
 .. figure:: donut.png
    :alt: Ringdiagramm
 
+.. _gauge:
+
 Halbkreisförmiges Ringdiagramm
 ------------------------------
 

diff --git a/docs/viz/types/scatter-bubble-charts.rst b/docs/viz/types/scatter-bubble-charts.rst
@@ -1,6 +1,8 @@
 Streu- und Blasendiagramme
 ==========================
 
+.. _scatter:
+
 Streudiagramme
 --------------
 
@@ -10,6 +12,8 @@ an einer beliebigen Stelle entlang einer Skala zu zeichnen.
 .. figure:: scatter-timeseries.png
 .. figure:: scatter-discrete.png
 
+.. _bubble-charts:
+
 Blasendiagramme
 ---------------
 

diff --git a/docs/viz/types/treemap.png b/docs/viz/types/treemap.png