Public
Edited
Sep 5, 2024
1 fork
viewof plot_konkurse_total = {
const initDate = d3.timeFormat("%Y-%m-%d")(new Date());
// The selection
const hover = vl
.selectSingle("hover")
.on("mouseover")
.encodings("x")
.nearest(true)
.clear("moouseout")
.init({
x: {
year: 2022,
month: +d3.timeFormat("%m")(new Date(initDate)),
date: +d3.timeFormat("%d")(new Date(initDate)) - 8
}
});
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// The line and point marks. Notice how we filter the points on hover
const lineAndPoint = vl
.layer(
vl.markLine(),
vl
.markPoint(vl.opacity().if(isHovered, vl.value(1)).value(0), {
size: 60,
filled: true
})
.transform(vl.filter(hover))
)
.encode(
vl.y().fieldQ("total").scale({ domain: y_domain }),
vl
.color()
.field("year")
.scale({
domain: years,
range: [
"#009EE0", //2018, 2019 - Pre-Corona years
"#00407C", //2018, 2019 - Pre-Corona years
"#9572D5", //2020, 2021 - Corona years
"#54268E", //2020, 2021 - Corona years
"#B01657", // previous year, 1st post-Corona year
"#DC7700" // current year, 2nd post-Corona year
// "#D40053"
]
// [
// "#D40053",
// "#DC7700",
// "#8A8C00",
// "#0FA693",
// "#009EE0",
// "#9572D5"
// ]
})
);
// The rule helps as a proxy for the hover. We draw rules all over the chart
// so we can easily find the nearest one. We then hide them using opacity 0
const rule = vl
.markRule({ strokeWidth: 0.5, tooltip: true })
.data(
tidy(
rolled_AlleBranchen.filter((d) => d.location == konkurse_selectGebiet),
pivotWider({
namesFrom: "year",
valuesFrom: "total",
valuesFill: "-"
}),
groupBy(["xTime", "tooltipDate"])
)
)
// // We pivot the data so we can show all the values at once
// .transform(
// vl.pivot("year").value("total").groupby(["xTime", "tooltipDate"])
// )
.encode(
vl.opacity().value(0).if(hover, vl.value(1)).value(0),
vl.tooltip([
years[0],
years[1],
years[2],
years[3],
years[4],
years[5],
{ field: "tooltipDate", title: "Tag" }
])
)
.select(hover);
return (
vl
.layer(lineAndPoint, rule)
.encode(vl.x().fieldT("xTime"))
.data(
rolled_AlleBranchen.filter((d) => d.location == konkurse_selectGebiet)
)
.width(plotWidth(1)) // specifying responsive width
.height(svgHeight)
// .title({
// text: "Anzahl Konkurseröffnungen, " + konkurse_selectGebiet,
// subtitle: "Kumulierte Tageswerte"
// })
.autosize({ resize: true, type: "fit" })
.config({
locale: { number: localeNumber, time: localeTime },
view: { stroke: null },
// scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2, stroke: 2 },
background: "#ffffff",
axis: {
labelFont: "Arial Black",
labelFontSize: 12,
labelColor: "black",
labelPadding: 7,
titleFont: "Arial Black",
titleFontSize: 13,
titleFontColor: "black",
domainColor: "#666666",
tickColor: "#666666"
},
axisX: {
tickCount: plotWidth(1) / 120,
format: "%b",
title: null,
grid: false
},
axisY: {
title: null,
tickCount: height / 120,
labelLimit: 300,
gridColor: "#cccccc"
},
title: {
font: "Arial Black",
fontSize: 16,
offset: 15,
anchor: "start",
lineHeight: 1.5,
padding: 50,
subtitleFont: "Arial",
subtitleFontSize: 14
},
header: {
labelOrient: "top",
labelPadding: 5,
lineHeight: 3,
labelFontSize: 13,
labelFont: "Arial Black",
labelColor: "black"
},
legend: {
orient: "top",
symbolSize: 250,
labelFontSize: 14,
labelFont: "Arial",
labelColor: "black",
labelLimit: 300,
columns: 6, // responsive legend width
rowPadding: 10,
title: null
},
text: { font: "Arial", fontSize: 16, color: "black" }
})
.render()
);
}
konkurseNachBranche = htl.html`<h4 class="atm-heading">Anzahl Konkurseröffnungen nach Branche, Kanton Zürich</h4><p class="atm-paragraph" style="color: black;">Kumulierte Tageswerte (${
yearsAll[1]
}, ${yearsAll[0]}) und gleitender Durchschnitt</p>
<div id="plot" class="flex-container">
<div>${viewof plot_industries}</div>
</div>`
// Calculation of the cumulative daily values for all years and the two areas, Switzerland and Canton Zurich
// Used in plot_konkurse_total: https://observablehq.com/d/fad527dcdc0ed751?collection=@statistikzh/arbeit_lohn#plot_konkurse_total
rolled_AlleBranchen = tidy(
konkurse,
filter(
(d) =>
d.year >= d3.max(years) - 5 &&
d.year <= d3.max(years) &&
d.industry == "Alle Branchen"
),
groupBy(["location", "year"], mutateWithSummary({ total: cumsum("value") })),
mutate({
location: (d) => (d.location == "CH" ? "Schweiz" : "Kanton Zürich")
}),
mutate({
// tag: (d) => d3.timeFormat("%d.%m.")(new Date(d.xTime)),
tooltipDate: (d) => formatDate(d.xTime)
}),
select([
"year",
"xTime",
// "tag",
"tooltipDate",
"location",
"industry",
"total"
])
)
Inputs.table(
tidy(
selectedIndustries_comaprison.filter(
(d) => d.industry == selectedIndustries[1]
),
select(["-value"]),
pivotWider({
namesFrom: "year",
valuesFrom: "tooltipValue",
valuesFill: "-"
})
),
groupBy(["xTime", "tooltipDate", "industry"])
)
// // function to draw plots based on index for select industry
// function draw_plot(index_selectedIndustry) {
// let plot = vl
// .layer(
// vl
// .markLine({ strokeWidth: 3 }) //{ color: { value: "#333" } }
// .data(selectedIndustries_movingAvg_comparisonB[index_selectedIndustry])
// .encode(
// vl.x().fieldT("xTime"),
// vl.y().fieldQ("value"),
// vl
// .strokeDash({ strokeWidth: 3 })
// .field("year")
// .scale({
// domain: [
// yearsAll[0],
// yearsAll[1],
// `∅ ${yearsAll[3]}-${yearsAll[2]}`,
// `∅ ${yearsAll[6]}-${yearsAll[4]}`
// ],
// range: [
// [1, 0], // current year, 2nd post-Corona year
// [1, 0], // previous year, 1st post-Corona year
// [4, 4], // Avg. Corona years
// [8, 8] // Avg. pre-Corona years
// ]
// }),
// vl
// .color({ strokeWidth: 3 })
// .field("year")
// .scale({
// domain: [
// yearsAll[0],
// yearsAll[1],
// `∅ ${yearsAll[3]}-${yearsAll[2]}`,
// `∅ ${yearsAll[6]}-${yearsAll[4]}`
// ],
// range: [
// "#DC7700", // current year, 2nd post-Corona year
// "#B01657", // previous year, 1st post-Corona year
// "#7F3DA7", // Avg. Corona years
// "#0070B4" // Avg. pre-Corona years
// ]
// }),
// vl.tooltip([
// { field: "year", title: "Jahr" },
// { field: "tag", title: "Tag" },
// { field: "value", title: "Durchschnitt", format: ".1f" }
// ])
// ),
// vl
// .markLine({ strokeWidth: 3 }) //{ color: { value: "#333" } }
// .data(selectedIndustries_movingAvg_comparisonA[index_selectedIndustry])
// .encode(
// vl.x().fieldT("xTime"),
// vl.y().fieldQ("value"),
// vl
// .strokeDash({ strokeWidth: 3 })
// .field("year")
// .scale({
// domain: [
// yearsAll[0],
// yearsAll[1],
// `∅ ${yearsAll[3]}-${yearsAll[2]}`,
// `∅ ${yearsAll[6]}-${yearsAll[4]}`
// ],
// range: [
// [1, 0], // current year, 2nd post-Corona year
// [1, 0], // previous year, 1st post-Corona year
// [4, 4], // Avg. Corona years
// [8, 8] // Avg. pre-Corona years
// ]
// }),
// vl
// .color({ strokeWidth: 3 })
// .field("year")
// .scale({
// domain: [
// yearsAll[0],
// yearsAll[1],
// `∅ ${yearsAll[3]}-${yearsAll[2]}`,
// `∅ ${yearsAll[6]}-${yearsAll[4]}`
// ],
// range: [
// "#DC7700", // current year, 2nd post-Corona year
// "#B01657", // previous year, 1st post-Corona year
// "#7F3DA7", // Avg. Corona years
// "#0070B4" // Avg. pre-Corona years
// ]
// }),
// vl.tooltip([
// { field: "year", title: "Jahr" },
// { field: "tag", title: "Tag" },
// { field: "value", title: "Durchschnitt", format: ".1f" }
// ])
// ),
// vl
// .markLine({ strokeWidth: 3 })
// .data(selectedIndustries_cumSum_2recentYears[index_selectedIndustry])
// .encode(
// vl.x().fieldT("xTime"),
// vl
// .y()
// .fieldQ("value")
// .scale({ domain: y_domain_industries[index_selectedIndustry] }),
// vl
// .color({ strokeWidth: 3 })
// .field("year")
// .scale({
// domain: [
// yearsAll[0],
// yearsAll[1],
// `∅ ${yearsAll[3]}-${yearsAll[2]}`,
// `∅ ${yearsAll[6]}-${yearsAll[4]}`
// ],
// range: [
// "#DC7700", // current year, 2nd post-Corona year
// "#B01657", // previous year, 1st post-Corona year
// "#7F3DA7", // Avg. Corona years
// "#0070B4" // Avg. pre-Corona years
// ]
// }),
// vl.tooltip([
// { field: "year", title: "Jahr" },
// { field: "tag", title: "Tag" },
// { field: "value", title: "Tageswert, kumuliert", format: ".0f" }
// ])
// ),
// vl
// .markText({ font: "Arial Black" })
// .data({ values: [{}] })
// .encode(
// // vl.x({
// // datum: "2022-01-01T23:00Z",
// // type: "temporal"
// // }),
// vl.y({
// datum: y_domain_industries[index_selectedIndustry][1] * 0.05, // y_domain_industries[index_selectedIndustry][0],
// type: "quantitative"
// }),
// // .scale({ domain: y_domain_industries[index_selectedIndustry] }),
// vl.text({
// datum: selectedIndustries[index_selectedIndustry],
// type: "nominal"
// })
// )
// )
// .width(plotWidth(1))
// .height(height);
// return plot;
// }
// displayData = wrangleData(konkurse)
css = html`<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="ttps://cdn.datatables.net/colreorder/1.5.4/css/colReorder.dataTables.min.css">
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">-->`
stylesheet = html`<!--<link rel='stylesheet'
href='https://www.zh.ch/etc.clientlibs/zhweb/core/clientlibs/publish/resources/css/main.04fb0ec.min.css' />-->
<link rel='stylesheet' href='https://cdn.rawgit.com/resmartiZH/zhwebfiles/main/zhwebstyle.css'/>`
// // replace with selectedIndustries_cumSum_2recentYears
// rolled_last2Years = tidy(
// konkurse,
// filter((d) => d.industry == selectedIndustries[0] && d.location == "ZH"),
// groupBy(["year"], mutateWithSummary({ cumsum: cumsum("value") }))
// )
// rolled_comparisonYears = tidy(
// rolled_last2Years,
// filter((d) => d.year >= d3.max(years) - 5 && d.year <= d3.max(years) - 2), // Vergleichsperiode von 4 Jahren, ohne die aktuellsten 2 Jahre
// groupBy(
// ["xTime"],
// summarize({
// min: min("cumsum"),
// mean: mean("cumsum"),
// max: max("cumsum")
// })
// ),
// mutateWithSummary({
// movingAvg: roll(7, mean("mean"), { partial: true, align: "center" }) // rolling 7 day average with current row as the first item
// })
// )
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.
