Public
Edited
Aug 18, 2023
2 forks
G2Plot = require("@antv/g2plot")
lake_data=FileAttachment("lake2.csv").csv({typed:true})
// Sort lake_data by 'Year' in ascending order
lake2=lake_data.sort((a, b) => a.Year - b.Year).filter(d=>((d.Lake=='Lake Powell')&(d.Year>1980))|(d.Lake=="Lake Mead"))
lake2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bar_width=700
line2={
const wrapper = html`<div style="text-align: center; width:${bar_width}px;height: 450px;">
<h3 style="text-align: left; padding-bottom:7px">Changes in the volume of water in Lake Mead and Lake Powell </h3>
<p style="text-align: left; font-size:12px">As of 2023, the volume of water in Lake Mead and Lake Powell has decreased to around 30% of their 2000 levels.
</p>
</div>`;
const container = html`<div style="height: 340px;width:600px;text-align: center"></div>`
wrapper.appendChild(container);
const data_source=html`<div style="height: 20px;text-align: left;font-size:10px; padding-top:3px; display: inline-block"> Data Source: Lake Mead Water Database, Lake Powell Water Database</div>
<div style="height: 20px;width:130px; display:inline-block"><img src=${await ccijImageCredit.src} alt="CCIJ Image Credit" style="max-width: 100%; height: auto;" />
</div>`
wrapper.appendChild(data_source);
yield wrapper;
const line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Lake Mead and Lake Powell Average Content',
},
height: 340,
data: lake2,
padding: 'auto',
margin: 'auto',
appendPadding:10,
limitInPlot:false,
xField: 'Year',
yField: 'CONTENT',
seriesField: 'Lake',
yAxis:{
title: {
text: 'Acre feet',
style: {
fontSize: 16,
},
},
label: {
formatter: (text) => {
const value = parseInt(text, 10);
if (value >= 1000000) {
return `${value / 1000000} million`;
}
return text;
},
}
},
xAxis: {
type: 'cat',
tickInterval: 5,
},
tooltip: {
formatter: (datum) => {
const value = parseInt(datum.CONTENT, 10);
let result = {};
result.name = datum.Lake;
result.value = '';
if (value >= 1000000000) {
result.value += `${(value / 1000000000).toFixed(2)} billion acre feet`;
} else if (value >= 1000000) {
result.value += `${(value / 1000000).toFixed(2)} million acre feet`;
} else {
result.value += `${value} acre feet`;
}
// convert to cubic liters
let cubicLiters = value * 1233.48;
if (cubicLiters >= 1000000000) {
result.value += ` (${(cubicLiters / 1000000000).toFixed(2)} billion cubic liters)`;
} else if (cubicLiters >= 1000000) {
result.value += ` (${(cubicLiters / 1000000).toFixed(2)} million cubic liters)`;
} else {
result.value += ` (${cubicLiters} cubic liters)`;
}
return result;
}
},
smooth: true,
renderer:'svg'
});
line.render();
}
ccijImageCredit = FileAttachment("CCIJ-image-credit.svg").image()
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.
