Public
Edited
Apr 23, 2023
3 forks
3 stars
graph = {
return new graphlib.Graph({
nodes: data.nodes,
edges: data.edges,
});
}
circular = {
return new Layout.CircularLayout({
center: [200, 200],
radius: 150,
});
};
positions = {
return await circular.execute(graph);
}
displayNodesAndEdges(positions)
random = {
return new Layout.RandomLayout();
};
{
const positions = await random.execute(graph, {
center: [centerXInRandomLayout, centerYInRandomLayout],
width: widthInRandomLayout,
height: heightInRandomLayout
});
return displayNodesAndEdges(positions);
}
grid = {
return new Layout.GridLayout();
};
mds = {
return new Layout.MDSLayout({
center: [200, 200]
});
};
concentric = {
return new Layout.ConcentricLayout({
center: [200, 200],
width: 400,
height: 400,
maxLevelDiff: 1.5
});
}
radial = {
return new Layout.RadialLayout({
center: [200, 200],
width: 400,
height: 400,
});
}
fruchterman = {
return new Layout.FruchtermanLayout({
center: [centerXInFruchtermanLayout, centerYInFruchtermanLayout],
width: widthInFruchtermanLayout,
height: heightInFruchtermanLayout,
maxIteration: maxIterationInFruchtermanLayout,
gravity: gravityInFruchtermanLayout,
speed: speedInFruchtermanLayout
});
}
// viewof stopOrRestart = Inputs.button(
// [
// ["Stop", (value) => 0],
// ["Restart", (value) => 1]
// ],
// { value: 0 }
// )
d3force = {
return new Layout.D3ForceLayout({
center: [200, 200]
});
}
forceAtlas2 = {
return new Layout.ForceAtlas2Layout({
center: [centerXInForceAtlas2Layout, centerYInForceAtlas2Layout],
kr: krInForceAtlas2Layout,
kg: kgInForceAtlas2Layout,
ks: ksInForceAtlas2Layout,
tao: taoInForceAtlas2Layout,
preventOverlap: preventOverlapInForceAtlas2Layout,
dissuadeHubs: dissuadeHubsInForceAtlas2Layout,
barnesHut: barnesHutInForceAtlas2Layout
});
}
dagre = {
return new Layout.DagreLayout({
nodeOrder: nodeOrderInDagreLayout ? ["2", "3"] : undefined,
begin: [beginXInDagreLayout, beginYInDagreLayout],
rankdir: rankdirInGridLayout,
align: alignInGridLayout,
nodesep: nodesepInDagreLayout,
ranksep: ranksepInDagreLayout,
controlPoints: true
});
}
positionsCalculatedInWebWorker = await calculateLayoutInWebWorker()
positionsGridLayoutCalculatedInWebWorker = await calculateGridLayoutInWebWorker()
displayNodesAndEdges(positionsGridLayoutCalculatedInWebWorker)
positionsMDSLayoutCalculatedInWebWorker = await calculateMDSLayoutInWebWorker();
displayNodesAndEdges(positionsMDSLayoutCalculatedInWebWorker)
displayNodesAndEdges(positionsConcentricLayoutCalculatedInWebWorker)
displayNodesAndEdges(positionsForceAtlas2LayoutCalculatedInWebWorker)
positionsDagreLayoutCalculatedInWebWorker = await calculateDagreLayoutInWebWorker()
displayNodesAndEdges(positionsDagreLayoutCalculatedInWebWorker, true, true)
graphlib = require("@antv/graphlib@2.0.0")
Layout = require("@antv/layout@1.0.0-alpha.19")
G = require("@antv/g")
Canvas2D = require("@antv/g-canvas@latest")
SVG = require("@antv/g-svg")
Dragndrop = require("@antv/g-plugin-dragndrop")
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.
