Public
Edited
Jul 3, 2024
Fork of bro work
1 fork
1 star
Insert cell
Insert cell
ua = FileAttachment("ukraine.json").json()
Insert cell
nation = topojson.feature(ua, ua.objects.regions)
Insert cell
data = (await FileAttachment("cogere_data@1.csv").csv())
.map((d) => {
return {
...d,
date: new Date(d["Дата"]),
pow: +d.pow,
lon: d["Місто"] == "Київ" ? 30.540878 : d["lon"],
lat: d["Місто"] == "Київ" ? 50.468923 : d["lat"]
};
})
.filter((d) => d.date > new Date("2021-01-01"))
.filter((d) => d.date < new Date("2024-07-01"))
Insert cell
vis1 = Plot.plot({
style: { fontSize: 13 },
y: {
tickFormat: (d) => d / 1000,
label: "Оціночна потужність проектів, MWh в місяць",
grid: true
},
width: 350,
height: 270,
marks: [
Plot.ruleY([0]),
Plot.lineY(
data.filter((d) => d["Тип події"] != "ремонт чи обслуговування"),
Plot.bin({ y: "sum" }, { x: "date", y: "pow", interval: "1 months" })
)
]
})
Insert cell
vis2 = Plot.plot({
// style: { background: "#eee" },
width: 350,
height: 300,
// length: { range: [0, width > 650 ? 100 : 50], transform: Math.abs },
// length: { range: [0, 50], type: "sqrt", transform: Math.abs },
x: { domain: [0, 100] },
y: { domain: [0, 100] },
projection: d3.geoMercator().scale(1100).center([47, 43.7]),
// color: {
// type: "quantile",
// n: 8,
// scheme: "blues",
// // label: "Unemployment (%)",
// legend: true
// },
r: { range: [0, 15] },
marks: [
// Plot.frame(),
// Plot.graticule(),
// Plot.geo(land, { fill: "#eee" }),
// Plot.sphere(),
Plot.geo(nation, { strokeWidth: 2, stroke: "#333" }),
Plot.geo(nation, {
// fill: (d) => d.properties.label_point[0]
fill: "#eee"
// stroke: "#777",
// strokeWidth: 0.5
// strikeWidth: 1
}),

// Plot.text(
// nation.features,
// Plot.centroid({
// textAnchor: "middle",
// // filter: (d) => d.properties.name.match(/^V/),
// text: (d) => d.properties.localized_name.ua.replace(/ область/, ""),
// fill: "grey",
// stroke: "white",
// frameAnchor: "left",
// dx: 6
// })
// ),

Plot.dot(
data.filter((d) => d["Тип події"] != "ремонт чи обслуговування"),
Plot.hexbin(
{ r: "sum" },
{
x: "lon",
y: "lat",
r: "pow",
// tip: true,
fill: "orange",
stroke: "#333",
opacity: 0.7,
title: (d) => `${d["Місто"]}`
}
)
),
// Plot.dot(data, {
// x: "lon",
// y: "lat",
// r: 4,
// // length: "P15",
// // shape: barMap,
// // STYLE
// // anchor: "start",
// fill: "#D80B8C",
// fillOpacity: 0.7,
// // imageFilter: "drop-shadow(0.07rem 0.07rem 0.07rem white)"
// }),

Plot.text(
[
`Приблизно половина всіх нових когенераційних потужностей\nкраїни\nзапланована в Києві.`
],
{
frameAnchor: "left",
// textAnchor: "left",
dx: 5,
dy: 40,
fontSize: 14,
fontWeight: 300,
lineWidth: 11
}
),

Plot.arrow([0], {
x1: 26.1,
y1: 47.365355,
x2: 29.6089531,
y2: 50.565355,
// dx: -10,
// stroke: "black",
// opacity: width > 650 ? 1 : 0.1,
bend: 30,
inset: 1,
strokeWidth: 1,
strokeOpacity: 0.7
})

// Plot.geo(nation, { clip: "frame", strokeWidth: 1, stroke: "#333" })
]

// caption: htl.html`The voyage of Charles Darwin aboard HMS <i>Beagle</i>, 1831–1836.`
})
Insert cell
data.filter((d) => d["Місто"] == "Вінниця")
Insert cell
// counties = {
// var data2_ = new Map(data2.map((d) => [d["Регіон організатора"], d["expv"]]));
// for (const d of nation.features) {
// d.properties.gen = data2_.get(
// d.properties.localized_name.ua.replace(/\s.+/, "")
// );
// }
// return nation;
// }
Insert cell
data3 = (await FileAttachment("gen_total@2.csv").csv())
.map((d) => {
return {
...d,
sum: +d.sum,
date: new Date(d["Дата"])
};
})
.filter((d) => d.date > new Date("2021-01-01"))
.filter((d) => d.date < new Date("2024-07-01"))
Insert cell
vis3 = Plot.plot({
style: { fontSize: 13 },
// marginLeft: 100,
y: {
tickFormat: (d) => d / 1000000 + "",
label: "Закупівлі генераторів, млн грн в місяць",
grid: true
},
width: 350,
height: 270,
marks: [
Plot.ruleY([0]),
Plot.lineY(
data3,
Plot.bin({ y: "sum" }, { x: "date", y: "sum", interval: "1 months" })
)
]
})
Insert cell
data4 = (await FileAttachment("generator_data2.csv").csv()).map((d) => {
return {
...d,
sum: d["Місто організатора"] == "Київ" ? +d.sum - 1262401668 : +d.sum
// date: new Date(d["Дата"])
};
})
Insert cell
// data4.filter((d) => d["Місто організатора"] == "Київ")
nation
Insert cell
vis4 = Plot.plot({
// style: { background: "#eee" },
width: 350,
height: 300,
// length: { range: [0, width > 650 ? 100 : 50], transform: Math.abs },
// length: { range: [0, 50], type: "sqrt", transform: Math.abs },
// x: { domain: [0, 100] },
// y: { domain: [0, 100] },
projection: d3.geoMercator().scale(1100).center([47, 43.9]),
// color: {
// type: "sqrt"
// },
// length: { type: "sqrt" },
r: { range: [1, 15] },
marks: [
// Plot.frame(),
// Plot.graticule(),
// Plot.geo(land, { fill: "#eee" }),
// Plot.sphere(),
Plot.geo(nation, { strokeWidth: 2, stroke: "#333" }),
Plot.geo(nation, {
// fill: (d) => d.properties.label_point[0]
fill: "#eee"
// stroke: "#777",
// strokeWidth: 0.5
// strikeWidth: 1
}),

// Plot.dot(
// nation.features,
// Plot.centroid({
// fill: "orange",
// stroke: "#333",
// r: (d) => d.properties.gen
// })
// )

// Plot.text(
// nation.features,
// Plot.centroid({
// textAnchor: "middle",
// // filter: (d) => d.properties.name.match(/^V/),
// text: (d) => d.properties.localized_name.ua.replace(/ область/, ""),
// fill: "grey",
// stroke: "white",
// frameAnchor: "left",
// dx: 6
// })
// ),

Plot.dot(
data4.filter((d) => d["Місто організатора"] != "Київ"),
Plot.hexbin(
{ r: "sum" },
{
x: "lon",
y: "lat",
r: "sum",
// tip: true,
fill: "orange",
stroke: "#333",
opacity: 0.7
}
)
)
// Plot.dot(data, {
// x: "lon",
// y: "lat",
// r: 4,
// // length: "P15",
// // shape: barMap,
// // STYLE
// // anchor: "start",
// fill: "#D80B8C",
// fillOpacity: 0.7,
// // imageFilter: "drop-shadow(0.07rem 0.07rem 0.07rem white)"
// }),

// Plot.text(
// [
// `В Буську на Львівщині доступно 14 вакансій із бронюванням з майже півсотні. Це приблизно 160 вакансій на 100 тис населення (в 2021 році офіційно було орієнтовно до 9 тис).`
// ],
// {
// frameAnchor: "left",
// // textAnchor: "left",
// dx: width > 650 ? 70 : 0,
// dy: width > 650 ? 150 : 110,
// fontSize: 16,
// fontWeight: 300,
// lineWidth: width > 650 ? 16 : 11
// }
// ),

// Plot.arrow([0], {
// x1: 26.1,
// y1: 47.365355,
// x2: 29.6089531,
// y2: 50.565355,
// // dx: -10,
// // stroke: "black",
// // opacity: width > 650 ? 1 : 0.1,
// bend: 30,
// inset: 1,
// strokeWidth: 1,
// strokeOpacity: 0.7
// })

// Plot.geo(nation, { clip: "frame", strokeWidth: 1, stroke: "#333" })
]
// caption: html`<small style="color:grey">На мапі не представлений Київ, який є домінуючим покупцем генераторів (більше 600 млн грн за два роки) через розташування офісів основних держкомпаній і т.п.</small>`
})
Insert cell
vis5 = Plot.plot({
style: { background: "#eee" },
width: 600,
height: 600,
// length: { range: [0, width > 650 ? 100 : 50], transform: Math.abs },
// length: { range: [0, 50], type: "sqrt", transform: Math.abs },
// x: { domain: [0, 100] },
// y: { domain: [0, 100] },
projection: d3.geoMercator().scale(1800).center([37, 48]),
// color: {
// type: "sqrt"
// },
// length: { type: "sqrt" },
r: { range: [1, 20] },
marks: [
// Plot.frame(),
// Plot.graticule(),
// Plot.geo(land, { fill: "#eee" }),
// Plot.sphere(),
Plot.geo(nation, { strokeWidth: 2, stroke: "#333" }),
Plot.geo(nation, {
// fill: (d) => d.properties.label_point[0]
fill: "#fff"
// stroke: "#777",
// strokeWidth: 0.5
// strikeWidth: 1
}),

// Plot.dot(
// nation.features,
// Plot.centroid({
// fill: "orange",
// stroke: "#333",
// r: (d) => d.properties.gen
// })
// )

// Plot.text(
// nation.features,
// Plot.centroid({
// textAnchor: "middle",
// // filter: (d) => d.properties.name.match(/^V/),
// text: (d) => d.properties.localized_name.ua.replace(/ область/, ""),
// fill: "grey",
// stroke: "white",
// frameAnchor: "left",
// dx: 6
// })
// ),

Plot.dot(
data4.filter((d) => d["Місто організатора"] != "Київ"),
Plot.hexbin(
{ r: "sum" },
{
x: "lon",
y: "lat",
r: "sum",
tip: true,
fill: "#ec7014",
stroke: "#333",
opacity: 0.7
}
)
)
// Plot.dot(data, {
// x: "lon",
// y: "lat",
// r: 4,
// // length: "P15",
// // shape: barMap,
// // STYLE
// // anchor: "start",
// fill: "#D80B8C",
// fillOpacity: 0.7,
// // imageFilter: "drop-shadow(0.07rem 0.07rem 0.07rem white)"
// }),

// Plot.text(
// [
// `В Буську на Львівщині доступно 14 вакансій із бронюванням з майже півсотні. Це приблизно 160 вакансій на 100 тис населення (в 2021 році офіційно було орієнтовно до 9 тис).`
// ],
// {
// frameAnchor: "left",
// // textAnchor: "left",
// dx: width > 650 ? 70 : 0,
// dy: width > 650 ? 150 : 110,
// fontSize: 16,
// fontWeight: 300,
// lineWidth: width > 650 ? 16 : 11
// }
// ),

// Plot.arrow([0], {
// x1: 26.1,
// y1: 47.365355,
// x2: 29.6089531,
// y2: 50.565355,
// // dx: -10,
// // stroke: "black",
// // opacity: width > 650 ? 1 : 0.1,
// bend: 30,
// inset: 1,
// strokeWidth: 1,
// strokeOpacity: 0.7
// })

// Plot.geo(nation, { clip: "frame", strokeWidth: 1, stroke: "#333" })
]
// caption: html`<small style="color:grey">На мапі не представлений Київ, який є домінуючим покупцем генераторів (більше 600 млн грн за два роки) через розташування офісів основних держкомпаній і т.п.</small>`
})
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