---
# System prepended metadata

title: OER - Diagramme
tags: [Projekt OERit]

---

# 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/

``` html
<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

``` ascii

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

```fretboard
-oO-*-
--o-o-
-o-oo-
-o-oO-
-oo-o-
-*O-o-
```


## Vega-Lite

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

```vega
{
  "$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?
```vega
{
  "$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
# 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  | + |


