Public
Edited
Oct 1, 2024
vis1 = Plot.plot({
style: { fontSize: 13 },
y: {
domain: [0, 800],
label: "Щомісячна кількість\nсудових рішень про опікунство",
labelArrow: null,
grid: true
},
height: 400,
marginTop: 40,
width: width > 650 ? 650 : 350,
marks: [
// Plot.ruleY([0]),
// Plot.lineY(data, { x: "date", interval: "quarter" }),
Plot.lineY(
data,
Plot.windowY(
Plot.binX(
{ y: "count" },
{
x: (d) => d.date,
k: 3,
strokeWidth: 3,
interval: "month",
stroke: "#7F8C8D"
}
)
)
)
// Plot.areaY(
// data,
// Plot.windowY(
// Plot.binX(
// { y: "count" },
// {
// x: (d) => d.date,
// k: 3,
// fill: "#7F8C8D",
// interval: "month"
// }
// )
// )
// )
]
})
vis2 = Plot.plot({
style: { fontSize: 13 },
width: width > 650 ? 650 : 350,
y: {
// domain: [0, 800],
label: "Розподіл судових рішень\nза статтю опікунів",
labelArrow: null,
tickFormat: (d) => d * 100 + "%"
},
height: 400,
x: { nice: true },
color: {
// legend: true,
domain: ["Жінки", "Чоловіки"],
range: ["#C3B1E1", "#7F8C8D"]
},
marginTop: 40,
marks: [
// Plot.axisY({
// label: "Розподіл судових рішень\nміж статтю опікунів",
// labelArrow: null
// // fo: 16
// }),
Plot.areaY(
data.filter((d) => d.sex != "none"),
Plot.windowY(
Plot.binX(
{ y: "count" },
{
x: (d) => d.date,
k: 3,
fill: (d) => (d.sex == "0" ? "Жінки" : "Чоловіки"),
interval: "month",
offset: "normalize"
}
)
)
),
Plot.text(["ЖІНКИ"], {
frameAnchor: "middle",
dx: width > 650 ? -50 : -30,
dy: -50,
fontWeight: 700,
fill: "#fff",
fontSize: 15
}),
Plot.text(["ЧОЛОВІКИ"], {
frameAnchor: "middle",
dx: width > 650 ? 100 : 50,
dy: 0,
fontWeight: 700,
fill: "#fff",
fontSize: 15
})
]
})
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.
