Vega grafiek documentatie.

Historie

4-2-2024: transform timestamp met grote ‘M’ om foute grefiek te voorkomen; “timestamp”: “utc:’%Y-%M-%d %H:%M:%S'”
24-3-2024: x “timeUnit”: “dayhoursminutes” gewijzigd in “timeUnit”: “datehoursminutes”. Day is weekday, en dat is fout…, transform timestamp terug verandertd naar kleine ‘m’.

24-3-2024: Nieuw Vega Ligth script met

1. Betere teksten voor de lijnen,

2) Parsen met %m ipv %M

3) Timeunit is monthdatehoursminutes ( scale upto minutes anders worden de y waarden uitgeschaald naar uren, en heb je 2 punten op x-as)

29-3-2024: Nieuwe opmaak door Remco, en vriespunt eruit gehaald. Nu is het een vega script geworden!
Zie https://www.aijv.nl/rubensbaan-temperatuur/

Doel

Deze pagina beschrijft de ontwikkeling van de temperatuur grafieken op de website. Deze grafiek bevat de lucht temperatuur en de grond temperatuur op 10cm in de grond.
De data wordt gemeten door Meetjestad.net.
Op de baan staat sensor 2057. Deze levert data op in JSON formaat met de volgende URL:
https://meetjestad.net/data/?type=sensors&ids=2057&format=json&limit=10

De data ziet er als volgt uit:

[{"row": 0,"id":2114,"timestamp":"2023-11-28 09:12:17","firmware_version":255,"longitude":5.38812,"latitude":52.1429,"temperature":13.0625,"humidity":95.4375,"supply":2.99,"battery":4.38,"extra":[62,12,55,12,105]},
{"row": 1,"id":2114,"timestamp":"2023-11-27 17:11:17","firmware_version":255,"longitude":5.38806,"latitude":52.143,"temperature":15.4375,"humidity":93.5625,"supply":2.99,"battery":4.38,"extra":[58,12,54,12,114]}]

Met vega-lite heb ik een grafiek gemaakt:

{
  //
  // Use Vega Ligth, see https://vega.github.io/vega-lite-api/
  //
  "$schema": "https://vega.github.io/schema/vega-lite/v5.16.1.json",
  "title": "Temperatuur Rubensbaan",
  "width": "500",
  "height": "200",
  "data": {
    "url": "https://meetjestad.net/data/?type=sensors&ids=2057&format=json&limit=96",
    "format": {"parse": {"timestamp": "utc:'%Y-%m-%d %H:%M:%S'"}}
  },
  "transform": [{"calculate": "0", "as": "nullijn"},
                {"calculate": "datum.temperature - 5", "as": "grondtemp"},
                {"flatten": ["extra"], "as": ["extra2"]}
               ],
  "repeat": {
    "layer": [
    "temperature",
    "grondtemp",
    "nullijn",
    "extra2"]
  },
  "spec": 
  {
      "mark": {"type": "line"},
      "encoding": {
        "x": {
          "timeUnit": "datehoursminutes",
          "field": "timestamp",
          "title": "Tijd (2 dagen)"
        },
        "y": {
          "field": {"repeat": "layer"},
          "type": "quantitative",
          "title": "Temperatuur",
          "scale": {"zero": false}
        },
        "color": {
          "datum": {"repeat": "layer"},
          "type": "nominal"
        }
    }
  }
}

24-2-2024: Nieuw Vega Ligth script met

Betere teksten voor de lijnen,

Parsen met %m ipv %M

Timeunit is monthdatehoursminutes ( scale upto minutes anders worden de y waarden uitgeschaald naar uren, en heb je 2 punten op x-as)

{
  //
  // Use Vega Ligth, see https://vega.github.io/vega-lite-api/
  //
  "$schema": "https://vega.github.io/schema/vega-lite/v5.16.1.json",
  "title": "Temperatuur Rubensbaan",
  "width": "500",
  "height": "200",
  "data": {
    "url": "https://meetjestad.net/data/?type=sensors&ids=2057&format=json&limit=96",
    "format": {"parse": {"timestamp": "utc:'%Y-%m-%d %H:%M:%S'"}}
  },
  "transform": [{"calculate": "0", "as": "vriespunt"},
                {"calculate": "datum.temperature", "as": "luchttemperatuur"},
                {"calculate": "datum.temperature - 5", "as": "grondtemperatuur"},
                {"flatten": ["extra"], "as": ["extra2"]}
               ],
  "repeat": {
    "layer": [
    "luchttemperatuur",
    "grondtemperatuur",
    "vriespunt"]
  },
  "spec": 
  {
      "mark": {"type": "line"},
      "encoding": {
        "x": {
          "timeUnit": "monthdatehoursminutes",
          "field": "timestamp",
          "title": "Tijd (2 dagen)"
        },
        "y": {
          "field": {"repeat": "layer"},
          "type": "quantitative",
          "title": "Temperatuur",
          "scale": {"zero": false}
        },
        "color": {
          "datum": {"repeat": "layer"},
          "type": "nominal"
        }
    }
  }
}

Maar vega-lite bevat geen funties om een element uit de extra array te halen.

Maar vega heeft daar wel een mogelijkheid voor.

Daarvoor dient de vega-lite code gecompileerd te worden naar Vega, en deze dan verder bewerken met de vega editor.

Met flatten kan dan een indeze meegegeven worden van het array element, en dan middels de index het 4de array element eruit gehaald worden. De transform regel voor Flatten dient dan te vervangen worden door deze drie transforms:

       {
          "type": "flatten",  -- platslaan van de array
          "fields": ["extra"],
          "index": "idx",   -- voeg index idx toe
          "as": ["extra2"]  -- nieuwe field met idx
        },
        {"type": "filter", "expr": "datum[\"idx\"] == 3"},  
         -- filter op 4de array element
        {
          "type": "formula",
          "as": "grondtemperatuur",
          "expr": "datum[\"extra2\"] / 4 -20"
          -- bereken grond temperatuur: grondtemp= extra2 * 0.25 - 20 
        }

In Wordress dient deze pagina bewerkt te worden met de Code editor. En het blok dat gebruikt is een HTML blok.