Public
Edited
Mar 11
2 forks
data = (await FileAttachment("final_data_drug_prices_@1.csv").csv())
.map((d) => {
return {
...d,
date: d3.timeParse("%m.%y")(d.date),
value: +d.value,
name: d.name.replace(".png", "")
};
})
.filter((d) => d.value > 0 && d.name != "Аспирин-кардио")
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: "Зміна відносних цін на 51 препарат",
style: { fontSize: 14 },
marginBottom: 40,
marginRight: width > 650 ? 60 : 80,
marginLeft: 45,
y: {
percent: true,
tickFormat: (d) => d + "%",
label: "Порівняно з березнем 2024 року",
labelArrow: false,
ticks: 8,
grid: true
},
// x: { grid: true },
width: width > 650 ? 650 : 350,
// marginLeft: 80,
marks: [
Plot.text(
[
`В січні середня ціна на півсотні популярних ліків в аптеках лише за один місяць підскочила одразу на 15%.`
],
{
x: new Date("2024-10-29"),
y: 1.3,
textAnchor: "end",
bend: true,
dx: 0,
lineWidth: 12
// stroke: "#fff",
// fill: "#000"
}
),
Plot.lineY(
data,
Plot.normalizeY("first", {
x: "date",
y: "value",
z: "name",
stroke: (d) => (d.name.includes(text) ? "green" : "#ddd"),
tip: true,
title: (d) => `${d.name}`,
opacity: 0.7
// strokeWidth: 1
})
),
Plot.ruleY([1], { strokeDasharray: "2 2" }),
Plot.lineY(
data,
Plot.normalizeY(
"first",
Plot.binX(
{ y: "mean" },
{
x: "date",
y: "value",
// tip: true,
interval: "months",
stroke: "red",
strokeWidth: 2.5,
dx: 25
}
)
)
),
Plot.text([`Середня зміна цін`], {
x: new Date("2025-02-05"),
y: 1.06,
dx: width > 650 ? 0 : 15,
textAnchor: "start",
bend: true,
lineWidth: 6,
fill: "red"
}),
Plot.arrow([0], {
x1: new Date("2024-11-01"),
x2: new Date("2025-01-01"),
y1: 1.3,
y2: 1.17,
bend: 30,
dx: width > 650 ? 0 : 10,
strokeWidth: 1
})
],
caption: html`<small style="color:grey">Дані: Сайт https://tabletki.ua/uk/category/256/. Назви препаратів вказані російською, оскільки в такому форматі вони записані в назві url-строки</small>`
});
}
viewof text_ = Inputs.text({ label: "Назва препарату:" })
text = text_.length < 2 ? "sss" : text_
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.
