Published
Edited
Dec 28, 2021
5 forks
3 stars
renderer = {
const renderer = new sigma.Sigma(graph, container);
const state = {};
renderer.on("enterNode", ({ node }) => {
state.hoveredNode = node;
state.hoveredNeighbors = new Set(graph.neighbors(node));
renderer.refresh();
});
renderer.on("leaveNode", () => {
state.hoveredNode = undefined;
state.hoveredNeighbors = undefined;
renderer.refresh();
});
renderer.setSetting("nodeReducer", (node, data) => {
const res = { ...data };
if (
state.hoveredNeighbors &&
!state.hoveredNeighbors.has(node) &&
state.hoveredNode !== node
) {
res.label = "";
res.color = "#f6f6f6";
}
if (state.selectedNode === node) {
res.highlighted = true;
}
return res;
});
renderer.setSetting("edgeReducer", (edge, data) => {
const res = { ...data };
if (state.hoveredNode && !graph.hasExtremity(edge, state.hoveredNode)) {
res.hidden = true;
}
return res;
});
renderer.refresh();
return renderer;
}
graph = {
const graph = new Graph();
const [nodeCount, iterations] = [
// we don't use reactive
controls.children[0].value,
controls.children[1].value
];
for (let i = 2; i < nodeCount; i++) {
graph.addNode(i, {
nodeType: isPrime(i) ? "prime" : "composite",
label: i
});
}
for (let i = 0; i < nodeCount; i++) {
_.map(_.countBy(primeFactors(i)), (freq, factor) =>
graph.addEdge(factor, i, { weight: freq })
);
}
const degrees = graph.nodes().map((node) => graph.degree(node));
const minDegree = Math.min(...degrees);
const maxDegree = Math.max(...degrees);
const minSize = 2,
maxSize = 15;
graph.forEachNode((node, attributes) => {
const degree = graph.degree(node);
graph.setNodeAttribute(
node,
"size",
minSize +
((degree - minDegree) / (maxDegree - minDegree)) * (maxSize - minSize)
);
graph.setNodeAttribute(
node,
"color",
attributes.nodeType === "prime" ? "#33a02c" : "#e31a1c"
);
});
cropToLargestConnectedComponent(graph);
container.innerHTML = "";
circularLayout.assign(graph);
const settings = forceAtlas2.inferSettings(graph);
forceAtlas2.assign(graph, { settings, iterations });
return graph;
}
Graph = graphology.Graph
forceAtlas2 = graphologyLayoutForceatlas2.default
circularLayout = graphologyLayout.circular
cropToLargestConnectedComponent = graphologyComponents.cropToLargestConnectedComponent
graphologyLayoutForceatlas2 = import(
"https://cdn.skypack.dev/graphology-layout-forceatlas2@0.8.1?min"
)
graphologyComponents = import(
"https://cdn.skypack.dev/graphology-components@1.5.2?min"
)
graphologyLayout = import("https://cdn.skypack.dev/graphology-layout@0.5.0?min")
graphology = require("graphology@0.23.2/dist/graphology.umd.min.js")
sigma = import("https://cdn.skypack.dev/sigma@2.1.3?min")
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.
