Public
Edited
Mar 4
Fork of cogene
2 forks
Importers
Insert cell
Insert cell
ua = FileAttachment("ukraine.json").json()
Insert cell
nation = topojson.feature(ua, ua.objects.regions)
Insert cell
data = (await FileAttachment("fire_nrt_J1V-C2_486768.csv").csv())
.map((d) => {
return { ...d, date: new Date(d.acq_date) };
})
.filter((d) => d.confidence == "h")
.filter(
(d) => d.date > new Date("2024-05-01") && d.date < new Date("2025-01-01")
)
Insert cell
// rest = FileAttachment("export1.geojson").json()
Insert cell
vis2 = Plot.plot({
// style: { background: "#eee" },
width: 950,
height: 500,
// 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(2200).center([34, 48.5]),
// color: {
// type: "quantile",
// n: 8,
// scheme: "blues",
// // label: "Unemployment (%)",
// legend: true
// },
r: { range: [0, 10] },
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,
// Plot.hexbin(
// { r: "sum" },
// {
// x: "longitude",
// y: "latitude",
// r: 1,
// // tip: true,
// // fill: (d) => Math.random(),
// stroke: "#333",
// opacity: 0.7,
// title: (d) => `${d["Місто"]}`
// }
// )
// ),
Plot.dot(data, {
x: "longitude",
y: "latitude",
r: 2,
// 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

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