The avatar for @statistikzh
Statistical Office of the Canton of Zurich
Public
GAZ - Schulträger
Edited
Apr 1
2 forks
Importers
2
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
gebietTyp = referenceData.label
Insert cell
viewof dataTable = createDataTable({
columnNames: ["Gemeinde", "Trägertyp", selectedRegions[0].label],
// columnNames: ["Gemeinde", selectedYear, ""],
rows: selectedRegions
.slice()
// .sort((a, b) => b.valuesByYear[selectedYear] - a.valuesByYear[selectedYear])
.map((r, index) => {
const regionName = lit.html`<span>
${htmlRegionSymbol(r.code)}${r.gebiet_name}</span>
`;

const value = referenceData.gdeInfo[0].schulgebiet;
const typ = referenceData.typ;

const row = {
cells: [regionName, typ, value], //[regionName, value],
// onpointerenter: () => setValue(r.code, viewof highlightedRegionId),
onpointerleave: () => setValue(null, viewof highlightedRegionId)
};

row.type = "TOGGLE";

return row;
})
})
Insert cell
Insert cell
htmlRegionSymbol = (id) =>
lit.html`<svg style="display: inline-block; aspect-ratio: 1; width: 1em; transform: translateY(2px) scale(1.5); margin-right: .25rem" viewBox="0 0 1 1">${lit.svg`<path transform="translate(0.5 0.5)" fill="#D40053" d="${d3
.symbol()
.size(0.25)
.type(d3.symbolCircle)()}" />`}</svg>`
Insert cell
Insert cell
sync = {
viewof mapView.update({
isSelected: (d) => selectedRegionIds.includes(d.GEBIET_C) && d.ART_C === 17,
isHighlighted: (d) => highlightedRegionId === d.GEBIET_C && d.ART_C === 17,
getSymbol: () => d3.symbol().type(d3.symbolCircle),
getSymbolColor: () => "#D40053"
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Adliswil als default Auswahl
defaultGebiet = "D012"
Insert cell
Insert cell
Insert cell
// viewof highlightedYear = Inputs.input(null)
Insert cell
// viewof selectedYear = Inputs.input(defaultYear)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// maxValueOfYear = d3.max(data.map((r) => r.valuesByYear[selectedYear]))
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
// defaultYear = d3.max(years).getFullYear()
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
import { dataOS as data, legendLabelOS, gemeindenOS } from "06f16eabd96b28b2"
Insert cell
import { Swatches as swatches } from "d4a818dd9bd3a1cf"
Insert cell
import { desc, asc, filter, distinct } from "@pbeshai/tidyjs"
Insert cell
import { fonts as ZHFonts } from "@statistikzh/common-styles"
Insert cell
Insert cell
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