diff --git a/docs/conf.py b/docs/conf.py index a5fbb46..c73e310 100644 --- 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/requirements.txt b/docs/requirements.txt index 2b1f9bc..eb0bf26 100644 --- a/docs/requirements.txt +++ b/docs/requirements.txt @@ -3,3 +3,4 @@ furo nbsphinx sphinxcontrib-svg2pdfconverter +sphinx_design diff --git a/docs/viz/index.rst b/docs/viz/index.rst index beb74e2..9d2ca57 100644 --- 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 index 6cd2bac..b3731fd 100644 --- 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 new file mode 100644 index 0000000..5b3516e Binary files /dev/null and b/docs/viz/types/boxplot.png differ diff --git a/docs/viz/types/graph-flowcharts.rst b/docs/viz/types/graph-flowcharts.rst index ae65f3b..a7d7750 100644 --- 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 index 8248061..a220c07 100644 --- 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 `_ +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 index 2a1b46d..3c3674b 100644 --- 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 index 4cedd41..2f58286 100644 --- 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 index 0f9f286..b2cf417 100644 --- 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 index 50cf5a8..e875162 100644 --- 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 new file mode 100644 index 0000000..4f762e9 Binary files /dev/null and b/docs/viz/types/treemap.png differ