Public
Edited
Nov 28, 2024
mutable selectedID = "Zürich"
// Filter der Daten für die Karte - es wird nur das letzte Jahr benötigt und gefiltert auf die Gesetz
mapData = dataByLawBezirke.filter(
(d) => d.Ausgangsjahr == lastYear && d.Gesetz_Abk == lawsNachBezirken
)
selectedRegion = selectedID
viewof plotNachBezirken = {
const chartHeight = 450;
// select a point for which to provide details-on-demand
const hover = vl
.selectPoint("hover")
.encodings("x") // limit selection to x-axis value
.on("mouseover") // select on mouseover events
.clear("mourseout")
.toggle(true) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart
const line = vl
.markLine({
point: {
filled: false,
fill: "white",
size: 60
}
})
.encode(
vl.x().fieldT("date").timeUnit("year"),
vl
.y()
.fieldQ("Häufigkeitszahl")
.scale({
domain: [0, d3.max(dataByHaupttitel, (d) => d.Häufigkeitszahl)]
})
.title("Straftaten pro 1000 Einwohnende"),
vl
.color({
legend: { orient: "bottom", layout: { bottom: { anchor: "left" } } }
})
.fieldN("Haupttitel")
.title(null)
.scale({ domain: colorDomain, range: colorRange }),
// vl
// .strokeDash()
// .fieldN("Haupttitel")
// .legend({ orient: "bottom", layout: { bottom: { anchor: "left" } } })
// .title(null)
vl
.shape()
.fieldN("Haupttitel")
.scale({
domain: colorDomain,
range: ["circle", "triangle-up", "square", "diamond", "triangle-down"]
})
.legend({ orient: "bottom", layout: { bottom: { anchor: "left" } } })
.title(null)
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));
// mark properties for text label layers
const label = { align: "left", dx: 5, dy: -5 };
const white = { stroke: "white", strokeWidth: 3 };
return vl
.data(dataByHaupttitel)
.layer(
line,
// add a rule mark to serve as a guide line
vl
.markRule({ color: "#333333", strokeWidth: 1.5 })
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT("date").timeUnit("year")),
// add circle marks for selected time points, hide unselected points
line
.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().field("Häufigkeitszahl")),
// add text labels for stock prices
base.markText(label).encode(vl.text().field("Häufigkeitszahl"))
)
.width(plotWidth(2)) // chartWidth(2) specifying responsive width
.height(chartHeight)
.autosize({ type: "fit", resize: true })
.config({
locale: { number: locale },
view: { stroke: null },
background: "#ffffff",
padding: { top: 5, bottom: 5, left: 0, right: 25 },
axis: {
labelFontSize: 13,
labelColor: "black"
},
axisX: {
labelFont: ZHFonts.black,
labelFontSize: 12,
tickCount: { signal: Math.ceil(plotWidth(2) / 80) },
grid: true,
ticks: true,
title: null
},
axisY: {
titleAlign: "left",
titleAngle: 0,
titleX: -15,
titleY: -15,
labelFont: ZHFonts.regular,
labelFontSize: 12,
titleFont: ZHFonts.black,
titleFontSize: 12,
tickCount: { signal: Math.ceil(chartHeight / 80) },
grid: false
},
title: {
font: ZHFonts.black,
fontSize: 16,
offset: 15,
anchor: "start",
lineHeight: 1.5,
subtitleFont: ZHFonts.regular,
subtitleFontSize: 14
},
legend: {
labelFontSize: 14,
labelFont: ZHFonts.regular,
labelColor: "black",
labelLimit: labelLimit,
columns: 1,
rowPadding: 5,
title: null
},
text: { font: ZHFonts.regular, fontSize: 14, color: "black" }
})
.render();
}
import { fonts as ZHFonts } from "@statistikzh/common-styles"
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.
