Public
Edited
Mar 26
1 star
Insert cell
Insert cell
Insert cell
Insert cell
selectedRegionId
Insert cell
viewof map
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof map = createMapLibre(toggleRegion)
Insert cell
mapUpdate = viewof map.update(selectedRegionId)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
selectedRegion = data.filter((d) => d.code == selectedRegionId)
Insert cell
Insert cell
Insert cell
toggleRegion = (code) => {
setValue(code, viewof selectedRegionId);
}
Insert cell
setValue = (value, input) => {
if (input.value !== value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true }));
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
markerEinmal = svg`<svg width='16' height='19' viewBox='0 0 33 38' xmlns='http://www.w3.org/2000/svg'><circle cx='15' cy='15' r='5.625' fill='white'/><path d="${markerPath}" fill="rgba(51, 153, 0, 0.99)" /></svg>`
Insert cell
markerMehrmals = svg`<svg width='16' height='19' viewBox='0 0 33 38' xmlns='http://www.w3.org/2000/svg'><circle cx='15' cy='15' r='5.625' fill='white'/><path d="${markerPath}" fill="rgba(0, 77, 26, 0.99)" /></svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
device = [...new Set(selectedRegion.map((d) => d.device))][0]
Insert cell
interval = [...new Set(selectedRegion.map((d) => d.intervall))][0]
Insert cell
Insert cell
import { fonts as ZHFonts } from "@statistikzh/common-styles"
Insert cell
Insert cell
Insert cell
lit = import(`https://esm.run/lit-html@3`) // import("lit-html@3.2.1")
Insert cell
maplibregl = require("maplibre-gl@4.1.0")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more