Diagrammtypen
=============

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:: Verbindungskarte

      .. image:: map-connecting.png
         :alt: Verbindungskarte
         :target: maps.html#verbindungskarten

.. toctree::
   :hidden:
   :titlesonly:
   :maxdepth: 0

   bar-charts
   line-area-charts
   piecharts
   scatter-bubble-charts
   graph-flowcharts
   maps