Public
Edited
Apr 12, 2024
viewof chartLegend = swatches(
d3.scaleOrdinal(colorAntriebsart.domain, colorAntriebsart.range)
// {
// columns: "120px"
// }
)
viewof M1_checkboxes = Inputs.checkbox(
["Nur alternative Antriebsarten anzeigen"],
{
label: null,
value: [null]
}
)
viewof M1_radiosUnit = Inputs.radio(units, {
// label: "Einheit wählen",
value: "Personenwagen [%]",
sort: "descending",
column: "180px"
})
viewof M1_radiosGebiet = Inputs.radio(gebiet, {
// label: "Einheit wählen",
value: "Kanton Zürich",
sort: "ascending",
column: "180px"
})
filteredData = M1_checkboxes.length > 0
? data.filter(
(d) =>
d.Variable != "Benzin, Diesel" &&
d.Variable != "Andere" &&
d.Variable != "Elektrofahrzeuge (ohne Hybrid)" &&
d.Einheit == M1_radiosUnit &&
d.Gebiet == M1_radiosGebiet
)
: data.filter(
(d) =>
d.Variable != "Elektrofahrzeuge (ohne Hybrid)" &&
d.Einheit == M1_radiosUnit &&
d.Gebiet == M1_radiosGebiet
)
viewof 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(M1_radiosGebiet)
// .title("↑ " + M1_radiosUnit)
.axis({ format: M1_radiosUnit == units[1] ? "%" : null })
.scale({
domain:
M1_radiosUnit == units[1] && M1_checkboxes.length == 1
? [0, 0.25]
: null
})
.stack(
M1_radiosUnit == units[1] && M1_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: "Gebiet",
// 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 " + M1_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,
titleFont: "HelveticaNowBlack,Arial Black,sans-serif",
titleFontSize: 16,
titleFontColor: "black"
},
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()
dataPath = "https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/M1_data.csv"
data = d3
.csv(dataPath)
// FileAttachment("M1_data@4.csv")
// .csv()
.then(function (data) {
data.forEach(function (d) {
d.xTime = d3.timeParse("%Y")(d.Jahr); // xTime is time used for x scale so different year's data can share the x scale
d.Wert = +d.Wert; // Values to numeric
d.Wert_txt =
d.Einheit == "Personenwagen [%]"
? d.Wert.toLocaleString(undefined, {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 1
})
: d.Wert.toLocaleString("de-CH");
});
return data;
})
Inputs.table(dataWide)
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
elIds = ({
inputContainer: DOM.uid("zhstat-input-container"),
visuallyHidden: DOM.uid("zhstat-visually-hidden")
})
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.
