d3_ = require("d3-geo@3", "d3-tile@1")
scale = 300000
width_ = 650
height = 400
data = (await FileAttachment("fires_kyiv_kharkiv_odesa@3.csv").csv()).map(
(d) => {
return {
...d,
lat: +d.latitude,
lon: +d.longitude,
brightness: +d.brightness,
frp: +d.frp,
acq_date: new Date(d.acq_date)
};
}
)
vis1 = html`
<h3 style="text-align: left">З початку 2025 року кількіть пожеж в Києві різко зросла</h3>
<div style="display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; align-items: start;">
<div>${vis1_}</div>
<div style="color:grey;font-size:12px;line-height:1;text-align: left;padding-bottom:20px;">
Дані NASA firms, аналіз ЕП<br>
</div>
`
vis1_ = Plot.plot({
height: 350,
width: width > 650 ? 650 : 350,
marginTop: 40,
style: { fontSize: 14 },
y: {
grid: true,
label: "Кількість пожеж на місяць",
// labelOffset: 45,
labelArrow: null
},
x: { label: null },
marks: [
// Plot.axisFx({ label: null, fontWeight: 700 }),
// Plot.frame(),
Plot.rectY(
data.filter((d) => ["Київ"].includes(d.city)),
Plot.binX(
{ y: "count" },
{ x: "acq_date", fill: "orangered", interval: "month" }
)
)
]
})
// data.filter((d) => d.city == "Київ")
city1 = maps(data, "Київ", 350, 350, 45000, 2.8)
city2 = maps(data, "Дніпро", 350, 350, 60000, 2.8)
city3 = maps(data, "Харків", 350, 350, 60000, 2)
city4 = maps(data, "Запоріжжя", 350, 350, 60000, 2)
city5 = maps(data, "Херсон", 350, 350, 60000, 2)
city6 = maps(data, "Луцьк", 350, 350, 65000, 3)
city7 = maps(data, "Суми", 350, 350, 60000, 2)
city8 = maps(data, "Одеса", 350, 350, 60000, 2)
// maps(data, "Луцьк", 850, 600, 150000, 2.8)
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.
