Public
Edited
Dec 25, 2023
data = {
const {nodes, links} = await FileAttachment("sfhh@4.json").json();
}
times = d3.scaleTime()
.domain([d3.min(data.nodes, d => d.start), d3.max(data.nodes, d => d.end)])
.tincks(1000)
.filter(time => data.nodes.some(d => contains(d, time)))
contains =({start, end}, time) => start <= time && time <end
drag = simulation => {
function dragstarted(event, d) {
if(!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if(!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
}
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.
