Data and Digital Storytelling Lead @ 360info.org, hosted by Monash University. ❤️ making things for fun and for social good!
Public
Edited
Mar 18
melbourne = FileAttachment("acornsat-long-annual-melbourne@1.csv").csv({ typed: true })
viewof field = Inputs.select(new Map([
["Daytime temperatures", "tmax"],
["Nighttime temperatures", "tmin"]]))
mutable filteredTemps = melbourne
updateTemps = {
document.startViewTransition(() => {
mutable filteredTemps = melbourne.filter(d => d.name == field)
})
}
tmaxPlot = Plot.plot({
marks: [
Plot.line(filteredTemps, {
x: "year",
y: "value",
stroke: field == "tmax" ? "orangered" : "royalblue"
}),
Plot.dot(filteredTemps, {
x: "year",
y: "value",
fill: field == "tmax" ? "orangered" : "royalblue",
})
],
className: "testplot"
})
mutable myDiv = html`<div></div>`
viewof field2 = Inputs.select(new Map([
["Daytime temperatures", "tmax"],
["Nighttime temperatures", "tmin"]]))
updateDivTemps = {
document.startViewTransition(() => {
mutable myDiv = html`<div class="myblock ${field2 == "tmax" ? "hot" : "cold"}"><p>${field2}</p></div>`
})
}
mutable mySVG = svg`<svg></svg>`
viewof field3 = Inputs.select(new Map([
["Daytime temperatures", "tmax"],
["Nighttime temperatures", "tmin"]]))
updateSVGTemps = {
document.startViewTransition(() => {
mutable mySVG = svg`<svg class="mysvg ${field3 == "tmax" ? "hot" : "cold"}">
<circle
cx="${field3 == "tmax" ? 100 : 50}"
cy=50
r=50
fill=${field3 == "tmax" ? "orangered" : "royalblue"}>
</circle>
</svg>`
})
}
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.
