Temperature Profiles
viewof profiles = aq
.fromCSV(await FileAttachment('profiles.csv').text({typed:true}))
.view({ height: 240 }) // set maximum height of table viewer in pixels
viewProfTable = profiles
.derive({ date: d => op.parse_date(d.timestamp) })
.view(75)
profilesDated = profiles
.derive({date: d => op.parse_date(d.timestamp)})
.filter(d => d.group_name === "Lake Washington Profiles")
plotFirstProfiles = Plot.plot(
{
y: {reverse: true, label: "Depth (m)"},
x: {label: "Temperature"},
width: 450,
height: 350,
color: {legend: true, scheme: "Viridis", label: ""},
marks: [
Plot.line(profilesDated,
{
x: "temperature",
y: "depth",
stroke: "date",
tip: true,
}
)
]}
)
viewof dateListPick = Plot.plot({
width: 500,
color: {scheme: "Viridis"},
marks: [
Plot.tickX(profilesDated,
{
x: "date",
stroke: "date",
strokeWidth: 3,
}),
Plot.tickX(profilesDated,
Plot.pointerX({
inset: -3,
x: "date",
stroke: "red",
strokeWidth: 4,
tip: true,
})
)
]
})
id = dateListPick ? dateListPick.id : -1
subset = profilesDated.filter(aq.escape(d => d.id == id))
callPlotProfiles = plotProfiles(profilesDated, subset)
function plotProfiles(data, subset) {
const plot = Plot.plot(
{
title: "Temperature profiles from Lake Washington",
y: {reverse: true, label: "Depth (m)"},
x: {label: "Temperature"},
width: 450,
height: 350,
color: {legend: true, scheme: "Viridis", label: ""},
marks: [
Plot.line(data,
{
x: "temperature",
y: "depth",
stroke: "date",
tip: true,
}
),
Plot.line(subset,
{
x: "temperature",
y: "depth",
stroke: "red",
strokeWidth: 3,
}
), ]}
);
return plot;
}
viewof profileStats = aq
.fromCSV(await FileAttachment('profiles_summary.csv').text({typed:true}))
.derive({ date: d => op.parse_date(d.timestamp) })
.filter(d => d.group_name === "Lake Washington Profiles")
.view({ height: 240 })
viewof profileStatsSurfBot = aq
.fromCSV(await FileAttachment('profiles_summary.csv').text({typed:true}))
.derive({ date: d => op.parse_date(d.timestamp) })
.filter(d => d.group_name === "Lake Washington Profiles")
.fold(["bottom_temperature", "surface_temperature"], { as: ['type', 'temperature'] })
.view({ height: 240 })
Prep the subset for plotting
subsetStats = profileStatsSurfBot.filter(aq.escape(d => d.id == id))
plotTemperatureStats = Plot.plot({
title: "Surface and bottom temperatures for each profile",
color: {scheme: "Viridis"},
y: {label: "Temperature (°C)"},
width: 500,
height: 250,
marks: [
Plot.line(profileStats,
{
x: "date",
y: "bottom_temperature",
stroke: "lightgray",
strokeWidth: 3,
strokeOpacity: .5,
}),
Plot.line(profileStats,
{
x: "date",
y: "surface_temperature",
stroke: "lightgray",
strokeWidth: 3,
strokeOpacity: .5,
}),
Plot.dot(profileStatsSurfBot,
{
x: "date",
y: "temperature",
symbol: "type",
stroke: "date",
strokeWidth: 2,
r: 5,
}),
Plot.dot(subsetStats,
{
x: "date",
y: "temperature",
symbol: "type",
stroke: "red",
strokeWidth: 3,
r: 5,
}),
]
})
PlotThermoclineDepth = Plot.plot({
title: "Thermocline depth for each profile",
color: {scheme: "Viridis"},
y: {reverse: true},
width: 500,
height: 250,
marks: [
Plot.line(profileStats,
{
x: "date",
y: "thermocline_depth",
stroke: "lightgray",
strokeWidth: 3,
strokeOpacity: .5,
}),
Plot.dot(profileStats,
{
x: "date",
y: "thermocline_depth",
fill: "date",
r: 5,
}),
Plot.dot(subsetStats,
{
x: "date",
y: "thermocline_depth",
fill: "red",
r: 7,
}),
]
})
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.
