2b:null 2c:["$","title",null,{"children":"📈 ZEFIX: Neugründungen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T55a,wrapper = { leuElements; leuTheme; sync; return render( lit.html`

${titel}

${viewof regionSelector}

${viewof industrySelector}

Neueintragungen

${untertitel}

${metadata}

${viewof lineChartLegend}

Über Jahreszahl fahren, um Jahr in Grafik hervorzuheben.

${viewof lineChartTooltip} ${viewof lineChart}

${anmerkung}

Datenquelle: ${quelle}

${viewof leuDropdown}

`, this ); }32:T539,viewof lineChartTooltip = { const dimensions = lineChartDimensions; const visible = highlightedYear !== null; const year = visible ? highlightedYear : defaultYear; const x = xScale(highlightedYear) + dimensions.margin.left; /* Not all of the selected regions have data for this specific year */ const regions = selectedRegions.filter( (region) => !isNaN(region.valuesByYear[year]) ); // If the tooltip hangs to the right: Highest x value before the tooltip will be cut off const maxXRight = width - tooltipMaxWidth; // If the tooltip hangs to the left: Lowest x value before the tooltip will be cut off const minXLeft = tooltipMaxWidth; const xPos = x > width / 2 ? `${Math.max(minXLeft, x)}px - 100%` : `${Math.min(maxXRight, x)}px`; const dataPoints = regions .sort((a, b) => b.valuesByYear[year] - a.valuesByYear[year]) .map((region, i) => ({ label: region.year, value: isNaN(region.valuesByYear[year]) ? "keine Daten" : valueFormat(region.valuesByYear[year]), symbol: getRegionColor(region.year) })); return createTooltip( { dataPoints: [{ label: "Datum", value: dateFormat(year) }, ...dataPoints], visible, x: `calc(${xPos})`, y: `calc(${dimensions.margin.top}px - 100% - .25rem)` }, this ); }33:T436,xAxis = (svg) => { const dimensions = lineChartDimensions; const axisWidth = xScale.range()[1] - xScale.range()[0]; const pixelsPerTick = 120; const numberOfTicksTarget = Math.max( 1, Math.floor(axisWidth / pixelsPerTick) ); const tickFormat = (date) => date.toLocaleString("de-CH", { month: "short" }); svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${ dimensions.height - dimensions.margin.bottom })` ) .call( d3 .axisBottom(xScale) .ticks(numberOfTicksTarget) .tickSize(8) .tickFormat((d) => tickFormat(d)) ) .call((g) => // Adding gridlines g .selectAll(".tick text") .attr("fill", ZHColors.axis.ticklabel) .attr("y", 16) .style("font-size", responsiveValue("12px", "14px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.axis.tickline); }) .call((g) => { g.selectAll(".domain").attr("stroke", ZHColors.axis.axisline); }); }34:T8df,createLines = (svg) => { const dimensions = lineChartDimensions; const container = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${dimensions.margin.top})` ); const isSelected = (name) => selectedRegions .sort((a, b) => a.year - b.year) .some((r) => r.year === name); const regionContainers = container .selectAll("g.region") .data(selectedRegions.sort((a, b) => a.year - b.year)) .join("g") .attr("class", "region") .style( "--_color", (d) => colors[selectedRegions.findIndex((region) => region.year === d.year)] ); const lines = regionContainers .append("path") .attr("class", "region__line") .attr("stroke", "var(--_color)") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", (d) => lineGenerator(d.values)); const shapes = regionContainers .selectAll("path.region__shape") .data((d) => d.values .slice(-1) // .filter(function (d, i) { // return i % 91 == 1; // }) .map((value) => ({ ...value, name: d.year })) ) .join("path") .attr("class", "region__shape") .attr("d", (d) => { return d3 .symbol() .size(48) .type( symbols[selectedRegions.findIndex((region) => region.year === d.name)] )(); }) .attr( "transform", (d) => `translate(${xScale(xAccessor(d))} ${yScale(yAccessor(d))})` ) .attr("fill", "var(--_color)") .attr("stroke", "white") .attr("stroke-width", 1); const updateLines = ({ highlightedRegionId }) => { regionContainers.attr("opacity", (d) => // The appearance only has to change when the highlighted // region is also selected. Otherwise all lines will be greyed out. highlightedRegionId !== null && isSelected(highlightedRegionId) ? d.year === highlightedRegionId ? 1 : 0.2 : 1 ); /* * Raise the highlighted region to the top * so that no other transparent line is overlapping it. */ regionContainers .filter((d) => highlightedRegionId ? d.year === highlightedRegionId : false ) .raise(); }; return updateLines; }35:Tb5e,createMarker = (svg) => { const dimensions = lineChartDimensions; const container = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${dimensions.margin.top})` ); const highlightedMarkerLine = container .append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", 0) .attr("y2", dimensions.boundedHeight) .attr("stroke-width", 1) .attr("stroke", ZHColors.black["100"]) .attr("stroke-dasharray", "2") .attr("opacity", 0); const shapes = container .selectAll("path") .data(selectedRegions) .join("path") .attr("d", (d) => { return d3 .symbol() .size(68) .type( symbols[selectedRegions.findIndex((region) => region.year === d.year)] )(); }) .style( "fill", (d) => colors[selectedRegions.findIndex((region) => region.year === d.year)] ) .attr("stroke", "white") .attr("stroke-width", "2") .attr("opacity", 0); const markerXScale = d3 .scaleLinear() .domain([ dimensions.margin.left, dimensions.margin.left + dimensions.boundedWidth ]) .range([0, dimensions.boundedWidth]); const bisect = d3.bisector((d) => d); const moveListener = (e) => { // Do nothing when no region is selected and the reference data is hidden if (!showReferenceData && selectedRegions.length === 1) { return; } const pointerCoords = getPointerPosition( e, e.target.ownerSVGElement ?? e.target ); const [posX, posY] = pointerCoords; if ( posX > dimensions.margin.left && posX < dimensions.margin.left + dimensions.boundedWidth && posY > dimensions.margin.top && posY < dimensions.margin.top + dimensions.boundedHeight ) { /* Find date from position */ const year = xScale.invert(markerXScale(posX)); /* Find the closest data point */ const index = bisect.center(years, year); const selectedYear = years[index]; setValue(selectedYear, viewof highlightedYear); const markerXPos = xScale(selectedYear); highlightedMarkerLine .attr("x1", markerXPos) .attr("x2", markerXPos) .attr("opacity", 1); shapes .attr("opacity", (d) => (!isNaN(d.valuesByYear[selectedYear]) ? 30 : 0)) .attr( "transform", (d) => `translate(${markerXPos} ${yScale( d.valuesByYear[selectedYear] || 0 )})` ); } else { highlightedMarkerLine.attr("opacity", 0); shapes.attr("opacity", 0); setValue(null, viewof highlightedYear); } }; svg.on("mousemove", moveListener); svg.on("touchmove", moveListener); svg.on("mouseleave", (e) => { highlightedMarkerLine.attr("opacity", 0); shapes.attr("opacity", 0); setValue(null, viewof highlightedYear); }); }36:T46b,37:[] 2f:{"id":"73b850ad03cb0650","slug":null,"title":"📈 ZEFIX: Neugründungen","thumbnail":"81e9f741fd369d6d9580d898efc0d254a35d906fbc0cec292298691a6fec5fb4","access_level":"public","create_time":"$D2024-08-27T14:36:06.344Z","update_time":"$D2026-01-15T08:47:42.207Z","view_time":null,"first_public_time":"$D2024-09-04T05:23:16.186Z","has_unpublished_edits":null,"fork":{"id":"8221e602dd85da38","slug":null,"title":"📈 ZEFIX: Konkurseröffnungen","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":4606,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"📈 ZEFIX: Neugründungen","cells":[{"id":0,"value":"# 📈 ZEFIX: Neugründungen\n\nWichtig:\n1. Time Scale auf ein Jahr setzen, so dass alle Jahresreihen eine x-Achse teilen können (indexing to a \"dummy year\")\n2. Cum sum für alle Branchen und Jahre je Gebiet berechnen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"---\n## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1034,"value":"### Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4139,"value":"viewof regionSelector = Inputs.radio(region.reverse(), {\n label: \"Region ändern\",\n value: \"Kanton Zürich\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4152,"value":"viewof industrySelector = Inputs.select(branche, {\n label: \"Branche wählen\",\n value: \"Alle Branchen\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"### Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof lineChart = {\n const dimensions = lineChartDimensions;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .attr(\"aria-hidden\", \"true\")\n .style(\"display\", \"block\");\n\n svg.call(xAxis);\n\n svg.call(yAxis);\n svg.call(yAxisLabel);\n\n const updateLines = createLines(svg);\n\n svg.call(createMarker);\n\n return Object.assign(svg.node(), {\n update: (...args) => {\n updateLines(...args);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"### Line Chart Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2923,"value":"### Line Chart Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2926,"value":"viewof lineChartLegend = lit.html`\n

\n setValue(region.year, viewof highlightedRegionId)}\n @pointerleave=${() => setValue(null, viewof highlightedRegionId)}>\n ${htmlRegionSymbol(region.year)}\n ${region.year}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2930,"value":"### HTML Region Symbol","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2932,"value":"htmlRegionSymbol = (name) =>\n lit.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2252,"value":"---\n## Updates / Synchronisation\nTo optimize performance the map and the line chart won't be rerendered after a dependency state change happened. To update each representation a `update` method is called.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2258,"value":"sync = {\n viewof lineChart.update({ highlightedRegionId });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"---\n## Line Chart Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"xAccessor = (d) => d.date","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"yAccessor = (d) => d.value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xScale = d3\n .scaleTime()\n .domain([new Date(dummyYear, 0, 1), new Date(dummyYear, 11, 31)])\n .nice()\n .range([0, lineChartDimensions.boundedWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3946,"value":"maxYValue = Math.max(\n 1,\n Math.ceil(\n d3.max(selectedRegions, (d) => d3.max(d.values.map((v) => v.value)))\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"yScale = {\n const domain = [0, maxYValue];\n\n return d3\n .scaleLinear()\n .domain(domain)\n .nice()\n .range([lineChartDimensions.boundedHeight, 0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"yAxis = (svg) => {\n const dimensions = lineChartDimensions;\n const numOfTicks = yScale.domain()[1];\n\n const axisHeight = dimensions.boundedHeight;\n const pixelsPerTick = 50;\n const numberOfTicksTarget = Math.max(\n 1,\n Math.floor(axisHeight / pixelsPerTick)\n );\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0 ${dimensions.margin.top})`)\n .call(\n d3\n .axisRight(yScale)\n .tickSize(dimensions.margin.left + dimensions.boundedWidth)\n .tickFormat((d) => d.toLocaleString(\"de-CH\"))\n .ticks(numberOfTicksTarget)\n )\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"x\", 0)\n .attr(\"dy\", -4)\n .attr(\"fill\", ZHColors.axis.ticklabel)\n )\n .call((g) => {\n g.selectAll(\".tick line\").attr(\"stroke\", ZHColors.axis.gridline);\n })\n .call((g) => {\n g.selectAll(\".domain\").remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"yAxisLabel = (svg) => {\n const path =\n \"M12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289L18.7071 10.2929C19.0976 10.6834 19.0976 11.3166 18.7071 11.7071C18.3166 12.0976 17.6834 12.0976 17.2929 11.7071L13 7.41421L13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19L11 7.41421L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071C4.90237 11.3166 4.90237 10.6834 5.29289 10.2929L11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4Z\";\n\n const container = svg\n .append(\"g\")\n .attr(\"transform\", `translate(-4 10)`)\n .attr(\"fill\", ZHColors.axis.axislabel);\n\n container.append(\"path\").attr(\"d\", path).attr(\"transform\", \"scale(0.75)\");\n\n container\n .append(\"text\")\n .text(unit)\n .style(\"font-size\", \"12px\")\n .attr(\"x\", \"24\")\n .attr(\"y\", \"13\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"lineGenerator = d3\n .line()\n .defined((d) => !isNaN(yAccessor(d)))\n .x((d) => xScale(xAccessor(d)))\n .y((d) => yScale(yAccessor(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4044,"value":"---\n## leu components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4046,"value":"viewof leuDropdown = htl.html`\n \n \n Daten als CSV herunterladen\n Daten im Open-Data-Katalog anzeigen\n \n createPNG({\n containerId: contentId.id,\n padding: \"10px\",\n filename: `ZEFIX_${titel}.png`\n })}>Grafik als PNG herunterladen\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4048,"value":"leuTheme = theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4053,"value":"leuFonts = fonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4055,"value":"leuElements = {\n importLeuFromCDN(\"leu-dropdown.js\", leuVersion);\n importLeuFromCDN(\"leu-menu.js\", leuVersion);\n importLeuFromCDN(\"leu-menu-item.js\", leuVersion);\n importLeuFromCDN(\"leu-icon.js\", leuVersion);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"---\n## State\n\nAll state that is used or set by multiple components should be stored in a dedicated `Inputs.input`.\nWith this approach we try to have a unidirectional data flow most of the times.\n\nA value of a state can be changed with the `setValue()` utility function.\n\n*Derived state* is just a state object/list that has been transformed. But it does not contain any state itself. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":889,"value":"viewof selectedRegionIds = Inputs.input([261])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"viewof highlightedRegionId = Inputs.input(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"viewof highlightedYear = Inputs.input(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"viewof selectedYear = Inputs.input(defaultYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"viewof mapTooltipState = Inputs.input({\n positionX: 0,\n positionY: 0,\n visible: false,\n regionId: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1946,"value":"viewof showReferenceData = Inputs.input(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"### Derived State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"/*\n * Group by Gebiet and rename properties\n */\nselectedRegions = summedData\n .filter(\n (d) => d.location === regionSelector && d.section === industrySelector\n )\n .reduce((groups, d) => {\n const group = groups.find((g) => g.year === d.year);\n\n const currentValue = {\n value: d.cumsum,\n date: d.date\n };\n\n if (group) {\n group.values.push(currentValue);\n group.valuesByYear[currentValue.date] = currentValue.value;\n } else {\n groups.push({\n year: d.year,\n values: [currentValue],\n valuesByYear: {\n [currentValue.date]: currentValue.value\n }\n });\n }\n\n return groups;\n }, [])\n .map((group) => ({\n ...group,\n values: group.values.sort((a, b) => b.year - a.year)\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"maxValueOfYear = d3.max(\n selectedRegions.map((r) => r.valuesByYear[selectedYear])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1070,"value":"// getRegionColor = (name) => {\n// return colors.year[name];\n// }\n\ngetRegionColor = (year) => {\n return colors[selectedRegions.findIndex((region) => region.year === year)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"// getRegionSymbol = (name) => {\n// return symbols.year[name];\n// }\n\ngetRegionSymbol = (year) => {\n return symbols?.[selectedRegions.findIndex((r) => r.year === year)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"setValue = (value, input) => {\n if (input.value !== value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"render = function (\n template,\n element = document.createElement(\"span\"),\n options\n) {\n lit.render(template, element, options);\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"responsiveValue = (...values) => {\n /* This is a function to define a responsive value without being to verbose. The values have to have the same position in the list as the breakpoints that they're associated to. */\n\n const index =\n values.length -\n 1 -\n breakpoints\n .slice(0, values.length)\n .reverse()\n .findIndex((breakpoint) => breakpoint <= window.innerWidth);\n\n return values[index];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1660,"value":"getPointerPosition = (e, element) => {\n // If it is a TouchEvent just get the position of the first touch\n const { clientX, clientY } = e.touches ? e.touches[0] : e;\n const rect = element.getBoundingClientRect();\n const x = clientX - rect.left;\n const y = clientY - rect.top;\n\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"### Locale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1604,"value":"localeDeCH = {\n const res = await fetch(\n \"https://cdn.jsdelivr.net/npm/d3-format@3/locale/de-CH.json\"\n );\n const data = await res.json();\n return d3.formatLocale(data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"valueFormat = (v) => lit.html`${v.toLocaleString(\"de-CH\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4233,"value":"dateFormat = (d) => lit.html`${d3.timeFormat(\"%d.%m.\")(d)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"---\n## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"lineChartHeight = responsiveValue(400, 350)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"lineChartMargin = ({\n top: 45,\n right: 30,\n bottom: 30,\n left: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"lineChartDimensions = {\n return {\n width,\n height: lineChartHeight,\n margin: lineChartMargin,\n boundedWidth: width - lineChartMargin.left - lineChartMargin.right,\n boundedHeight:\n lineChartHeight - lineChartMargin.top - lineChartMargin.bottom\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"maxSelectedRegions = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"symbols = [\n d3.symbolSquare2,\n d3.symbolDiamond2,\n d3.symbolDiamond,\n d3.symbolCircle,\n d3.symbolSquare,\n d3.symbolTriangle\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"defaultYear = d3.max(dateExtent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"tooltipMaxWidth = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"contentId = DOM.uid(\"zhstat-content\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"---\n## Styling / Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"colors = [\n ZHColors.chart.cyan,\n // ZHColors.chart.darkblue,\n ZHColors.chart.lightviolet,\n ZHColors.chart.darkviolet,\n ZHColors.chart.magenta,\n ZHColors.chart.orange\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3713,"value":"htl.html`\n

${key}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"ZHColors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"swatches = (colorScheme) => {\n return htl.html`

${colorScheme.map(\n (c) =>\n htl.html`

`\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"### CSS class generation\n\nThis `makeCl` utility creates a helper function that generates unique ids for CSS classes. It will probably make sense to make this publicly available, as it solves a very generic issue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1834,"value":"makeCl = (prefix) => {\n const registry = {};\n\n const cl = (name) => {\n const identifier = `zhstat-${prefix}-${name}`;\n if (typeof registry[identifier] === \"undefined\") {\n registry[identifier] = DOM.uid(identifier);\n }\n\n return registry[identifier].id;\n };\n\n return cl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"elIds = ({\n tooltip: DOM.uid(\"zhstat-tooltip\"),\n tooltipDatapointList: DOM.uid(\"zhstat-datapoint-list\"),\n tooltipDatapoint: DOM.uid(\"zhstat-datapoint\"),\n tooltipDatapointSymbol: DOM.uid(\"zhstat-datapoint-symbol\"),\n tooltipDatapointLabel: DOM.uid(\"zhstat-datapoint-label\"),\n tooltipDatapointValue: DOM.uid(\"zhstat-datapoint-value\"),\n chartWrapper: DOM.uid(\"zhstate-chart-wrapper\"),\n visuallyHidden: DOM.uid(\"zhstat-visually-hidden\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"css","database":"$undefined"},{"id":19,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4240,"value":"dummyYear = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4587,"value":"// only the last 5 years are displayed\nstartTimeRange = 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3645,"value":"dataPath = \"https://www.web.statistik.zh.ch/ogd/data/KANTON_ZUERICH_ZEFIX_Neugruendungen.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3434,"value":"fetchedData = d3.csv(dataPath, (d) => ({\n ...d,\n value: Number.parseFloat(d.value),\n year: new Date(d.date).getFullYear(),\n // make all dates have the same year so that they can use the same time scale.\n date: d3.timeParse(\"%Y-%m-%d\")(`${dummyYear}-${d.date.slice(5)}`), //(`${dummyYear}-${d.date.slice(5)}`),\n location: d.location === \"CH\" ? \"Schweiz\" : \"Kanton Zürich\",\n section: d.br_abschnitt_desc || d.br_abschnitt_red\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4281,"value":"summedData = tidy(\n // Calculation of the cumulative daily values for all years, all industries and the two areas, Switzerland and Canton Zurich\n fetchedData.filter((d) => d.year >= yearExtent[1] - startTimeRange),\n groupBy(\n [\"location\", \"section\", \"year\"],\n mutateWithSummary({ cumsum: cumsum(\"value\") })\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3829,"value":"branche = [...new Set(summedData.map((d) => d.section))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4141,"value":"region = [...new Set(summedData.map((d) => d.location))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4075,"value":"titel = \"Neueintragungen im Handelsregister\"\n\n// {\n// const years = [yearExtent[1] - startTimeRange, yearExtent[1]];\n\n// return `Anzahl Neugründungen, ${years.join(\" bis \")}`;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4079,"value":"untertitel = \"Seit Jahresbeginn summierte Tageswerte (kumulierte Tageswerte)\" // \"Für den Kanton Zürich und die Schweiz kumulierte Tageswerte nach Branchen\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4597,"value":"metadata = `Region: ${regionSelector} | Branche: ${industrySelector}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3861,"value":"unit = \"Anzahl Neugründungen\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4591,"value":"anmerkung = \"Seit Jahresbeginn aufsummierte Neueintragungen im Handelsregister. Inklusive Fusionen u.ä. Branchenklassifikation nach NOGA2008 (Wirtschaftsabschnitte).\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4077,"value":"quelle = \"Zentraler Firmenindex (ZEFIX) des Bundes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3654,"value":"yearExtent = d3.extent(fetchedData, (d) => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"years = [...new Set(d3.map(summedData, (d) => d.date))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4179,"value":"dateExtent = [...new Set(summedData.map((d) => d.date))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"---\n## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3990,"value":"import {\n colors as ZHColors,\n fonts as ZHFonts\n} from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4029,"value":"import { createPNG } from \"@statistikzh/shared-imports\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4051,"value":"import {\n fonts,\n theme,\n importLeuFromCDN\n} with { leuVersion as version } from \"@statistikzh/leu-general\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4582,"value":"leuVersion = \"^0.9\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"import { createLegend } with { width as width } from \"18ec1715c73fb431\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"import { createTooltip } with {\n elIds as elIds,\n width as width\n} from \"7ec9f277c82fd4b4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4278,"value":"import {\n tidy,\n filter,\n groupBy,\n summarize,\n mutateWithSummary,\n cumsum\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"lit = import(`https://esm.run/lit-html@3`) // import(\"lit-html@3.2.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"