The avatar for @statistikzh
Statistical Office of the Canton of Zurich
Public
Edited
May 15
Fork of 📈 ZEFIX: Konkurseröffnungen
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof regionSelector = Inputs.radio(region.reverse(), {
label: "Region ändern",
value: "Kanton Zürich"
})
Insert cell
viewof industrySelector = Inputs.select(branche, {
label: "Branche wählen",
value: "Alle Branchen"
})
Insert cell
Insert cell
viewof lineChart = {
const dimensions = lineChartDimensions;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, dimensions.width, dimensions.height])
.attr("aria-hidden", "true")
.style("display", "block");

svg.call(xAxis);

svg.call(yAxis);
svg.call(yAxisLabel);

const updateLines = createLines(svg);

svg.call(createMarker);

return Object.assign(svg.node(), {
update: (...args) => {
updateLines(...args);
}
});
}
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
viewof leuDropdown = htl.html`<leu-dropdown label="Download">
<leu-icon slot="icon" name="download"></leu-icon>
<leu-menu>
<leu-menu-item href="${dataPath}">Daten als CSV herunterladen</leu-menu-item>
<leu-menu-item href="https://www.zh.ch/de/politik-staat/statistik-daten/datenkatalog.html#/datasets/1742@statistisches-amt-kanton-zuerich">Daten im Open-Data-Katalog anzeigen</leu-menu-item>
<leu-menu-item onclick=${() =>
createPNG({
containerId: contentId.id,
padding: "10px",
filename: `ZEFIX_${titel}.png`
})}>Grafik als PNG herunterladen</leu-menu-item>
</leu-dropdown>
`
Insert cell
leuTheme = theme
Insert cell
leuFonts = fonts
Insert cell
leuElements = {
importLeuFromCDN("leu-dropdown.js", leuVersion);
importLeuFromCDN("leu-menu.js", leuVersion);
importLeuFromCDN("leu-menu-item.js", leuVersion);
importLeuFromCDN("leu-icon.js", leuVersion);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/*
* Group by Gebiet and rename properties
*/
selectedRegions = summedData
.filter(
(d) =>
d.location === regionSelector && d.br_abschnitt_red === industrySelector
)
.reduce((groups, d) => {
const group = groups.find((g) => g.year === d.year);

const currentValue = {
value: d.cumsum,
date: d.date
};

if (group) {
group.values.push(currentValue);
group.valuesByYear[currentValue.date] = currentValue.value;
} else {
groups.push({
year: d.year,
values: [currentValue],
valuesByYear: {
[currentValue.date]: currentValue.value
}
});
}

return groups;
}, [])
.map((group) => ({
...group,
values: group.values.sort((a, b) => b.year - a.year)
}))
Insert cell
Insert cell
Insert cell
// getRegionColor = (name) => {
// return colors.year[name];
// }

getRegionColor = (year) => {
return colors[selectedRegions.findIndex((region) => region.year === year)];
}
Insert cell
// getRegionSymbol = (name) => {
// return symbols.year[name];
// }

getRegionSymbol = (year) => {
return symbols?.[selectedRegions.findIndex((r) => r.year === year)];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
localeDeCH = {
const res = await fetch(
"https://cdn.jsdelivr.net/npm/d3-format@3/locale/de-CH.json"
);
const data = await res.json();
return d3.formatLocale(data);
}
Insert cell
valueFormat = (v) => lit.html`${v.toLocaleString("de-CH")}`
Insert cell
dateFormat = (d) => lit.html`${d3.timeFormat("%d.%m.")(d)}`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
contentId = DOM.uid("zhstat-content")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// only the last 5 years are displayed
startTimeRange = 4
Insert cell
Insert cell
fetchedData = d3.csv(dataPath, (d) => ({
...d,
value: Number.parseFloat(d.value),
year: new Date(d.date).getFullYear(),
// make all dates have the same year so that they can use the same time scale.
date: d3.timeParse("%Y-%m-%d")(`${dummyYear}-${d.date.slice(5)}`), //(`${dummyYear}-${d.date.slice(5)}`),
location: d.location === "CH" ? "Schweiz" : "Kanton Zürich"
}))
Insert cell
summedData = tidy(
// Calculation of the cumulative daily values for all years, all industries and the two areas, Switzerland and Canton Zurich
fetchedData.filter((d) => d.year >= yearExtent[1] - startTimeRange),
groupBy(
["location", "br_abschnitt_red", "year"],
mutateWithSummary({ cumsum: cumsum("value") })
)
)
Insert cell
branche = [...new Set(summedData.map((d) => d.br_abschnitt_red))]
Insert cell
Insert cell
titel = "Neueintragungen im Handelsregister"

// {
// const years = [yearExtent[1] - startTimeRange, yearExtent[1]];

// return `Anzahl Neugründungen, ${years.join(" bis ")}`;
// }
Insert cell
untertitel = "Seit Jahresbeginn summierte Tageswerte (kumulierte Tageswerte)" // "Für den Kanton Zürich und die Schweiz kumulierte Tageswerte nach Branchen"
Insert cell
Insert cell
anmerkung = "Seit Jahresbeginn aufsummierte Neueintragungen. Inklusive Fusionen u.ä. Die Zahlen der einzelnen Branchen erscheinen mit drei Monaten Verzögerung, da die Zuordnung Zeit braucht. Branchenklassifikation nach NOGA2008 (Wirtschaftsabschnitte)."
Insert cell
Insert cell
yearExtent = d3.extent(fetchedData, (d) => d.year)
Insert cell
years = [...new Set(d3.map(summedData, (d) => d.date))]
Insert cell
dateExtent = [...new Set(summedData.map((d) => d.date))]
Insert cell
Insert cell
import {
colors as ZHColors,
fonts as ZHFonts
} from "@statistikzh/common-styles"
Insert cell
Insert cell
Insert cell
leuVersion = "^0.9"
Insert cell
Insert cell
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