Data sculptor
Public
Edited
Apr 11
forceGraph = {
const graph = new ForceGraph3D(domEl)
.graphData(getFabricData());
graph
.cooldownTicks(350)
.d3AlphaDecay(0.001)
.d3Force('link').iterations(30);
return graph;
//
function getFabricData() {
const perimeter = 12, length = 30;
const getId = (col, row) => `${col},${row}`;
let nodes = [], links = [];
for (let colIdx=0; colIdx<perimeter; colIdx++) {
for (let rowIdx=0; rowIdx<length; rowIdx++) {
const id = getId(colIdx, rowIdx);
nodes.push({id});
// Link vertically
if (rowIdx>0) {
links.push({ source: getId(colIdx, rowIdx-1), target: id });
}
// Link horizontally
links.push({ source: getId((colIdx || perimeter) - 1, rowIdx), target: id });
}
}
return { nodes, links };
}
}
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.
