Public
Edited
Mar 21
1 fork
1 star
zensus_brandenburg_chart = Plot.plot({
width,
marginBottom: 40,
marginTop: 40,
insetBottom: 45,
height: 400,
x: {
domain: [max_x * -1, max_x]
},
y: {
domain: brandenburg_stadt.map((d) => d.max).reverse(),
axis: null
},
marks: [
// Balken Stadteil
Plot.rectX(brandenburg_stadtteil, {
y: "max",
x: (d) => d.prozent,
fill: (d) =>
d.max < miete_qm
? "#4f80ff"
: d.max == miete_qm
? "#99AFC2"
: "#e84f1c",
opacity: 0.8,
dx: gap
}),
// Balken Stadt
Plot.rectX(brandenburg_stadt, {
y: "max",
x: (d) => d.prozent * -1,
fill: (d) =>
d.max < miete_qm
? "#4f80ff"
: d.max == miete_qm
? "#99AFC2"
: "#e84f1c",
opacity: 0.8,
dx: -gap
}),
// x-Achse
Plot.axisX({
anchor: "bottom",
grid: true,
dx: gap,
ticks: Array.from(Array(max_x / 10 + 1).keys())
.map((d) => d * 10)
.filter((d) => d <= 100)
.filter(function (_, i) {
return i % 2 === 0;
}),
label: "← Bevölkerungsanteil in Prozent →",
labelAnchor: "center"
}),
// Label y-Achse
Plot.axisX({
anchor: "top",
grid: false,
ticks: [],
label: "↑ Miete in Euro ↑",
labelAnchor: "center"
}),
Plot.axisX({
anchor: "bottom",
grid: false,
dx: -gap,
ticks: Array.from(Array(max_x / 10 + 1).keys())
.map((d) => d * -10)
.filter((d) => d <= 100)
.filter(function (_, i) {
return i % 2 === 0;
}),
label: null,
tickFormat: Math.abs
}),
// Linie für eigene Position Stadt
Plot.ruleY(brandenburg_stadt, {
filter: (d) => d.max == miete_qm,
x1: (d) => d.prozent * -1,
x2: -max_x,
y: "max",
dx: -gap
}),
// Linie für eigene Position Stadtteile
Plot.ruleY(brandenburg_stadtteil, {
filter: (d) => d.max == miete_qm,
x1: (d) => d.prozent,
x2: max_x,
y: "max",
dx: gap
}),
// Stroke für eigene Position
Plot.rectX(brandenburg_stadtteil, {
filter: (d) => d.max == miete_qm,
y: "max",
x: (d) => d.prozent,
stroke: isDarkMode() ? "#ffffff" : "#0f151a",
fillOpacityopacity: 0,
dx: gap
}),
Plot.rectX(brandenburg_stadt, {
filter: (d) => d.max == miete_qm,
y: "max",
x: (d) => d.prozent * -1,
stroke: isDarkMode() ? "#ffffff" : "#0f151a",
fillOpacityopacity: 0,
dx: -gap
}),
// Text für eigene Position
Plot.text([miete_qm], {
x: max_x,
dx: gap,
y: miete_qm,
textAnchor: "end",
fill: "#0f151a",
stroke: "#fff",
dy: -10,
text: (d) =>
(miete_select / wohnung_select).toLocaleString("de", {
minimumFractionDigits: "2",
maximumFractionDigits: "2"
}) + " Euro"
}),
Plot.text([miete_qm], {
x: -max_x,
dx: -gap,
y: miete_qm,
textAnchor: "start",
fill: "#0f151a",
stroke: "#fff",
dy: -10,
text: (d) =>
(miete_select / wohnung_select).toLocaleString("de", {
minimumFractionDigits: "2",
maximumFractionDigits: "2"
}) + " Euro"
}),
// y-Achsen
Plot.ruleX([0], {
x: 0,
y1: "0",
y2: "25",
dx: -gap
}),
Plot.ruleX([0], {
dx: gap
}),
Plot.ruleX([0], {
dx: -gap
}),
// Label y-Achse
Plot.text(brandenburg_stadt, {
filter: (d) => d.max != 999,
x: 0,
y: "max",
dy: -11,
text: "max",
textAnchor: "center",
lineAnchor: "middle",
strokeWidth: 0.5
}),
// große Zahl Stadtteil mehr
Plot.text([0], {
dx: gap,
y: 15,
x: max_x,
textAnchor: "end",
lineAnchor: "middle",
dy: -60,
text: (d) =>
more_stadtteil.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
}) + "%",
fill: "#e84f1c",
stroke: "#fff",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro"
}),
// kleiner Text Stadtteil mehr
Plot.text([0], {
dx: gap,
y: 15,
x: max_x,
fill: "#e84f1c",
stroke: "#fff",
textAnchor: "end",
lineAnchor: "middle",
dy: -45,
text: (d) => "zahlen mehr"
}),
// große Zahl Stadt mehr
Plot.text([0], {
dx: -gap,
y: 15,
x: -max_x,
textAnchor: "start",
lineAnchor: "middle",
dy: -60,
text: (d) =>
more_stadt.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
}) + "%",
fill: "#e84f1c",
stroke: "#fff",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro"
}),
// kleiner Text Stadt mehr
Plot.text([0], {
dx: -gap,
y: 15,
x: -max_x,
fill: "#e84f1c",
stroke: "#fff",
textAnchor: "start",
lineAnchor: "middle",
dy: -45,
text: (d) => "zahlen mehr"
}),
// große Zahl Stadtteil ähnlich
Plot.text([0], {
dx: gap,
y: miete_qm,
x: max_x,
textAnchor: "end",
lineAnchor: "middle",
dy: 15,
text: (d) =>
equal_stadtteil.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
}) + "%",
fill: "#99AFC2",
stroke: "#fff",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro"
}),
// kleiner Text Stadtteil ähnlich
Plot.text([0], {
dx: gap,
y: miete_qm,
x: max_x,
fill: "#99AFC2",
stroke: "#fff",
textAnchor: "end",
lineAnchor: "middle",
dy: 30,
text: (d) =>
miete_qm == 0 ? "wohnen ebenfalls mietfrei" : "ähnlich viel"
}),
// große Zahl Stadt ähnlich
Plot.text([0], {
dx: -gap,
y: miete_qm,
x: -max_x,
textAnchor: "start",
lineAnchor: "middle",
dy: 15,
text: (d) =>
equal_stadt.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
}) + "%",
fill: "#99AFC2",
stroke: "#fff",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro"
}),
// kleiner Text Stadtteil ähnlich
Plot.text([0], {
dx: -gap,
y: miete_qm,
x: -max_x,
fill: "#99AFC2",
stroke: "#fff",
textAnchor: "start",
lineAnchor: "middle",
dy: 30,
text: (d) =>
miete_qm == 0 ? "wohnen ebenfalls mietfrei" : "ähnlich viel"
}),
// große Zahl Stadtteil weniger
Plot.text([0], {
dx: gap,
y: 0,
x: max_x,
textAnchor: "end",
lineAnchor: "middle",
dy: 30,
text: (d) =>
less_stadtteil.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
}) + "%",
fill: "#4f80ff",
fillOpacity: miete_qm == 0 ? 0 : 1,
stroke: "#fff",
strokeOpacity: miete_qm == 0 ? 0 : 1,
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro"
}),
// kleiner Text Stadtteil weniger
Plot.text([0], {
dx: gap,
y: 0,
x: max_x,
fill: "#4f80ff",
fillOpacity: miete_qm == 0 ? 0 : 1,
stroke: "#fff",
strokeOpacity: miete_qm == 0 ? 0 : 1,
textAnchor: "end",
lineAnchor: "middle",
dy: 45,
text: (d) => "zahlen weniger"
}),
// große Zahl Stadt weniger
Plot.text([0], {
dx: -gap,
y: 0,
x: -max_x,
textAnchor: "start",
lineAnchor: "middle",
dy: 30,
text: (d) =>
less_stadt.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
}) + "%",
fill: "#4f80ff",
fillOpacity: miete_qm == 0 ? 0 : 1,
stroke: "#fff",
strokeOpacity: miete_qm == 0 ? 0 : 1,
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro"
}),
// kleiner Text Stadt weniger
Plot.text([0], {
dx: -gap,
y: 0,
x: -max_x,
fill: "#4f80ff",
fillOpacity: miete_qm == 0 ? 0 : 1,
stroke: "#fff",
strokeOpacity: miete_qm == 0 ? 0 : 1,
textAnchor: "start",
lineAnchor: "middle",
dy: 45,
text: (d) => "zahlen weniger"
}),
// Tooltip Stadteil
Plot.tip(
brandenburg_stadtteil,
Plot.pointerY({
y: "max",
anchor: "left",
x: 0,
dx: gap,
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
fontSize: 12,
strokeOpacity: 0.5,
title: (d) =>
`${d.stadt}\n${d.stadtteil}\n${d.miete}\n\n${d.prozent.toLocaleString(
"de",
{
minimumFractionDigits: 1,
maximumFractionDigits: 1
}
)} Prozent\n${d.zahl.toLocaleString("de")} ${haushalte_select.replace(
"Insgesamt",
"Haushalte"
)}`
})
),
// Tooltip Stadt
Plot.tip(
brandenburg_stadt,
Plot.pointerY({
y: "max",
anchor: "right",
x: 0,
dx: -gap,
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
fontSize: 12,
strokeOpacity: 0.5,
title: (d) =>
`${d.stadt}\n${d.stadtteil}\n${d.miete}\n\n${d.prozent.toLocaleString(
"de",
{
minimumFractionDigits: 1,
maximumFractionDigits: 1
}
)} Prozent\n${d.zahl.toLocaleString("de")} ${haushalte_select.replace(
"Insgesamt",
"Haushalte"
)}`
})
)
]
})
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.
