Public
Edited
Aug 4
data = (await FileAttachment("infl@2.csv").csv()).map((d) => {
return { ...d, infl: +d.infl, date: new Date(d.date) };
})
vis1 = html`
<h3 style="text-align: left">Як зростали ціни</h3>
<div style="display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; align-items: start;">
<div>${vis1_}</div>
<div style="color:grey;font-size:12px;line-height:1;text-align: left;padding-bottom:20px;">
Дані: Держстат, показник інфляції до попереднього місяця. Дані представлено в кумулятивному вигляді.<br>
</div>
`
vis1_ = {
const allowedTypes = [
"Індекс споживчих цін",
"Продукти харчування",
"Алкогольні напої, тютюнові вироби",
"Одяг і взуття",
"Житло, вода, електроенергія, газ та інші види палива",
"Предмети домашнього вжитку, побутова техніка та поточне утримання житла",
"Охорона здоров’я",
"Транспорт",
"Зв’язок",
"Відпочинок і культура",
"Освіта",
"Ресторани та готелі",
"Різні товари та послуги"
];
d3.timeFormatDefaultLocale({
dateTime: "%A, %e %B %Y р. %X",
date: "%d.%m.%Y",
time: "%H:%M:%S",
periods: ["дп", "пп"],
days: [
"неділя",
"понеділок",
"вівторок",
"середа",
"четвер",
"п'ятниця",
"субота"
],
shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
months: [
"січня",
"лютого",
"березня",
"квітня",
"травня",
"червня",
"липня",
"серпня",
"вересня",
"жовтня",
"листопада",
"грудня"
],
shortMonths: [
"січ",
"лют",
"бер",
"квіт",
"трав",
"черв",
"лип",
"серп",
"вер",
"жов",
"лист",
"груд"
]
});
return Plot.plot({
style: { fontSize: 14, fontWeight: 400 },
marginTop: width > 650 ? 40 : 100,
marginBottom: 40,
// marginRight: 100,
marginLeft: 45,
y: {
// percent: true,
tickFormat: (d) => d + "%",
label: null,
labelArrow: false,
ticks: 8,
grid: true,
nice: true,
domain: [70, 180]
},
x: { nice: true, ticks: width > 650 ? 8 : 4 },
width: width > 650 ? 650 : 350,
marks: [
Plot.ruleY([0]),
Plot.lineY(
data.filter((d) => allowedTypes.includes(d.type)),
{
x: "date",
y: "infl",
z: "type",
stroke: (d) => (d.type == "Продукти харчування" ? "red" : "#999"),
opacity: 0.7,
strokeWidth: 2,
tip: true,
title: (d) => d.type
}
),
Plot.text(
[
`Продукти харчування з початку 2025 року повернули інфляційну першість: +74% до грудня 2021 року.`
],
{
x: new Date("2024-04-10"),
y: 180,
dx: width > 650 ? 0 : 0,
textAnchor: "start",
bend: true,
lineWidth: 14,
fill: "#333",
fontWeight: 300,
dy: width > 650 ? 0 : -30,
dx: width > 650 ? 0 : -40
}
),
Plot.arrow([0], {
x1: new Date("2025-02-15"),
x2: new Date("2025-04-15"),
y1: 185,
y2: 175,
bend: 30,
dy: width > 650 ? 5 : 0,
strokeWidth: 1
}),
Plot.text(
[
`В 2022 році найбільше здорожчав транспорт, коли УЗ підняла ціни на вантажні перевезення на 70%.`
],
{
x: new Date("2022-03-10"),
y: 162,
dx: width > 650 ? 0 : 0,
textAnchor: "start",
bend: true,
lineWidth: 14,
fill: "#333",
fontWeight: 300
}
),
Plot.arrow([0], {
x1: new Date("2022-11-15"),
x2: new Date("2022-12-01"),
y1: 155,
y2: 145,
bend: 30,
dx: width > 650 ? 0 : 0,
strokeWidth: 1
})
]
});
}
// vis2_ = {
// const allowedTypes2 = [
// "Продукти харчування",
// "Хліб і хлібопродукти",
// // "Хліб",
// "Макаронні вироби",
// "М’ясо та м’ясопродукти",
// "Риба та продукти з риби",
// // "Молоко, сир та яйця",
// "Молоко",
// "Сир і м’який сир (творог)",
// "Яйця",
// // "Олія та жири",
// "Масло",
// "Олія соняшникова",
// "Інші їстівні тваринні жири",
// "Фрукти",
// "Овочі",
// "Цукор",
// "Безалкогольні напої"
// ];
// d3.timeFormatDefaultLocale({
// dateTime: "%A, %e %B %Y р. %X",
// date: "%d.%m.%Y",
// time: "%H:%M:%S",
// periods: ["дп", "пп"],
// days: [
// "неділя",
// "понеділок",
// "вівторок",
// "середа",
// "четвер",
// "п'ятниця",
// "субота"
// ],
// shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
// months: [
// "січня",
// "лютого",
// "березня",
// "квітня",
// "травня",
// "червня",
// "липня",
// "серпня",
// "вересня",
// "жовтня",
// "листопада",
// "грудня"
// ],
// shortMonths: [
// "січ",
// "лют",
// "бер",
// "квіт",
// "трав",
// "черв",
// "лип",
// "серп",
// "вер",
// "жов",
// "лист",
// "груд"
// ]
// });
// return Plot.plot({
// style: { fontSize: 14, fontWeight: 400 },
// marginTop: 40,
// marginBottom: 40,
// marginRight: 100,
// marginLeft: 45,
// y: {
// // percent: true,
// tickFormat: (d) => d + "%",
// label: null,
// labelArrow: false,
// ticks: 8,
// grid: true,
// nice: true
// // domain: [70, 180]
// },
// x: { nice: true, ticks: width > 650 ? 8 : 4 },
// width: width > 650 ? 750 : 350,
// marks: [
// Plot.ruleY([0]),
// Plot.lineY(
// data.filter((d) => allowedTypes2.includes(d.type)),
// {
// x: "date",
// y: "infl",
// z: "type",
// stroke: (d) => (d.type == "Продукти харчування" ? "red" : "#333"),
// opacity: 0.7,
// tip: true
// }
// )
// ]
// });
// }
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.
