Graphics Developer, Creative Coder, DataViz Cognoscenti
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data = {
// const url = `https://climatereanalyzer.org/clim/t2_daily/json/cfsr_world_t2_day.json`;
// const url = `https://climatereanalyzer.org/clim/t2_daily/json_cfsr/cfsr_world_t2_day.json`;
const url = `https://climatereanalyzer.org/clim/t2_daily/json/era5_world_t2_day.json`;
const url2 = new URL(`https://paulmurray.io/api/cors`);
url2.searchParams.set(`url`, url);
// return url2.toString();
const data_raw = await fetch(url2.toString()).then((res) => res.json());
const data = data_raw
.filter((d) => d.name.match(/\d{4}$/))
.map((d) => {
const { name: year, data: days } = d;
return days.map((value, day_of_year) => {
return {
year: +year,
day_of_year,
value,
raw: d
};
});
})
.flat();
const mean_by_day_of_year = d3
.rollups(
data,
(values) => {
return d3.mean(not_this_year(values), (d) => d.value);
},
(d) => d.day_of_year
)
.map(([day_of_year, mean]) => ({ day_of_year, mean }));
const with_difference_from_mean = data.map((d) => {
const found = mean_by_day_of_year.find(
(mean) => mean.day_of_year === d.day_of_year
);
const delta = found && d.value ? d.value - found.mean : null;
return {
...d,
delta,
mean: found.mean
};
});
return with_difference_from_mean;
}
function this_year(data) {
return data
.filter((d) => d.year === new Date().getFullYear())
.filter((d) => d.value);
}
function not_this_year(data) {
return data.filter((d) => d.year < new Date().getFullYear());
}
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.
