The avatar for @statistikzh
Statistical Office of the Canton of Zurich
Public
AWEL - Decarb-Monitoring
Edited
Nov 25, 2024
Fork of M2 - Antriebsart bei Gütertransportfahrzeugen - Fahrzeugbestand
•
1 fork
Insert cell
Insert cell
Insert cell
M3_checkboxes
Insert cell
Insert cell
viewof chartLegend = swatches(
d3.scaleOrdinal(colorAntriebsart.domain, colorAntriebsart.range)
// {
// columns: "120px"
// }
)
Insert cell
Insert cell
viewof M3_checkboxes = Inputs.checkbox(
["Nur alternative Antriebsarten anzeigen"],
{
label: null,
value: [null]
}
)
Insert cell
viewof M3_radiosUnit = Inputs.radio(units, {
// label: "Einheit wählen",
value: "Neuzulassungen PW [%]",
sort: "descending"
})
Insert cell
viewof M3_radiosGebiet = Inputs.radio(gebiet, {
// label: "Einheit wählen",
value: "Kanton Zürich",
sort: "ascending",
column: "180px"
})
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
render = function (
template,
element = document.createElement("span"),
options
) {
lit.render(template, element, options);
return element;
}
Insert cell
responsiveValue = (...values) => {
/* 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. */

const index =
values.length -
1 -
breakpoints
.slice(0, values.length)
.reverse()
.findIndex((breakpoint) => breakpoint <= width);

return values[index];
}
Insert cell
// displayData = wrangleData(konkurse)
Insert cell
Insert cell
breakpoints = [0, 640, 768]
Insert cell
viewsWidth = width >= breakpoints[1]
? Math.max(Math.min(width * 0.5, 480), 320)
: width
Insert cell
elIds = ({
inputContainer: DOM.uid("zhstat-input-container"),
visuallyHidden: DOM.uid("zhstat-visually-hidden")
})
Insert cell
css = html`<style>

.${elIds.inputContainer.id} {
display: grid;
grid-template-columns: repeat(${responsiveValue(1, 1, 2)}, 1fr);
grid-gap: 1rem;
}

/* This is a very ugly use of a magic number. 704px means that the zhWeb Container is 640px wide. */
@media screen and (min-width: 704px) {
.${elIds.inputContainer.id} {
grid-template-columns: ${viewsWidth}px 1fr;
}
}

.${elIds.visuallyHidden.id} {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
</style>`
Insert cell
Insert cell
Insert cell
import { Swatches as swatches } from "d4a818dd9bd3a1cf"
Insert cell
lit = import(`https://esm.run/lit-html@3`)
// lit = import("lit-html@2.8.0")
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