Public
Edited
Nov 6, 2024
Insert cell
Insert cell
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({
style: { fontSize: 13 },
marginBottom: 40,
marginTop: 50,
marginRight: 70,
height: 400,
y: {
tickFormat: (d) => d / 1000,
label: "тис грн/\nгектар",
labelArrow: false,
grid: true,
domain: [0, 70000],
nice: true
},
x: { nice: true },
width: width > 650 ? 650 : 350,
marks: [
Plot.frame({ fill: "#f5f5f5" }),
Plot.gridY({ stroke: "white", strokeOpacity: 1 }),
Plot.gridX({ stroke: "white", strokeOpacity: 1 }),
Plot.lineY(price1, {
x: "date",
y: "wpf",
stroke: "#d8b365",
strokeWidth: 2.5
}),
// Plot.ruleY([0]),
Plot.lineY(
price1.filter((d) => d.wpu > 0),
{ x: "date", y: "wpu", stroke: "#5ab4ac", strokeWidth: 2 }
),
Plot.text(["Ціни на\nринку\nфізосіб"], {
frameAnchor: "left",
// dy: width > 600 ? -10 : 0,
// dx: -100,
x: new Date("2024-07-01"),
y: 40000,
fill: "#d8b365",
dx: 5,
fontWeight: 600,
fontSize: 15
// rotate: -10
}),
Plot.text(["Ціни на\nринку\nюросіб"], {
frameAnchor: "left",
// dy: width > 600 ? -10 : 0,
// dx: -100,
x: new Date("2024-07-01"),
y: 60000,
fill: "#5ab4ac",
dx: 5,
fontWeight: 600,
fontSize: 15
// rotate: -10
})
]
});
}
Insert cell
price1 = (await FileAttachment("price1@2.csv").csv()).map((d) => {
return { wpf: +d.wpf, wpu: +d.wpu, date: new Date(d.date) };
})
Insert cell
price2 = (await FileAttachment("price2@9.csv").csv())
.map((d) => {
return {
region: d.region.replace(/\sобласть/, ""),
wpf: +d.wpf,
wpu: +d.wpu,
date: new Date(d.date)
};
})
.filter((d) => d.region != "")
Insert cell
vis2 = {
const n = width > 600 ? 8 : 2; // number of facet columns
const keys = Array.from(d3.union(price2.map((d) => d.region)));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);

return Plot.plot({
style: { fontSize: 13 },
marginTop: 50,
// marginBottom: 45,
width: width > 650 ? 1150 : 350,
// marginLeft: 602
// height: width > 600 ? 1000 : 1800,
y: {
grid: true,
tickFormat: (d) => d / 1000,
label: "тис грн/\nгектар",
labelArrow: false,
domain: [0, 175000]
},
fx: { axis: null, padding: 0.2 },
fy: { axis: null, padding: 0.2 },
// grid: true,
marks: [
Plot.axisX({
ticks: 4,
label: null
// anchor: "top",
// anchor: "bottom"
// dy: -20
}),

Plot.frame({ fill: "#f5f5f5" }),
Plot.gridY({ stroke: "white", strokeOpacity: 1 }),
Plot.gridX({ stroke: "white", strokeOpacity: 1 }),
Plot.lineY(price2, {
x: "date",
y: "wpf",
// strokeWidth: 1,
z: "region",
// curve: "catmull-rom",
// tip: true,
fx: (d) => fx(d.region),
fy: (d) => fy(d.region),
strokeWidth: 2,
stroke: "#d8b365"
}),
Plot.lineY(
price2.filter((d) => d.wpu > 0),
{
x: "date",
y: "wpu",
stroke: "#5ab4ac",
z: "region",
strokeWidth: 2,
fx: (d) => fx(d.region),
fy: (d) => fy(d.region)
// tip: true
}
),
Plot.text(keys, {
fx,
fy,
frameAnchor: "top-left",
dx: 6,
dy: -15,
stroke: "#fff",
fill: "#333",
text: (d) =>
width > 600
? d.slice(0, 28).replace(/\./, "")
: d.replace(/,.+/, "").replace(/\./, "")
// fontSize: 14
})
// Plot.text(["Ціни"], {
// frameAnchor: "top-right",
// fx: [0],
// fy: [0],
// dy: width > 600 ? 15 : 5,
// dx: -80,
// fill: "red",
// fontWeight: 600,
// fontSize: 14,
// rotate: -15
// }),
// Plot.text(["Зарплати"], {
// frameAnchor: "top-right",
// fx: [0],
// fy: [0],
// dy: 30,
// dx: -20,
// fill: "blue",
// fontWeight: 600,
// fontSize: 14,
// rotate: -20
// })
]
});
}
Insert cell

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.
Learn more