Public
Edited
Apr 12, 2024
viewof chartLegend = swatches(
d3.scaleOrdinal(colorAntriebsart.domain, colorAntriebsart.range),
// {
// columns: "120px"
// }
)
viewof M2_radiosUnit = Inputs.radio(units, {
// label: "Einheit wählen",
value: "Prozent (%)",
sort: "descending",
column: "180px"
})
viewof M2_radiosGebiet = Inputs.radio(gebiet, {
// label: "Einheit wählen",
value: "Kanton Zürich",
sort: "ascending",
column: "180px"
})
filteredData = M2_checkboxes.length > 0
? data.filter(
(d) =>
d.Variable != "Benzin, Diesel" &&
d.Variable != "Andere" &&
d.Variable != "Elektrofahrzeuge (ohne Hybrid)" &&
d.Einheit == M2_radiosUnit &&
d.Gebiet == M2_radiosGebiet
)
: data.filter(
(d) =>
d.Variable != "Elektrofahrzeuge (ohne Hybrid)" &&
d.Einheit == M2_radiosUnit &&
d.Gebiet == M2_radiosGebiet
)
d3.extent(filteredData, (d) => d.Wert)
viewof M2_plot = vl
.markBar({
// yOffset: 0,
// height: 25,
stroke: "white",
strokeWidth: 0.5
})
.data(filteredData)
.transform(
vl
.calculate(
"indexof([ 'Gas', 'Wasserstoff', 'Hybrid', 'PlugIn-Hybrid', 'Elektrisch', 'Andere'], datum.Variable)"
)
.as("stackSortOrder")
)
.encode(
vl
.y()
.fieldQ("Wert")
.title(null)
// .title("↑ " + M2_radiosUnit)
.axis({ format: M2_radiosUnit == units[1] ? "%" : null })
.scale({
domain:
M2_radiosUnit == units[1] && M2_checkboxes.length == 1
? [0, 0.25]
: null
})
.stack(
M2_radiosUnit == units[1] && M2_checkboxes.length == 0
? "normalize"
: "zero"
),
vl
.x()
.field("Jahr")
.axis({
grid: false,
domain: true,
labelPadding: 8,
zindex: 1
})
.title(null),
vl
.color({ title: "Antriebsart" })
.field("Variable")
.scale(colorAntriebsart),
vl.order("stackSortOrder"),
vl.tooltip([
{ field: "Jahr", title: "Jahr" },
{ field: "Variable", title: "Antriebsart" },
{ field: "Wert_txt", title: "Bestand" }
]),
vl.facet({
field: "Gruppe",
type: "nominal",
columns: 1,
spacing: 50,
title: null
})
)
.resolve({
scale: {
y: "independent"
},
axis: { x: "independent" }
})
.width(plotWidth(1)) // specifying responsive width
.height(350)
// .title({
// text:
// [...new Set(data.map((d) => d.Indikator_Name))] +
// ", " +
// gebiet[1] +
// " und " +
// gebiet[0],
// subtitle: "In " + M2_radiosUnit
// })
.autosize({ resize: true, type: "fit" })
.config({
view: { stroke: null },
locale: { number: localeNumber, time: localeTime },
scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2, stroke: 2 },
background: "#ffffff",
axis: {
labelFont: "HelveticaNowRegular,Helvetica,sans-serif",
labelFontSize: 14,
labelColor: "black",
titleFont: "HelveticaNowRegular,Helvetica,sans-serif",
titleFontSize: 14,
titleFontColor: "black"
},
axisX: {
tickCount: Math.ceil(width / 120),
grid: false,
domainColor: "lightgrey",
tickColor: "lightgrey",
labelAngle: 0,
zindex: 1
},
axisY: {
labelPadding: 10,
titleAlign: "left",
titleAngle: 0,
titleX: 0,
titleY: -20,
tickCount: Math.ceil(height / 120),
ticks: true,
tickSize: 10,
tickColor: "lightgrey",
domain: false,
domainColor: "lightgrey",
gridColor: "lightgrey",
labelLimit: 300
},
title: {
font: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif",
fontSize: 20,
offset: 15,
anchor: "start",
lineHeight: 5,
padding: 40,
subtitleFont: "HelveticaNowRegular,Helvetica,sans-serif",
subtitleFontSize: 18
},
header: {
labelOrient: "top",
labelPadding: 40,
lineHeight: 5,
labelFontSize: 16,
labelFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif",
labelColor: "black",
labelAnchor: "start",
titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif",
titleAnchor: "start",
titleColor: "black",
titleFontSize: 16
},
legend: {
disable: true,
orient: "top",
symbolSize: 250,
titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif",
titleFontSize: 14,
labelFont: "HelveticaNowRegular,Helvetica,sans-serif",
labelFontSize: 14,
labelColor: "black",
labelLimit: 300,
columns: nCol, // responsive legend width
padding: 10
},
text: {
font: "HelveticaNowRegular,Helvetica,sans-serif",
fontSize: 14,
color: "black"
}
})
.render()
render = function (
template,
element = document.createElement("span"),
options
) {
lit.render(template, element, options);
return element;
}
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];
}
// displayData = wrangleData(konkurse)
breakpoints = [0, 640, 768]
viewsWidth = width >= breakpoints[1]
? Math.max(Math.min(width * 0.5, 480), 320)
: width
// makeCl = (prefix) => {
// const registry = {};
// const cl = (name) => {
// const identifier = `zhstat-${prefix}-${name}`;
// if (typeof registry[identifier] === "undefined") {
// registry[identifier] = DOM.uid(identifier);
// }
// return registry[identifier].id;
// };
// return cl;
// }
elIds = ({
inputContainer: DOM.uid("zhstat-input-container"),
visuallyHidden: DOM.uid("zhstat-visually-hidden")
})
// cl = makeCl("button-group")
import { Swatches as swatches } from "d4a818dd9bd3a1cf"
lit = import(`https://esm.run/lit-html@3`)
// lit = import("lit-html@2.8.0")
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.
