Public
Edited
Feb 16, 2024
northernHemisphereData = FileAttachment("NH@1.Ts+dSST.csv").csv({typed: true})
printTable(northernHemisphereData)
weatherColors = ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"];
monthArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
{
const monthParam = vl.param('month_slider').bind(vl.slider(1, 12, 1).name('Month: '))
const tempLinePlot = vl.markLine()
.title('Temperature Change in Northern Hemisphere from 1880 to 2024')
.params(monthParam)
.data(northernHemisphereData)
//.transform(
// vl.filter(vl.slider)
//)
.encode(
vl.x().fieldN('Year').title('Year'),
vl.y().fieldQ(monthArray[0]).scale({domain: [-2, 2]})
)
.render()
return tempLinePlot
}
{
const selectedNeg = vl.selectPoint('select_neg').on('click').fields('J-D','D-N','DJF','MAM','JJA','SON').nearest(true).clear('dblclick')
const TempScatterPlot = vl.markCircle()
.title('Temperature Anomelies over months across years in the North Hemisphere')
.params(selectedNeg)
.transform(
vl.filter(selectedNeg)
)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('J-D','D-N','DJF','MAM','JJA','SON').title('Temperature Anomelies'),
vl.color().fieldQ('J-D','D-N','DJF','MAM','JJA','SON')
);
return vl.vconcat(tempLinePlot, TempScatterPlot).data(northernHemisphereData).render();
}
{
const selectedNeg = vl.selectPoint('select_neg').on('click').fields('J-D').nearest(true).clear('dblclick');
return vl.markCircle()
.title('Temperature Anomelies over months across years in the North Hemisphere')
.data(northernHemisphereData)
.params(selectedNeg)
.transform(
vl.filter(selectedNeg)
)
.encode(
vl.x().fieldN('Year'),
vl.y().fieldQ('J-D').scale({domain: [-1, 1]}),
// vl.color().fieldQ('J-D')
)
.render();
}
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.
