vis12 = Plot.plot({
// subtitle: "Як змінилася кількість ДТП з постраждалими і загиблими",
style: { fontSize: 14, background: "#f7f7f7" },
width: width > 650 ? 650 : 350,
// height: 650,
color: { range: ["#b35806", "#998ec3", "#542788"] },
marginLeft: 130,
marginBottom: 45,
x: {
type: "linear",
tickFormat: (d) => d + "",
label: "Кількість ДТП з постраждалими і загиблими",
labelArrow: null
},
y: {
type: "band",
// nice: true,
labelArrow: null,
grid: true,
label: null
},
// fx: { padding: 0.1 },
marks: [
Plot.ruleY(
data,
Plot.groupY(
{ x1: "min", x2: "max" },
{ y: "region", x: "count", strokeWidth: 1, stroke: "#8073ac" }
)
),
Plot.text([{ region: "Дніпропетровська", text: "2021", count: 1970 }], {
frameAnchor: "middle",
y: "region",
x: "count",
text: "text",
dy: 0,
dx: width > 650 ? 0 : -10,
fill: "#998ec3",
fontSize: 11,
fontWeight: 600
}),
Plot.text([{ region: "Дніпропетровська", text: "2019", count: 2150 }], {
frameAnchor: "middle",
y: "region",
x: "count",
text: "text",
dy: -10,
dx: width > 650 ? 0 : -10,
fill: "#b35806",
fontSize: 11,
fontWeight: 600
}),
Plot.text([{ region: "Дніпропетровська", text: "2024", count: 2380 }], {
frameAnchor: "middle",
y: "region",
x: "count",
text: "text",
dy: -10,
fill: "#542788",
fontSize: 11,
fontWeight: 600
}),
Plot.dot(data, {
y: "region",
x: "count",
strokeWidth: 2,
tip: true,
title: (d) => `${d.count} ДТП з наслідками в ${d.year} році`,
fill: "year",
r: 4,
opacity: 0.9,
sort: { y: "-x" }
})
],
caption: html`<small style="color:grey; text-align: left;line-height: 1;">Дані: Статистичні дані НПУ <a target="_blank" href='https://patrolpolice.gov.ua/statystyka/'>https://patrolpolice.gov.ua/statystyka/</a></small>.`
})
data = (await FileAttachment("dtp@1.tsv").tsv())
.map((d) => {
return { ...d, count: +d.count, region: d.region.replace("*", "") };
})
.sort((a, b) => a.year - b.year)
.filter((d) => d.region != "Севастополь" && d.region != "АР Крим")
.filter((d) => ["2019", "2021", "2024"].includes(d.year))
data_trend = d3
.rollups(
data,
(v) => d3.sum(v, (d) => d.count),
(d) => d.year
)
.map((d) => {
return { region: "Україна", year: d[0], count: d[1] };
})
data_full = (await FileAttachment("dtp_full.csv").csv()).map((d) => {
return {
...d,
art:
d.art == "286-1"
? "ч 1 ст 286 (Середня тяжкість)"
: d.art == "286-2"
? "ч 2 ст 286 (Тяжкі травми або загибель)"
: "ч 3 ст 286 (Більше одного загиблого)"
};
})
vis2 = Plot.plot({
subtitle:
"Більшість вироків за ДТП з суттєвими наслідками чи загиблими - умовні",
width: width > 650 ? 650 : 350,
style: {
fontSize: 14
// background: `url(${await FileAttachment("sea-ice.jpg").url()})`,
// backgroundSize: "cover"
},
color: { range: ["#542788", "#d8daeb"] },
// marginLeft: 75,
marginTop: 40,
marginBottom: 60,
height: width > 650 ? 400 : 450,
x: { type: "band" },
y: {
labelArrow: null,
tickFormat: (d) => d + "",
label: "Кількість вироків в\n2023-2024 роках"
},
fx: { label: null },
// y: { label: null },
marks: [
Plot.axisFx({
lineWidth: width > 650 ? 12 : 8,
anchor: "bottom",
fontWeight: 300,
fontSize: width > 650 ? 16 : 14
}),
Plot.waffleY(
data_full,
Plot.groupZ(
{ y: "count" },
{ fill: "Іспитовий", sort: "Іспитовий", fx: "art", unit: 1 }
)
),
Plot.text([`Іспитовий термін (умовне покарання)`], {
fx: ["ч 2 ст 286 (Тяжкі травми або загибель)"],
frameAnchor: "middle",
// textAnchor: "end",
bend: true,
// dx: width > 650 ? -8 : 0,
// y: width > 650 ? 32 : 18,
lineWidth: 8,
fill: "#000",
stroke: "#fff",
strokeWidth: 4
}),
Plot.text([`Ув'язнення`], {
fx: ["ч 1 ст 286 (Середня тяжкість)"],
frameAnchor: "bottom",
// textAnchor: "end",
bend: true,
dy: -10,
// dx: width > 650 ? -8 : 0,
// y: width > 650 ? 32 : 18,
lineWidth: 8,
fill: "#000",
stroke: "#fff",
strokeWidth: 4
})
],
caption: html`<small style="color:grey; text-align: left;line-height: 1;">Дані: Власний аналіз Реєстру судових рішень за 2023 та 2024 роки, лдоступний на порталі відкритих даних data.gov.ua, доступного за <a target="_blank" href='https://data.gov.ua/dataset/ediniy-derzhavniy-reestr-sudovih-rishen-za-2023-rik_826'>посиланням</a></small>.`
})
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.
