olehomelchenko.com/content/posts/vega-altair-hugo-shortcodes.md

title, date, draft, tags, languages, load_vega

title	date	draft	tags	languages	load_vega
Додавання Vega-Lite візуалізацій в Hugo за допомогою Shortcodes	2024-07-23	false	Dataviz Hugo	Altair Vega-Lite Hugo	true

Код специфікації vega-lite, що треба додати:

{
  "$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"}
  }
}

Замість ручного додавання скриптів та ембеддингу як в туторіалі, є можливість підійти трохи гнучкіше і завантажувати vega-lite бібліотеки лише на тих сторінках на яких вони потрібні, а також параметризувати деякі із штук за замовчуванням:

<!-- 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 >}}