vis1_ = Plot.plot({
style: { fontSize: 14, fontWeight: 400 },
marginLeft: 50,
marginRight: width > 650 ? 150 : 10,
width: width > 650 ? 750 : 350,
marginTop: 50,
y: { label: "грн", labelArrow: null },
// x: { ticks: 1 },
fx: {
domain: [
"Цемент/М-400",
"Асф. суміш/АСГ, Кр, БНД",
"Асф. суміш/АСГ, Др, БНД",
"Фарби для дорожньої розмітки/nan"
]
},
marks: [
Plot.frame(),
Plot.axisFx({
lineWidth: width > 650 ? 10 : 6,
label: null,
fontSize: width > 650 ? 14 : 13
}),
Plot.areaY(
data.filter((d) =>
[
"Фарби для дорожньої розмітки/nan",
"Асф. суміш/АСГ, Кр, БНД",
"Асф. суміш/АСГ, Др, БНД",
"Цемент/М-400"
].includes(d.name2)
),
{
x: "date",
y1: (d) =>
d.name == "9. Фарби для дорожньої розмітки/nan" ? d.min * 50 : d.min,
y2: (d) =>
d.name == "9. Фарби для дорожньої розмітки/nan" ? d.max * 50 : d.max,
fx: "name2",
opacity: 0.6
}
),
Plot.text(
[
`Ціни на фарбу (на графіку за 50 кг) для дорожньої розмітки в кінці 2022 року коливалися в межах 100–149 грн за кг, тоді як навесні 2025 року — від 96 до 230 грн за кг.`
],
{
fx: ["Фарби для дорожньої розмітки/nan"],
x: new Date("2025-01-01"),
y: 10000,
dx: width > 650 ? 15 : 0,
textAnchor: "start",
bend: true,
lineWidth: 11,
fill: "#333",
opacity: width > 650 ? 1 : 0
}
)
]
})
data = (await FileAttachment("work_prices@2.csv").csv())
.map((d) => {
return {
...d,
// name: d["Найменування матеріалів, виробів та конструкцій"],
min: +d["Найменша ціна, грн."],
max: +d["Найбільша ціна, грн."],
date: d3.timeParse("%Y-%m")(d["Файл"]),
name2: d.name
.replace(/(\d\d\.\s)|(\d\.\s)/, "")
.replace(/Асфальтобетонна/, "Асф.")
};
})
.filter((d) => d.y1 != "" || d.y2 != "")
trend = (await FileAttachment("work_prices_total@1.csv").csv()).map((d) => {
return { ...d, y1: +d.y1, y2: +d.y2, date: new Date(d["date"]) };
})
vis2 = html`
<h3 style="text-align: left">Розкид цін на пів сотні будматеріалів в державних закупівлях</h3>
<div style="display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; align-items: start;">
<div>${vis2_}</div>
<div style="color:grey;font-size:12px;line-height:1;text-align: left;padding-bottom:20px;">Дані: https://prices.restoration.gov.ua/
</div>
</div>
`
vis2_ = {
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 },
marginLeft: 50,
y: {
domain: [-100, 100],
grid: true,
tickFormat: (d) => (d > 0 ? "+" + d + "%" : "" + d + "%")
},
x: { domain: [new Date("2022-12-01"), new Date("2025-03-01")] },
marginBottom: 40,
width: width > 650 ? 650 : 350,
marks: [
// Plot.ruleY([0], { strokeDasharray: "2 4", strokeWidth: 0.5 }),
Plot.areaY(
trend,
Plot.binX(
{ y1: "mean", y2: "mean" },
{
x: "date",
y1: "y1",
y2: "y2",
opacity: 0.6,
interval: "month"
// fill: "name"
// offset: "wiggle"
}
)
),
Plot.lineY(
trend,
Plot.binX(
{ y: "mean" },
{
x: "date",
y: "y1",
opacity: 0.9,
interval: "12 month",
strokeDasharray: "2 4",
strokeWidth: 1
}
)
),
Plot.lineY(
trend,
Plot.binX(
{ y: "mean" },
{
x: "date",
y: "y2",
opacity: 0.9,
interval: "12 month",
strokeDasharray: "2 4",
strokeWidth: 1
}
)
),
Plot.text([`Тренд максимальних цін`], {
x: new Date("2024-01-01"),
y: 65,
dx: width > 650 ? 0 : 0,
textAnchor: "start",
bend: true,
rotate: width > 650 ? -3 : -5,
fill: "#333",
stroke: "#fff"
}),
Plot.text([`Тренд мінімальних цін`], {
x: new Date("2024-01-01"),
y: -43,
dx: width > 650 ? 0 : 0,
textAnchor: "start",
bend: true,
rotate: 3,
fill: "#333",
stroke: "#fff"
})
]
});
}
data.filter((d) => d.name == "36. Цемент/М-400")
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.
