Public
Edited
Feb 4
data = (await FileAttachment("brugel@6.csv").csv()).map((d) => {
return {
...d,
date: new Date(d.date),
mln: +d.mln
// year: new Date(d.date).getUTCFullYear(),
// month: new Date(d.date).getUTCMonth()
};
})
// Plot.plot({
// style: { fontSize: 14 },
// width: 650,
// marginRight: 170,
// marginTop: 30,
// marks: [
// Plot.ruleY([0]),
// Plot.ruleX([new Date("2022-02-24")], { strokeDasharray: "2 2", dy: 0 }),
// Plot.text(["24 лютого 2022 року\n↓"], {
// frameAnchor: "top",
// lineWidth: 14,
// x: new Date("2022-02-24"),
// dy: -20,
// stroke: "white",
// strokeWidth: 4,
// fill: "#000",
// fontSize: 11
// }),
// Plot.lineY(
// data.filter(
// (d) => d["country"] == "38 countries" && d.date > new Date("2018-12-01")
// ),
// { x: "date", y: (d) => +d.mln, z: "SITC category description" }
// ),
// Plot.text(
// data.filter(
// (d) => d["country"] == "38 countries" && d.date > new Date("2018-12-01")
// ),
// Plot.selectLast({
// x: "date",
// y: (d) => d.mln,
// opacity: (d) =>
// d["SITC category description"] ==
// "Instruments and apparates (including lasers)"
// ? 0.3
// : 1,
// z: "SITC category description",
// text: "SITC category description",
// textAnchor: "start",
// dx: 3,
// lineWidth: 14,
// fontSize: 13
// })
// )
// ]
// })
// vis1 = Plot.plot({
// title:
// "Імпорт Росії вибраних категорій, що включають товари, на які поширюються експортні заборони з розвинених економік",
// style: { fontSize: 14 },
// width: 950,
// // marginRight: 170,
// marginTop: 55,
// marginBottom: 60,
// y: { label: "$ млн\nв місяць", tickFormat: (d) => d + "", labelOffset: 50 },
// marks: [
// Plot.axisFx({ lineWidth: 12, label: null }),
// Plot.ruleY([0]),
// Plot.ruleX([new Date("2022-02-24")], {
// strokeDasharray: "2 2",
// // dy: 0,
// stroke: "#ddd"
// }),
// Plot.text(["24 лютого\n2022 року"], {
// frameAnchor: "bottom",
// lineWidth: 14,
// x: new Date("2022-02-24"),
// dy: 40,
// fill: "#aaa",
// stroke: "white",
// strokeWidth: 4,
// fontSize: 11
// }),
// Plot.lineY(
// data.filter((d) => d["country"] == "38 країн" && d.month != "d12"),
// {
// x: "date",
// y: (d) => +d.mln,
// fx: "SITC category description",
// interval: "1 month",
// tip: true,
// stroke: "darkblue"
// }
// )
// ],
// caption: html`<small style="color:grey">Дані за 11 місяців 2024 року (останні доступні). Джерела даних: Bruegel based on Eurostat, General Administration of Customs - People's Republic of China, United States Census Bureau, Korea Customs Service, Ministry of Finance - Trade Statistics of Japan, Ministry of Commerce and Industry - Government of India, Office of National Statistics (UK), Turkish Statistical Institute, Swiss Federal Office for Customs and Border Security, Statistics Norway, Comex Stat (Brazil), Qazstat (Kazakhstan).
// </small>`
// })
vis1 = width > 650
? Plot.plot({
subtitle:
"Імпорт Росії вибраних категорій, що включають товари, на які поширюються експортні заборони з розвинених економік",
style: { fontSize: 14 },
width: 950,
marginLeft: 45,
marginTop: 65,
marginBottom: 60,
// x: { type: "time", domain: [new Date("2020-01-01"), new Date("2023-01-01")] },
y: {
label: "млрд на рік",
tickFormat: (d) => "$" + d + "",
labelOffset: 45,
labelAnchor: "center",
grid: true,
labelArrow: null
},
marks: [
Plot.axisFx({
lineWidth: 12,
label: null,
fontWeight: 600,
fontSize: 15
}),
Plot.text(["↑\n24 лютого\n2022 року"], {
frameAnchor: "bottom",
lineWidth: 14,
x: new Date("2022-02-24"),
dy: 50,
fill: "#aaa",
stroke: "white",
strokeWidth: 4,
fontSize: 11
}),
Plot.text(
[
"← Після початку повномасштабного вторгення Росія отримує в середньому на чверть менше імпортних машин і електроніки"
],
{
textAnchor: "start",
fx: ["Транспорт і обладнання"],
x: new Date("2019-01-01"),
y: (d) => 7800 / 1000,
dx: -12,
lineWidth: 26,
fontSize: 14
}
),
Plot.rectY(
data.filter((d) => d["country"] == "38 країн" && d.month != "12"),
Plot.binX(
{ y: "sum" },
{
x: "date",
y: (d) => +d.bln,
fx: "SITC category description",
interval: "12 month",
fill: "darkblue",
sort: { x: "y", fx: "-y" }
}
)
)
],
caption: html`<small style="color:grey">Для кожного року показані дані за 11 місяців (торгові/митні дані за грудень 2024 року для більшості країн поки не доступні). Джерело даних: Bruegel.
</small>`
})
: Plot.plot({
subtitle:
"Імпорт Росії вибраних категорій, що включають товари, на які поширюються експортні заборони з розвинених економік",
style: { fontSize: 14 },
width: 350,
height: 1150,
// marginLeft: 50,
marginTop: 65,
marginBottom: 60,
y: {
label: "млрд\nна\nрік",
tickFormat: (d) => "$" + d + "",
labelOffset: 30,
grid: true,
labelArrow: null
},
fy: { padding: 0.2 },
marks: [
Plot.axisFy({
lineWidth: 16,
label: null,
frameAnchor: "bottom",
textAnchor: "middle",
dy: 17,
fontWeight: 600,
fontSize: 15
}),
Plot.axisX({ anchor: "top", insetTop: -10 }),
Plot.axisX({ anchor: "bottom", insetBottom: -30 }),
Plot.rectY(
data.filter((d) => d["country"] == "38 країн" && d.month != "12"),
{
x: "date",
y: (d) => +d.bln,
fy: "SITC category description",
interval: "12 month",
// tip: true,
// title: (d) => `${d["SITC category description"]}`,
fill: "darkblue",
sort: { x: "y", fy: "-y" }
}
)
],
caption: html`<small style="color:grey">Для кожного року показані дані за 11 місяців (торгові/митні дані за грудень 2024 року для більшості країн поки не доступні). Джерело даних: Bruegel.
</small>`
})
// viewof year = Inputs.toggle({ label: "В річному вирмірі", value: false })
vis2 = {
const data2 = data.filter(
(d) =>
[
"Китай",
"ЄС-27",
"США",
"Туреччина",
"Китай",
"Казахстан",
"Індія",
"Південна Корея",
"Велика Британія"
].includes(d["country"]) && d.month != "12"
);
return width > 650
? Plot.plot({
subtitle: "Імпорт критичних товарів з основних регіонів і країн",
style: { fontSize: 14 },
width: 1150,
x: { ticks: 4 },
y: {
grid: true,
label: "млрд на рік",
tickFormat: (d) => "$" + d + "",
labelOffset: 45,
labelArrow: null,
labelAnchor: "center"
},
marginBottom: 60,
// marginLeft: 40,
marks: [
Plot.axisFx({ label: null, fontSize: 15, fontWeight: 600 }),
Plot.axisX({ fontSize: 13, ticks: 3 }),
Plot.text(["↑\n24 лютого\n2022 року"], {
frameAnchor: "bottom",
lineWidth: 14,
x: new Date("2022-02-24"),
dy: 50,
fill: "#aaa",
stroke: "white",
strokeWidth: 4,
fontSize: 11
}),
Plot.text(
[
"В 2024 році Китай поставив машин і електроніки до РФ на рекордну суму"
],
{
textAnchor: "start",
fx: ["США"],
x: new Date("2020-01-01"),
y: 9,
lineWidth: 22,
fontSize: 14
}
),
Plot.arrow([0], {
x1: new Date("2023-06-01"),
x2: new Date("2020-01-01"),
y1: 10,
y2: 13,
bend: -30,
strokeWidth: 1,
dx: -20,
fx: ["США"]
}),
Plot.areaY(
data2,
Plot.binX(
{ y: "sum" },
{
interval: "12 months",
x: "date",
y: (d) => +d.bln,
z: "SITC category description",
fx: "country",
tip: true,
title: (d) => `"Категорія": ${d["SITC category description"]}`,
fill: "darkblue",
strokeWidth: 0.5,
stroke: "#fff",
sort: { x: "-y", fx: "-y" }
}
)
),
Plot.text(["Транспорт"], {
textAnchor: "start",
fx: ["Китай"],
x: new Date("2021-01-01"),
y: 13,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Інстр."], {
textAnchor: "start",
fx: ["Китай"],
x: new Date("2023-07-01"),
y: 12.3,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Електро\nніка"], {
textAnchor: "start",
fx: ["Китай"],
x: new Date("2022-06-01"),
y: 7,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Офісна\nтехніка"], {
textAnchor: "start",
fx: ["Китай"],
x: new Date("2022-11-01"),
y: 4,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Телеком\nобл."], {
textAnchor: "start",
fx: ["Китай"],
x: new Date("2022-06-01"),
y: 1,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
})
],
caption: html`<small style="color:grey">Дані за 11 місяців 2024 року (останні доступні). Джерела даних: агенство Bruegel.
</small>`
})
: Plot.plot({
subtitle: "Імпорт критичних товарів з основних регіонів і країн",
style: { fontSize: 14 },
width: 350,
height: 1450,
x: { ticks: 4 },
y: {
grid: true,
label: "млрд\nна рік",
tickFormat: (d) => "$" + d + "",
labelOffset: 40,
labelArrow: null
// domain: [0, 100]
},
fy: { padding: 0.2 },
marginBottom: 60,
// marginLeft: 40,
marks: [
Plot.axisFy({
lineWidth: 16,
label: null,
frameAnchor: "bottom",
textAnchor: "middle",
dy: 17,
fontWeight: 600,
fontSize: 15
}),
Plot.axisX({ anchor: "top", insetTop: -10 }),
Plot.axisX({ anchor: "bottom", insetBottom: -30 }),
Plot.areaY(
data2,
Plot.binX(
{ y: "sum" },
{
interval: "12 months",
x: "date",
y: (d) => +d.bln,
z: "SITC category description",
fy: "country",
// tip: true,
// title: (d) => `"Категорія": ${d["SITC category description"]}`,
fill: "darkblue",
strokeWidth: 0.5,
stroke: "#fff",
sort: { x: "-y", fy: "-y" }
}
)
),
Plot.text(["Транспорт"], {
textAnchor: "start",
fy: ["Китай"],
x: new Date("2023-01-01"),
y: 14,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Інстр."], {
textAnchor: "start",
fy: ["Китай"],
x: new Date("2023-07-01"),
y: 12.5,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Електро ніка"], {
textAnchor: "start",
fy: ["Китай"],
x: new Date("2023-01-01"),
y: 8,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Офісна техніка"], {
textAnchor: "start",
fy: ["Китай"],
x: new Date("2023-01-01"),
y: 4.4,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
}),
Plot.text(["Телеком обл."], {
textAnchor: "start",
fy: ["Китай"],
x: new Date("2023-01-01"),
y: 1,
lineWidth: 12,
fontSize: 11,
fill: "#aaa"
})
],
caption: html`<small style="color:grey">Дані за 11 місяців 2024 року (останні доступні). Джерела даних: агенство Bruegel.
</small>`
});
}
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.
