add some articles

2025-12-21 21:22:22 +00:00 · 2024-12-23 21:11:10 +02:00
parent cf74850db2
commit 2db251a0a4
12 changed files with 1149 additions and 35 deletions
--- a/content/posts/vega-altair-hugo-shortcodes.md
+++ b/content/posts/vega-altair-hugo-shortcodes.md
@@ -0,0 +1,145 @@
+---
+title: Додавання Vega-Lite візуалізацій в Hugo за допомогою Shortcodes
+date:  2024-07-23
+draft: false
+tags:
+  - Dataviz
+  - Hugo
+languages:
+  - Altair
+  - Vega-Lite
+  - Hugo
+
+load_vega: true
+---
+
+
+Код специфікації vega-lite, що треба додати: 
+```json
+
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.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", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
+    "y": {"field": "b", "type": "quantitative"}
+  }
+}
+
+
+```
+
+
+Замість ручного додавання скриптів та ембеддингу як в [туторіалі](https://vega.github.io/vega-lite/usage/embed.html), є можливість підійти трохи гнучкіше і завантажувати vega-lite бібліотеки лише на тих сторінках на яких вони потрібні, а також параметризувати деякі із штук за замовчуванням:
+
+
+```html
+<!-- Create a unique ID for the div where the Vega-Lite visualization will be rendered -->
+<div class="vegaVis" id="{{ .Get "id" | default "vega-lite-vis" }}"></div>
+<script>
+  const spec = {{ .Inner | safeJS }};
+  spec['width'] =  spec['width']? spec['width'] : {{ .Get "width" | default 700}};
+  spec['height'] = spec['height']? spec['height'] : {{ .Get "height" | default 300}};
+  vegaEmbed('#{{ .Get "id" | default "vega-lite-vis" }}', spec, {"actions": false}).catch(console.error);
+
+</script>
+
+```
+
+
+
+Використання (прибрати пробіл до/після `< >`, які я додав щоб воно не рендерилось): 
+
+
+```
+{{ < vega-lite id="unique-vis-id-1" actions="true"> }}
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.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",
+  "width": 300,
+  "encoding": {
+    "x": {"field": "a", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
+    "y": {"field": "b", "type": "quantitative"}
+  }
+}
+{{ < /vega-lite > }}
+```
+
+Результат: 
+{{< vega-lite id="unique-vis-id-1" >}}
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.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",
+  "width": 300,
+  "encoding": {
+    "x": {"field": "a", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
+    "y": {"field": "b", "type": "quantitative"}
+  }
+}
+{{< /vega-lite >}}
+
+
+{{< vega-lite id="entso-e" dataUrl="https://github.com/olehomelchenko/ua-entso-e-transfers/raw/main/output.json">}}
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "description": "Daily import and export visualization",
+    "data": {
+        "url": "https://github.com/olehomelchenko/ua-entso-e-transfers/raw/main/output.json"
+    },
+    "transform": [
+        { "calculate": "0-datum.Export_from_UA", "as": "Export" },
+        { "calculate": "datum.Import_to_UA", "as": "Import" }
+    ],
+    "width": 800,
+    "layer": [
+        {
+            "mark": "bar",
+            "encoding": {
+                "x": { "field": "Date", "type": "temporal", "title": "Date", "timeUnit": "yearmonthdate" },
+                "y": { "field": "Import", "type": "quantitative", "title": "MW", "aggregate": "sum" },
+                "color": { "value": "blue" },
+                "tooltip": [
+                    { "field": "Date", "type": "temporal", "title": "Date",  "timeUnit": "yearmonthdate" },
+                    { "field": "Import", "type": "quantitative", "title": "Import to UA (MW)", "aggregate": "sum" }
+                ]
+            }
+        },
+        {
+            "mark": "bar",
+            "encoding": {
+                "x": { "field": "Date", "type": "temporal" ,  "timeUnit": "yearmonthdate"},
+                "y": { "field": "Export", "type": "quantitative", "aggregate": "sum" },
+                "color": { "value": "red" },
+                "tooltip": [
+                    { "field": "Date", "type": "temporal", "title": "Date",  "timeUnit": "yearmonthdate" },
+                    { "field": "Export", "type": "quantitative", "title": "Export from UA (MW)", "aggregate": "sum" }
+                ]
+            }
+        }
+    ]
+}
+{{< /vega-lite >}}