Web Datavis researcher by day, Indie Game designer by night
Public
Edited
Nov 21
all_data = {
const url = `https://prototipi.iit.cnr.it/drought_bulletin_api/spi/measures?year_range=${years[0]},${years[1]}&time_scales=${scales.join(',')}&reverse_chronology=true`;
const headers = { 'Accept': 'application/x-msgpack' };
const measures = [];
const response = await fetch(url, { headers });
for await (const item of msgpack.decodeMultiStream(response.body)) {
measures.push(item);
}
return measures;
}
flat_data = all_data
.filter(d => d.year >= years[0] && d.year < years[1] || d.year == years[1] && d.month == 1) // needed to include next january
.reduce(((a, x) => a.concat(x.values.map((d, i) => ({date: new Date(Date.UTC(x.year, x.month-1)), value: d, station: i, time_scale: x.time_scale}))) ), [])
.sort((a, b) => d3.ascending(a.date, b.date))
msgpack = require('@msgpack/msgpack')
html`
<style>
svg {
font-family: sans-serif;
}
rect.overlay {
stroke: black;
}
rect.selection {
stroke: none;
fill: steelblue;
fill-opacity: 0.6;
}
#labelleft, #labelright {
dominant-baseline: hanging;
font-size: 12px;
}
#labelleft {
text-anchor: end;
}
#labelright {
text-anchor: start;
}
</style>
`
slider_layout = ({
width: width,
height: 80,
margin: {
top: 20,
bottom: 20,
left: 40,
right: 40
}
})
import {checkbox_table} from '@nitaku/checkbox-table'
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.
