Public
Edited
Jan 11, 2024
1 star
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 50,
marginBottom: 35,
//marginTop: 100,
// width,
y: { axis: null, range: [2.5 * 25 - 2, (2.5 - overlap) * 25 - 2] },
height: 150 + new Set(data.map((d) => d.Jahr)).size * 25,
x: { label: "Profit (€/Farm)" },
fy: {
label: null
},
marks: [
Plot.lineY(
data,
Plot.binX(
{ y: "count", filter: null },
{
thresholds: 10,
x: "Gewinn (EUR/Betrieb)",
fy: "Jahr",
curve: "basis",
render: (i, s, v, d, c, next) => {
const year = i.fy.split("/")[0];
//const g = next(i, s, v, d, c).children[0];
//return svg`<clipPath id=farm-${year}>${g}`;
return svg`<clipPath id=farm-${year} style="transform: none">${
next(i, s, v, d, c).children[0]
}`;
}
}
)
),
Plot.areaY(
data,
Plot.binX(
{ y: "count", filter: null },
{
thresholds: 10,
x: "Gewinn (EUR/Betrieb)",
fillOpacity: 0.2,
fy: "Jahr",
curve: "basis",
fill: "#ccc"
}
)
),
Plot.lineY(
data,
Plot.binX(
{ y: "count", filter: null },
{
thresholds: 10,
x: "Gewinn (EUR/Betrieb)",
fy: "Jahr",
curve: "basis",
strokeWidth: 1
// fill: "#4090C6"
}
)
),
Plot.ruleX(
data,
Plot.groupZ(
{ x: "mean" },
{
x: "Gewinn (EUR/Betrieb)",
y: 110,
stroke: "grey",
fy: "Jahr",
render: (i, s, v, d, c, next) => {
const year = i.fy.split("/")[0];
const g = next(i, s, v, d, c);
g.setAttribute("clip-path", `url(#farm-${year})`); // add clip
return g;
}
}
)
),
Plot.ruleX(
data,
Plot.groupZ(
{ x: "median" },
{
x: "Gewinn (EUR/Betrieb)",
y: 110,
strokeDasharray: "4 2",
stroke: "grey",
fy: "Jahr",
render: (i, s, v, d, c, next) => {
const year = i.fy.split("/")[0];
const g = next(i, s, v, d, c);
g.setAttribute("clip-path", `url(#farm-${year})`); // add clip
return g;
}
}
)
),
Plot.ruleY(
[
{
x1: 300000,
x2: 320000,
y: 30,
Jahr: "18/19"
}
],
{
x1: "x1",
x2: "x2",
y: "y",
fy: "Jahr",
stroke: "grey",
strokeDasharray: "4 2"
}
),
Plot.text([{ text: "Median", Jahr: "18/19" }], {
x: 340000,
y: 30,
text: "text",
fy: "Jahr"
}),
Plot.ruleY(
[
{
x1: 370000,
x2: 390000,
y: 30,
Jahr: "18/19"
}
],
{
x1: "x1",
x2: "x2",
y: "y",
fy: "Jahr",
stroke: "grey"
}
),
Plot.text([{ text: "Average", Jahr: "18/19" }], {
x: 412000,
y: 30,
text: "text",
fy: "Jahr"
}),

Plot.ruleY([0])
]
})
Insert cell
Insert cell

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.
Learn more