Public
Edited
Nov 6, 2024
vis1 = Plot.plot({
width: width > 650 ? 650 : 350,
style: {
fontSize: 13
// background: `url(${await FileAttachment("sea-ice.jpg").url()})`,
// backgroundSize: "cover"
},
color: { range: ["blue", "#aaa"] },
marginLeft: 75,
marginTop: 80,
marginBottom: 40,
height: width > 650 ? 300 : 450,
x: { type: "band" },
y: {
// domain: [0, 120],
label:
"Квартальна кількість вироків\nпо корупційним статтям ККУ\nі кількість зупинених справ\nчерез мобілізацію підсудних"
},
fx: { interval: "3 months", label: null },
// y: { label: null },
marks: [
Plot.axisFx({
facetAnchor: "top",
anchor: "bottom",
ticks: 4
}),
Plot.axisX({
frameAnchor: "top",
fontWeight: "bold",
fontSize: 14,
tickSize: 0,
label: null
}),
Plot.waffleY(
data2,
Plot.binX(
{ y: "count" },
{ fx: "date", unit: 1, multiple: width > 650 ? 4 : 2 }
)
),
Plot.text(
[
`До 2022 року була запинена лише одна справа через мобілізацію підсудного\n↓`
],
{
fx: [new Date("2021-11-01")],
frameAnchor: "middle",
textAnchor: "end",
bend: true,
dx: width > 650 ? -8 : 0,
y: width > 650 ? 32 : 18,
lineWidth: 8,
fill: "#000",
stroke: "#fff",
strokeWidth: 5
}
),
Plot.text([`В 3 кварталі 2024 року більше ста "зупинок"\n↓`], {
fx: [new Date("2024-09-01")],
frameAnchor: "top-right",
textAnchor: "end",
bend: true,
dx: -10,
dy: width > 650 ? -65 : -70,
lineWidth: 8
})
]
})
data = (await FileAttachment("EP@1.zupynka_provadjennya.csv").csv())
.map((d) => {
return {
...d,
date: new Date(d.date),
vasu: d["courtName"].match(/Вищий/) ? "ВАСУ" : "інші"
};
})
.filter((d) => (d.date < new Date("2024-10-01")) & (d.verdict == 1))
data2 = data.filter(
(v, i, a) =>
a.findIndex((v2) => ["CaseNumber"].every((k) => v2[k] === v[k])) === i
)
Plot.plot({
width: width > 650 ? 650 : 350,
style: {
fontSize: 13,
background: `url(${await FileAttachment("632339_slider@2.jpg").url()})`,
backgroundSize: "cover",
fill: "#fff",
fontWeight: 700
},
color: { range: ["blue", "#aaa"] },
marginLeft: 75,
marginTop: 80,
marginBottom: 40,
height: width > 650 ? 400 : 450,
x: { type: "band" },
y: {
// domain: [0, 120],
label:
"Квартальна кількість вироків\nпо корупційним статтям ККУ\nі кількість зупинених справ\nчерез мобілізацію підсудних"
},
fx: { interval: "3 months", label: null },
// y: { label: null },
marks: [
Plot.axisFx({
facetAnchor: "top",
anchor: "bottom",
ticks: 4
}),
Plot.axisX({
frameAnchor: "top",
fontWeight: "bold",
fontSize: 14,
tickSize: 0,
label: null
}),
Plot.waffleY(
data2,
Plot.binX(
{ y: "count" },
{ fx: "date", unit: 1, multiple: width > 650 ? 4 : 2, fill: "#fff" }
)
)
// Plot.text(
// [
// `До 2022 року була запинена лише одна справа через мобілізацію підсудного\n↓`
// ],
// {
// fx: [new Date("2021-11-01")],
// frameAnchor: "middle",
// textAnchor: "end",
// bend: true,
// dx: width > 650 ? -8 : 0,
// y: width > 650 ? 32 : 18,
// lineWidth: 8,
// fill: "#000",
// stroke: "#fff",
// strokeWidth: 5
// }
// ),
// Plot.text([`В 3 кварталі 2024 року більше ста "зупинок"\n↓`], {
// fx: [new Date("2024-09-01")],
// frameAnchor: "top-right",
// textAnchor: "end",
// bend: true,
// dx: -10,
// dy: width > 650 ? -65 : -70,
// lineWidth: 8
// })
]
})
data_total = FileAttachment("data_total.csv").csv()
combinedArray = data_total.concat(data2).map((d) => {
return { ...d, flag: d.verdict == 1 ? 1 : 0 };
})
Plot.plot({
color: { range: ["blue", "#aaa"] },
marginRight: 50,
marginTop: 50,
marginBottom: 40,
x: { type: "band" },
y: {
domain: [0, 2300],
label: "Річна"
},
marks: [
Plot.axisX({
frameAnchor: "top",
fontWeight: "bold",
fontSize: 14,
tickSize: 0,
label: null
}),
Plot.waffleY(
combinedArray,
Plot.groupX(
{ y: "count" },
{ x: "year", unit: 10, fill: "flag", tip: true }
)
),
Plot.arrow([0], {
x1: ["2024"],
x2: ["2024"],
y1: 1840,
y2: 1640,
bend: 30,
dx: 40
}),
Plot.text([`Кожен сірий квадрат представляє 10 зупиннених справ`], {
x: ["2024"],
y: 1950,
textAnchor: "end",
bend: true,
dx: 40,
lineWidth: 12
// stroke: "#fff",
// fill: "#000"
}),
Plot.arrow([0], {
x1: ["2024"],
x2: ["2024"],
y1: -150,
y2: -20,
dx: 30,
bend: -30
}),
Plot.text(
[`Кожен синій квадрат представляє 10 вироків по корупційним статтям ККУ`],
{
x: ["2024"],
y: -100,
textAnchor: "end",
bend: true,
dx: 25,
dy: 10,
lineWidth: 20
// stroke: "#fff",
// fill: "#000"
}
),
Plot.ruleY([0])
]
})
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.
