Public
Edited
Mar 5
1 star
vis1 = {
d3.timeFormatDefaultLocale({
dateTime: "%A, %e %B %Y р. %X",
date: "%d.%m.%Y",
time: "%H:%M:%S",
periods: ["дп", "пп"],
days: [
"неділя",
"понеділок",
"вівторок",
"середа",
"четвер",
"п'ятниця",
"субота"
],
shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
months: [
"січня",
"лютого",
"березня",
"квітня",
"травня",
"червня",
"липня",
"серпня",
"вересня",
"жовтня",
"листопада",
"грудня"
],
shortMonths: [
"січ",
"лют",
"бер",
"квіт",
"трав",
"черв",
"лип",
"серп",
"вер",
"жов",
"лист",
"груд"
]
});
const plot1 = Plot.plot({
subtitle: "Приріст маневрених потужностей по даті введеня в експлуатацію",
style: { fontSize: 14, fontWeight: 400, color: "#333" },
y: {
domain: [0, 4000],
label: null,
labelArrow: null,
labelOffset: 30,
nice: true
},
x: {
domain: [new Date("2024-07-01"), new Date("2028-01-01")],
label: null
// nice: true
},
marginTop: 30,
marginBottom: 100,
marginLeft: 160,
width: 850,
marks: [
Plot.ruleY([4000], { strokeDasharray: "2 2" }),
Plot.dot(data, {
x: "date_end",
y: "cum",
tip: true,
opacity: 1,
r: 3.5,
title: (d) =>
`Потужність: ${d.power} мВт\n\nІніціатор: ${d["Ініціатор"]}\nКод проєкту на сайті DREAM: ${d["Код проєкту"]}`
}),
Plot.line(data, {
x: "date_end",
y: "cum",
stroke: "orange",
strokeWidth: 6,
opacity: 0.7
}),
Plot.arrow([0], {
x1: new Date("2024-01-01"),
x2: new Date("2024-04-15"),
y1: 3500,
y2: 4000,
bend: 40,
dx: -10
}),
Plot.arrow([0], {
x1: new Date("2025-04-01"),
x2: new Date("2025-02-01"),
y1: -400,
y2: 100,
bend: -30,
dx: -15
}),
Plot.arrow([0], {
x1: new Date("2025-04-01"),
x2: new Date("2025-06-01"),
y1: 1000,
y2: 700,
bend: -30,
dx: -10
}),
Plot.arrow([0], {
x1: new Date("2026-09-01"),
x2: new Date("2026-07-01"),
y1: 1750,
y2: 2200,
bend: 30,
dx: -12
}),
Plot.arrow([0], {
x1: new Date("2027-07-11"),
x2: new Date("2027-11-01"),
y1: 1750,
y2: 2600,
bend: -30,
dx: -12
}),
Plot.text([`мВт`], {
frameAnchor: "top-left",
fontSize: 16,
x: new Date("2024-04-20"),
y: 4300,
dx: -5,
fill: "#000",
fontWeight: 700
}),
// Plot.text([`Запланована дата введеня в експлуатацію`], {
// frameAnchor: "bottom-right",
// fontSize: 14,
// x: new Date("2028-01-20"),
// y: -600,
// dx: -5,
// fill: "#000",
// fontWeight: 600
// }),
Plot.text(
[
`"Україна має план як збудувати до 1 гігавата потужностей маневрової газової генерації вже цього року, і ще 4 гігавати – упродовж наступних років", - Зеленський`
],
{
frameAnchor: "top-left",
lineWidth: 10,
x: new Date("2023-07-20"),
y: 3450,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
),
Plot.text(
[`На початок 2025 року заплановане введення проектів лише на 150 мВт.`],
{
frameAnchor: "top-left",
lineWidth: 14,
x: new Date("2025-01-01"),
y: -500,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
),
Plot.text(
[
`Укрзалізниця хоче побудувати в девʼяти областях України 15 електростанцій з виробництва електричної енергії з використанням газопоршневих генераторів загальною потужністю до 250 МВт.`
],
{
frameAnchor: "top-left",
lineWidth: 14,
x: new Date("2024-09-01"),
y: 2500,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
),
Plot.text(
[
`"Укрнафта" прийняла стратегічне рішення піти у електровиробники. Компанія хоче побудувати 500 мВт в Полтавській області і 320 мВт - у Львівській`
],
{
frameAnchor: "middle",
lineWidth: 16,
x: new Date("2026-11-24"),
y: 1300,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
)
],
caption: html`<small style='color:grey;text-align: start;'>Наведіть, щоб побачити деталі ${iconHandTap}<br></small>
<small style="color:grey">Дані: bi.dream.gov.ua. Для аналізу серед більше 10,8 тис проектів були відібрані ті, де вказані генеруючі потужності.</small>`
});
const plot2 = Plot.plot({
subtitle: "Приріст маневрених потужностей по даті введеня в експлуатацію",
style: { fontSize: 14, fontWeight: 400, color: "#333" },
y: {
domain: [0, 4000],
label: null,
labelArrow: null,
labelOffset: 30,
nice: true
},
x: {
domain: [new Date("2024-07-01"), new Date("2028-01-01")],
label: null
// nice: true
},
marginTop: 100,
marginBottom: 100,
marginLeft: 45,
width: 350,
marks: [
Plot.ruleY([4000], { strokeDasharray: "2 2" }),
Plot.dot(data, {
x: "date_end",
y: "cum",
tip: true,
opacity: 1,
title: (d) =>
`Потужність: ${d.power} мВт\n\nІніціатор: ${d["Ініціатор"]}\nКод проєкту на сайті DREAM: ${d["Код проєкту"]}`
}),
Plot.line(data, {
x: "date_end",
y: "cum",
stroke: "orange",
strokeWidth: 4,
opacity: 0.7
}),
Plot.arrow([0], {
x1: new Date("2025-08-01"),
x2: new Date("2025-04-01"),
y1: -400,
y2: 100,
bend: -30,
dx: -15
}),
Plot.arrow([0], {
x1: new Date("2025-04-01"),
x2: new Date("2025-06-01"),
y1: 1200,
y2: 700,
bend: -30,
dx: -10
}),
Plot.arrow([0], {
x1: new Date("2026-09-01"),
x2: new Date("2026-07-01"),
y1: 1750,
y2: 2200,
bend: 30,
dx: -5
}),
Plot.arrow([0], {
x1: new Date("2027-07-11"),
x2: new Date("2027-11-01"),
y1: 1750,
y2: 2600,
bend: -30,
dx: 0
}),
Plot.text([`мВт`], {
frameAnchor: "top-left",
fontSize: 16,
x: new Date("2024-04-20"),
y: 4300,
dx: -20,
fill: "#000",
fontWeight: 700
}),
Plot.text(
[
`"Україна має план як збудувати до 1 гігавата потужностей маневрової газової генерації вже цього року, і ще 4 гігавати – упродовж наступних років", - Зеленський`
],
{
frameAnchor: "top-left",
lineWidth: 22,
x: new Date("2024-05-10"),
y: 4800,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
),
Plot.text(
[`На початок 2025 року заплановане введення проектів лише на 150 мВт.`],
{
frameAnchor: "top-left",
lineWidth: 14,
x: new Date("2024-01-01"),
y: -500,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
),
Plot.text(
[
`Укрзалізниця хоче побудувати в девʼяти областях України 15 електростанцій з виробництва електричної енергії з використанням газопоршневих генераторів загальною потужністю\nдо 250 МВт.`
],
{
frameAnchor: "top-left",
lineWidth: 10,
x: new Date("2024-05-01"),
y: 3500,
dx: 25,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
),
Plot.text(
[
`"Укрнафта" прийняла стратегічне рішення піти у електровиробники. Компанія хоче побудувати 500 мВт в Полтавській області і 320 мВт - у Львівській`
],
{
frameAnchor: "middle",
lineWidth: 12,
x: new Date("2026-11-24"),
y: 1000,
dx: 15,
// stroke: "white",
strokeWidth: 4,
fill: "#000",
fontWeight: 300
}
)
],
caption: html`<small style='color:grey;text-align: start;'>Наведіть, щоб побачити деталі ${iconHandTap}<br></small>
<small style="color:grey">Дані: bi.dream.gov.ua. Для аналізу серед більше 10,8 тис проектів були відібрані ті, де вказані генеруючі потужності.</small>`
});
return width > 650 ? plot1 : plot2;
}
data.filter((d) => d.power > 200)
d3.sum(
data.filter((d) => d.date_end < new Date("2024-12-31")),
(d) => d.power
)
import { nation } from "0e44c0015e496ab2"
data = (await FileAttachment("dream@9.csv").csv())
.map((d) => {
return {
...d,
date_start: new Date(d["Дата створення проєкту"]),
date_end: new Date(d["end_date"]),
power: +d.power,
cum: +d.cumulative_power,
cum_fin: +d.cumulative_power_fin,
fin: +d["Фінансове покриття"]
};
})
.filter((d) => d.dur < 60)
data2 = [
{ region: "Вінницька", X: 2, Y: 3, "2021": 74.356 },
{ region: "Волинська", X: 0, Y: 2, "2021": 0 },
{ region: "Дніпро.", X: 5, Y: 3, "2021": 442.0 },
{ region: "Донецька", X: 6, Y: 3, "2021": 8.0 },
{ region: "Житомирська", X: 2, Y: 1, "2021": 20.86 },
{ region: "Закарпатська", X: 0, Y: 4, "2021": 0 },
{ region: "Запорізька", X: 5, Y: 4, "2021": 1.35 },
{ region: "Івано-Франк.", X: 1, Y: 3, "2021": 50.55 },
{ region: "Київ", X: 3, Y: 3, "2021": 0 },
{ region: "Київська", X: 3, Y: 2, "2021": 34.380554 },
{ region: "Кіровоградська", X: 4, Y: 3, "2021": 1.521 },
{ region: "Львівська", X: 0, Y: 3, "2021": 410.0 },
{ region: "Миколаївська", X: 4, Y: 4, "2021": 136.2 },
{ region: "Одеська", X: 3, Y: 4, "2021": 108.6 },
{ region: "Полтавська", X: 4, Y: 2, "2021": 980 },
{ region: "Рівненська", X: 1, Y: 1, "2021": 1.125 },
{ region: "Сумська", X: 4, Y: 1, "2021": 3.754 },
{ region: "Тернопільська", X: 1, Y: 2, "2021": 0 },
{ region: "Харківська", X: 5, Y: 2, "2021": 156.542 },
{ region: "Херсонська", X: 4, Y: 5, "2021": 0.19 },
{ region: "Хмельницька", X: 2, Y: 2, "2021": 2.68 },
{ region: "Черкаська", X: 3, Y: 3, "2021": 24.2 },
{ region: "Чернівецька", X: 1, Y: 4, "2021": 63.0 },
{ region: "Чернігівська", X: 3, Y: 1, "2021": 54.96 },
{ region: "АРК Крим", X: 4, Y: 6, "2021": 0 },
{ region: "Луганська", X: 6, Y: 2, "2021": 1.0 }
]
vis2 = {
const n = 4; // number of facet columns
const keys = Array.from(d3.union(data.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({
// aspectRatio: 1,
style: { fontSize: 14 },
width: width > 650 ? 700 : 350,
height: 550,
marginRight: width > 650 ? 0 : 0,
marginBottom: 30,
marginTop: width > 650 ? 0 : 50,
fx: { padding: 0.2 },
fy: { padding: 0.2 },
// y: { domain: [0, 11070] },
// x: { domain: [0, 11070] },
axis: null,
marks: [
Plot.rect(data2, {
x1: 0,
y1: 0,
x2: 31,
y2: 31,
fill: "none",
stroke: "#000",
fx: (d) => (width > 600 ? d.X : fx(d.region)),
fy: (d) => (width > 600 ? d.Y : fy(d.region)),
tip: true
// strokeDasharray: 4
}),
Plot.rect(data2, {
x1: 0,
y1: 0,
x2: (d) => d3.scaleSqrt()(d["2021"]),
y2: (d) => d3.scaleSqrt()(d["2021"]),
fill: "#1d91c0",
opacity: 0.8,
stroke: "#000",
fx: (d) => (width > 600 ? d.X : fx(d.region)),
fy: (d) => (width > 600 ? d.Y : fy(d.region)),
tip: true
// title: (d) =>
// `Податки в 2021 році: ${(d["2021"] / 1000000000).toFixed(
// 2
// )} млрд\nПодатки в 2024 році: ${(d["2024"] / 1000000000).toFixed(
// 2
// )} млрд`
}),
Plot.text(data2, {
fx: (d) => (width > 600 ? d.X : fx(d.region)),
fy: (d) => (width > 600 ? d.Y : fy(d.region)),
frameAnchor: "bottom-left",
filter: (d) => d.region != "Сумська",
dx: 0,
dy: 12,
fontWeight: 300,
text: (d) => d.region,
fontSize: width > 600 ? 13 : 10
}),
Plot.text(
[
"Доходи громад Дніпропетровщини зросли на 47%, у порівнянні з 2021 роком - це середній показник по регіонах"
],
{
fx: [width > 650 ? 5 : 2],
fy: [1],
frameAnchor: width > 650 ? "bottom-right" : "bottom-right",
// textAnchor: "end",
dx: width > 650 ? 20 : 30,
dy: width > 650 ? 10 : -155,
fontWeight: 400,
lineWidth: width > 650 ? 14 : 22
// opacity: width > 600 ? 1 : 0.1
}
)
// Plot.arrow([0], {
// x1: 1,
// x2: 0,
// y1: 2,
// y2: 0,
// fx: [width > 650 ? 5 : 2],
// fy: [2],
// bend: 20,
// strokeWidth: 1,
// dx: 90,
// dy: 5,
// opacity: width > 650 ? 1 : 0
// })
]
});
}
import {
franklinLight,
iconArrowCursor,
iconHandTap
} from "@shadfriguii/fonts-and-icons"
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.
