Skip to content
meteoby AzohraDocs

Render a first Meteogram

The @azohra/meteo.briefing package ships ESM types and requires no DOM. This example reads a profile from disk, keeping loading policy separate from rendering. This is what it produces:

The chart and key this page's code produces A complete teaching Meteogram and the key derived from its final scene, exactly as the page's twelve-line example serializes them. Very unstableUnstableConditional strongConditionalNear neutralStableInvertedStrong inversion

  1. Install the package:

    Terminal window
    pnpm add @azohra/meteo.briefing

  2. Validate the untrusted JSON, build a scene, and serialize the chart and its key:

    render-meteogram.ts
    import { readFileSync, writeFileSync } from "node:fs";
    import { parseSiteForecast } from "@azohra/meteo.briefing/contract";
    import {
      buildKeySpec,
      buildMeteogramScene,
      renderKeySvg,
      renderMeteogramSvg,
    } from "@azohra/meteo.briefing/meteogram";
    

    const raw: unknown = JSON.parse(readFileSync("./profile.json", "utf8"));
    const profile = parseSiteForecast(raw);
    if (!profile) throw new Error("unsupported or invalid profile");
    

    const timeZone = profile.site.timeZone;
    if (!timeZone) throw new Error("older profile needs an explicit IANA timezone");
    const scene = buildMeteogramScene(profile, {
      timeZone,
      // The launch marker is a render input — documents are launch-agnostic.
      // Use site-context.json's measured elevation pick; omit for no marker.
      launch: { elevationM: 1591 },
      widthPx: 960,
      hourLabel: "12h",
    });
    const svg = renderMeteogramSvg(scene, { idPrefix: "club-main" });
    const keySvg = renderKeySvg(buildKeySpec(scene), { idPrefix: "club-main-key" });
    writeFileSync("./meteogram.svg", svg);
    writeFileSync("./meteogram-key.svg", keySvg);

  3. Place both SVGs in the consuming page or build. Each serializer returns a complete <svg> document with the same token authority. Rebuild the scene-derived key whenever controls rebuild the scene.

Note — timezone is explicit presentation input. Profiles store UTC instants. buildMeteogramScene requires the chosen zone, so pass the document’s optional site.timeZone echo or a caller-owned fallback. Never infer it from a name or coordinate.

Load static publications safely

Section titled “Load static publications safely”

This example reads from disk. When the profile instead arrives from independently cached static storage, use loadForecast() from @azohra/meteo.briefing/transport; the transport guide defines its consistent-pair result, stale flag, and discriminated miss.