Plot.plot({
width: width,
height: 300,
marginLeft: 120,
color: {
scheme: "orrd",
reverse: false,
legend: true,
percent: true,
label: '% del territorio con sequía severa o extrema por mes',
},
y: {
tickSize: 0,
tickFormat: x => `${títulos[order_reverse[x]]}`,
label: ``
},
x: {
label: null,
tickSize: 0,
ticks: d3.utcTicks(...d3.extent(sequia, d => d.date), 10).map((d) => new Date(d)),
domain: d3.utcMonths(sequia.get('date', 0), sequia.select('date').slice(-1,).object()['date']),
tickFormat: x => x.toLocaleDateString("es-US", {year: "numeric", timeZone: 'UTC'}),
},
marks: [
Plot.cell(sequia, {
x: 'date',
y: 'order',
fill: 'sequia',
sort: {
'y': 'y'
}
})
]
})
html`
<div style="background:#f0ebe4; padding: 20px 50px; display:flex; gap:10px; flex-direction:column;">
${['Chaco', 'Chiquitania', 'Amazonas', 'Valles', 'Llanuras_Sabanas', 'Yungas_Chapare', 'Altiplano'].map(r => plot_region(r, 40))}
</div>
`
plot_region = (region, figheight=200) => {
const endDate = new Date(2023,1,0)
const data_region = data.
filter(aq.escape(d => d.region == region && d.date < endDate)).
groupby('date').
pivot('nivel', 'porcentaje').
derive({'total': d => d[0] + d[1] + d[2] + d[3] + d[4]}).
derive({
0: d => d[0] / d['total'],
1: d => d[1] / d['total'],
2: d => d[2] / d['total'],
3: d => d[3] / d['total'],
4: d => d[4] / d['total']}).
fold(['0','1','2','3','4']).
derive({key: aq.escape(d => Number(d.key))})
// derive({'key': aq.escape(aq.escape(d => niveles[d['key']]))})
// return data_region
return Plot.plot({
width: width,
height: figheight,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
marginTop: 0,
style: {
background: '#e7dfd2'
},
color: {
range: ['#d9cebaa3', '#524133'],
interpolate: d3.interpolateRgb.gamma(2.2),
reverse: false,
legend: false,
},
x: {
axis: null,
},
y: {
axis: null,
},
marks: [
Plot.areaY(
data_region,
Plot.stackY({
x: "date",
y: "value",
fill: "key",
opacity: .7
})
)
]
})
}
{
const endDate = new Date(2023,1,0)
const region = 'Chaco'
return data.
filter(aq.escape(d => d.region == region && d.date < endDate)).view()
}
sequia.view()
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.
