hours
Type Table, then Shift-Enter. Ctrl-space for more options.
hours = (await FileAttachment("mooninfo_2023.json").json()).map((d, i) =>
Object.defineProperties(d, {
i: { value: i },
t: { value: parse(d.time) }
})
)
videoTime = orbit.currentTime = moon.currentTime = (hour.i / (hours.length - 1)) * duration
duration = Generators.observe((change) => {
const inputted = () => change(moon.duration);
moon.pause();
moon.addEventListener("loadedmetadata", inputted);
change(moon.duration || 292);
return () => moon.removeEventListener("loadedmetadata", inputted);
})
moon = combined.querySelector("video.moon")
orbit = combined.querySelector("video.orbit")
parse = d3.utcParse("%d %b %Y %H:%M UT")
<style>
form button {
width: 55px !important;
}
input[name=i] {
width: ${width - 220}px !important;
}
.combined {
position: relative;
}
.orbit {
position: absolute;
left: 10px;
top: 10px;
width: ${width / 350 * 60}px;
height: ${width / 350 * 60}px;
}
</style>
import { Scrubber } from "@mbostock/scrubber"
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.
