vis2 = {
let data_ = data.filter((d) => d.date2 > new Date("2009-01-01"));
return Plot.plot({
style: { fontWeight: 400, fontSize: 14 },
width: width > 650 ? 650 : 350,
height: 350,
marginLeft: 60,
marginRight: width > 650 ? 60 : 60,
y: {
tickFormat: (d) => d / 1000000 + " млн",
ticks: 4,
label: null,
labelArrow: null,
grid: true,
nice: true
},
x: { label: null },
marks: [
Plot.lineY(
data_,
Plot.binX(
{ y: "median" },
{
x: "date2",
y: "amount",
interval: "year",
stroke: "#00A69C",
strokeWidth: 2.5
}
)
),
Plot.dot(
data_,
Plot.binX(
{ y: "median" },
{
x: "date2",
y: "amount",
interval: "year",
fill: "#00A69C",
strokeWidth: 2.5
}
)
),
Plot.lineY(
data_,
Plot.binX(
{ y: "median" },
{
x: "date2",
y: "price",
interval: "year",
stroke: "#EA7E34",
strokeWidth: 2.5
}
)
),
Plot.dot(
data_,
Plot.binX(
{ y: "median" },
{
x: "date2",
y: "price",
interval: "year",
fill: "#EA7E34",
strokeWidth: 2.5
}
)
),
Plot.text(["Ціни на ринку"], {
x: new Date("2019-01-01"),
y: 850000,
dx: width > 650 ? 0 : -10,
dy: -5,
rotate: width > 650 ? -20 : -45,
fill: "#00A69C",
fontSize: 16,
fontWeight: 600
}),
Plot.text(["Ціни з декларацій"], {
x: new Date("2019-01-01"),
y: 500000,
dy: -10,
dx: width > 650 ? -10 : -5,
rotate: width > 650 ? -20 : -50,
fill: "#EA7E34",
fontSize: 16,
fontWeight: 600
}),
Plot.arrow([0], {
x1: new Date("2024-11-01"),
x2: new Date("2024-08-01"),
y1: 900000,
y2: 1300000,
bend: -30,
dx: 0,
dy: 5
}),
Plot.text(
["Для нових автомобілів ціни в деклараціях і ціни на ринку збігаються"],
{
x: new Date("2024-06-01"),
y: 750000,
dy: 20,
dx: width > 650 ? 10 : 15,
fontSize: 16,
fontWeight: 300,
lineWidth: width > 650 ? 10 : 8
}
),
Plot.ruleY([0])
]
});
}