const data = {
nodes: [
{ id: 1, group: 1 },
{ id: 2, group: 1 },
{ id: 3, group: 1 },
{ id: 4, group: 1 },
{ id: 5, group: 1 },
{ id: 6, group: 1 },
{ id: 7, group: 1 },
{ id: 8, group: 1 },
{ id: 9, group: 1 }
],
links: [
{ source: 1, target: 2, value: 1 },
{ source: 1, target: 3, value: 1 },
{ source: 2, target: 4, value: 1 },
{ source: 2, target: 5, value: 1 },
{ source: 3, target: 6, value: 1 },
{ source: 3, target: 7, value: 1 },
{ source: 4, target: 8, value: 1 },
{ source: 4, target: 9, value: 1 }
]
};
height = 600
svg = select("body").append("svg").attr("width", width).attr("height", height)
chartLoop = {
redraw;
const currentData = mutable mutData;
function mount() {
const wrapper = html`<div></div>`;
const forceGraph = ForceGraph()(wrapper);
return {
wrapper,
forceGraph,
data: currentData
};
}
const currentContext = this || mount();
currentContext.forceGraph.graphData(currentData);
currentContext.data = currentData;
return currentContext;
}
{
const t = setInterval(() => {
mutable redraw = Math.floor(Date.now() / 1000);
}, 1000);
invalidation.then(() => clearInterval(t));
}
ForceGraph = import("https://cdn.skypack.dev/force-graph@1.43.0").then(
(mod) => mod.default
)
newprice2 = FileAttachment("newprice2.json").json()
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.
