Senior Art Editor at Nature News in London.
Public
Edited
Jun 8, 2023
chart1_2023 = FileAttachment("chart1-2023.csv").csv({ typed: true })
chart1_2022 = FileAttachment("chart1-2022.csv").csv({ typed: true })
chart1_2021 = FileAttachment("chart1-2021.csv").csv({ typed: true })
chart1_2020 = FileAttachment("chart1-2020@1.csv").csv({ typed: true })
chart1_2019 = FileAttachment("chart1-2019.csv").csv({ typed: true })
data = [
...formatYearData(chart1_2023).map((d) => ({ ...d, year: "year-2023" })),
...formatYearData(chart1_2022).map((d) => ({ ...d, year: "year-2022" })),
...formatYearData(chart1_2021).map((d) => ({ ...d, year: "year-2021" })),
...formatYearData(chart1_2020).map((d) => ({ ...d, year: "year-2020" })),
...formatYearData(chart1_2019).map((d) => ({ ...d, year: "year-2019" }))
]
formatYearData = (data) =>
data.map((d) => {
const date = d["Date"];
let newDate = new Date(date);
newDate.setFullYear(2023);
const hotspotString = String(d["Year-to-date Burned Area (ha)"]);
const hotspot = parseInt(hotspotString.replace(/,/g, ""), 10);
return { date: newDate, hotspot };
})
chart1 = Plot.plot({
marginLeft: 100,
y: { grid: true, domain: [0, 5_000_000] },
color: { legend: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(data, { x: "date", y: "hotspot", stroke: "year" })
]
})
data2 = {
const data = await FileAttachment("chart2.csv").csv({ typed: true });
return data.map((d) => {
const date = d["Year"];
const fires = d["Number of large fires"];
return { date, fires };
});
}
chart2 = Plot.plot({
y: { grid: true, domain: [0, 800] },
marks: [
Plot.ruleY([0]),
Plot.lineY(data2, { x: "date", y: "fires" }),
Plot.lineY(regressionEndpoints, { x: "date", y: "fires", stroke: "red" })
]
})
ss = require("simple-statistics")
regression = ss.linearRegression(data2.map((row) => [row.date, row.fires]))
regressionLine = ss.linearRegressionLine(regression)
regressionEndpoints = [
{ date: data2[0].date, fires: regressionLine(data2[0].date) },
{
date: data2[data2.length - 1].date,
fires: regressionLine(+data2[data2.length - 1].date)
}
]
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.
