# Diagramme als OER

[toc]

## Liascriptbasierte Formate

Beispiele (Quelle: https://github.com/LiaScript/Workshop)

### Sankey-Diagramm

<!-- data-type="sankey" -->
| Sankey | A | B | C | D | E |
|:------ |:---:|:---:|:---:|:---:|:---:|
| A | | | | | |
| B | 3 | | | | |
| C | 1 | 1 | | | |
| D | | 1 | 1 | | |
| E | 2 | 1 | 1 | 1 | |

Beispiel Wählerwanderung Landtagswahl Sachsen 2024

<!-- data-type="sankey" -->
| Sankey | SPD | Linke | Grüne | Nichtwähler | CDU |
|:------ |:------:|:------:|:-----:| ----------: | ---: |
| CDU | 18000 | 19000 | 31000 | 78000 | 0 |
| BSW | 0 | 0 | 0 | 0 | 43000|
| AFD | 0 | 0 | 0 | 0 | 44000|

Quelle: [Tagesschau](https://www.tagesschau.de/wahl/archiv/2024-09-01-LT-DE-SN/analyse-wanderung.shtml)

- Negative Werte versucht das Diagramm auszugleichen (geht aber aus Zeichenfläche)

## E-Charts

Beispiele:

- https://echarts.apache.org/examples/en/

<lia-chart option="{
  title: { text: 'Two Value-Axes in Polar' },
  polar: { center: ['50%', '54%'] },
  tooltip: { trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  angleAxis: { type: 'value', startAngle: 0 },
  radiusAxis: { min: 0 },
  series: [{ coordinateSystem: 'polar',
    name: 'line',
    type: 'line',
    showSymbol: false,
    data: (function() {
      const data = [];
      for (let i = 0; i <= 360; i++) {
        let t = (i / 180) * Math.PI;
        let r = Math.sin(2 * t) * Math.cos(2 * t);
        data.push([r, i]);
      }
      return data
    })()
  }],
  animationDuration: 2000
}"></lia-chart>

<!-- data-sortable="false" -->
| Header 1 | <!-- data-sortable="true" --> Header 2 |
| :------- | :------------------------------------- |
| Item 1 | Item 2 |
| Item 5 | Item 6 |
| Item 9 | Item 10 |
| Item 13 | Item 14 |

## ASCII-diagramm

                        +------+
                        |      |
                        |      v
                        |
                        |     (1)
  37           3(7)     |     (3)x          37
+ 15         + 1(5)     |   + (1)x        + 15
---- -->     ------ --> |   ------ -->    ----
  ??           (12)     |     (5)2          52
                |       |                 ====
                +-------+
                  carry

## Fretboard (?)

:::danger
Bei hackMD aktuell nicht korrekt unterstützt
:::

-oO-*-
--o-o-
-o-oo-
-o-oO-
-oo-o-
-*O-o-

## Vega-Lite

:::danger
Bei hackMD aktuell nicht korrekt unterstützt
:::

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

<!-- funktioniert nicht?

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A choropleth map depicting U.S. unemployment rates by county in 2009.",
  "width": 960,
  "height": 500,
  "autosize": "none",

  "data": [
    {
      "name": "unemp",
      "url": "data/unemployment.tsv",
      "format": {"type": "tsv", "parse": "auto"}
    },
    {
      "name": "counties",
      "url": "data/us-10m.json",
      "format": {"type": "topojson", "feature": "counties"},
      "transform": [
        { "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "values": ["rate"] },
        { "type": "filter", "expr": "datum.rate != null" }
      ]
    }
  ],

  "projections": [
    {
      "name": "projection",
      "type": "albersUsa"
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "quantize",
      "domain": [0, 0.15],
      "range": {"scheme": "blues", "count": 7}
    }
  ],

  "legends": [
    {
      "fill": "color",
      "orient": "bottom-right",
      "title": "Unemployment",
      "format": "0.1%"
    }
  ],

  "marks": [
    {
      "type": "shape",
      "from": {"data": "counties"},
      "encode": {
        "enter": { "tooltip": {"signal": "format(datum.rate, '0.1%')"}},
        "update": { "fill": {"scale": "color", "field": "rate"} },
        "hover": { "fill": {"value": "red"} }
      },
      "transform": [
        { "type": "geoshape", "projection": "projection" }
      ]
    }
  ]
}

-->

## plantUML

Beispielsammlungen:

- [Real Worl PlantUML](http://real-world-plantuml.com/)
- [OER-Informatik](https://oer-informatik.de/uml-sequenzdiagramm-plantuml)

Einsetzbar in

- miro.com
- https://github.com/jgraph (draw.io)
- https://www.drawio.com/blog/plantuml
- https://www.drawio.com/blog/plantuml-mindmaps-from-text
- [moodle-Plugin](https://iioo.education/plantuml/) (fraglich)

## Mindmap

# markmap-lib

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap-lib)

## Related

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **inline** ~~text~~ *styles*
- multiline
  text

| Tool | HackMD | Hedgedoc | Liascript |
| -------- | -------- | -------- | --------- |
| Mindmap | + | - | - |
| PlantUML | + | Plugin aktivien | + |
| PlantUML | + | Plugin aktivien | + |