Public
Edited
Jan 15
vis1 = {
d3.timeFormatDefaultLocale({
dateTime: "%A, %e %B %Y р. %X",
date: "%d.%m.%Y",
time: "%H:%M:%S",
periods: ["дп", "пп"],
days: [
"неділя",
"понеділок",
"вівторок",
"середа",
"четвер",
"п'ятниця",
"субота"
],
shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
months: [
"січня",
"лютого",
"березня",
"квітня",
"травня",
"червня",
"липня",
"серпня",
"вересня",
"жовтня",
"листопада",
"грудня"
],
shortMonths: [
"січ",
"лют",
"бер",
"квіт",
"трав",
"черв",
"лип",
"серп",
"вер",
"жов",
"лист",
"груд"
]
});
return Plot.plot({
title: "Як звільняли прокурорів",
style: { fontSize: 14, background: "#fcfbfd" },
width: width > 650 ? 650 : 350,
height: 1150,
marginRight: 130,
marginLeft: 20,
marginTop: 70,
x: {
label: null,
domain: [new Date("2024-01-01"), new Date("2025-01-15")],
axis: "top"
},
y: {
label: null,
ticks: false
},
marks: [
Plot.axisFy({ label: null }),
Plot.dot(
data.filter((d) => d.time > new Date("2024-02-01")),
Plot.stackY2({
x: (d) => d.week,
y: 1,
fill: "blue",
fy: "region",
sort: { y: "-x", fy: "-x", reduce: "count" }
})
),
Plot.text(['Початок "прокурорського" скандалу'], {
frameAnchor: "middle",
lineWidth: 16,
x: new Date("2024-11-01"),
dy: -70,
stroke: "white",
strokeWidth: 6,
fill: "#000",
fy: ["Київ"]
}),
Plot.arrow([0], {
fy: ["Київ"],
x1: new Date("2024-11-10"),
x2: new Date("2024-10-10"),
y1: 7,
y2: 0,
dy: -30,
bend: true,
dx: 0
}),
Plot.ruleY([0], { stroke: "grey" }),
Plot.ruleX(["2024-10-05"], { strokeDasharray: "2 2" })
]
});
}
visc2 = {
d3.timeFormatDefaultLocale({
dateTime: "%A, %e %B %Y р. %X",
date: "%d.%m.%Y",
time: "%H:%M:%S",
periods: ["дп", "пп"],
days: [
"неділя",
"понеділок",
"вівторок",
"середа",
"четвер",
"п'ятниця",
"субота"
],
shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
months: [
"січня",
"лютого",
"березня",
"квітня",
"травня",
"червня",
"липня",
"серпня",
"вересня",
"жовтня",
"листопада",
"грудня"
],
shortMonths: [
"січ",
"лют",
"бер",
"квіт",
"трав",
"черв",
"лип",
"серп",
"вер",
"жов",
"лист",
"груд"
]
});
return Plot.plot({
title: "Як звільняли прокурорів",
style: { fontSize: 14, background: "#e0ecf4" },
width: width > 650 ? 750 : 350,
height: 1150,
marginRight: 130,
marginLeft: 20,
marginTop: 70,
x: {
label: null,
domain: [new Date("2024-01-01"), new Date("2025-01-15")],
axis: "top"
},
y: {
label: null,
ticks: false
},
marks: [
Plot.axisFy({ label: null }),
Plot.dot(
data.filter((d) => d.time > new Date("2024-02-01")),
Plot.stackY2({
x: (d) => d.week,
y: 1,
fill: "blue",
fy: "region",
sort: { y: "-x", fy: "-x", reduce: "count" }
})
),
Plot.text(['Початок "прокурорського" скандалу'], {
frameAnchor: "middle",
lineWidth: 16,
x: new Date("2024-11-01"),
dy: -70,
stroke: "white",
strokeWidth: 6,
fill: "#000",
fy: ["Київ"]
}),
Plot.arrow([0], {
fy: ["Київ"],
x1: new Date("2024-11-10"),
x2: new Date("2024-10-10"),
y1: 7,
y2: 0,
dy: -30,
bend: true,
dx: 0
}),
Plot.ruleY([0], { stroke: "grey" }),
Plot.ruleX(["2024-10-05"], { strokeDasharray: "2 2" })
]
});
}
data = (await FileAttachment("declaration_proc@4.csv").csv()).map((d) => {
return { ...d, week: new Date(d.week), time: new Date(d.time) };
})
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.
