Published
Edited
Jul 29, 2021
3 stars
PIXEL = {
var container = md`<div style="width:${width}px; height: 400px">`;
yield container; // the container must exist before we call ngraph.pixel
var pix = ngraph.pixel(G, { container });
invalidation.then(() => {
pix = null;
}); // not sure how to dispose of the old renderer(???)
}
ngraph = ({
graph: await import("https://cdn.skypack.dev/ngraph.graph@19").then(
(d) => d.default
),
hits: await import("https://cdn.skypack.dev/ngraph.hits@2").then(
(d) => d.default
),
cw: await import("https://cdn.skypack.dev/ngraph.cw@2").then(
(d) => d.default
),
louvain: await import("https://cdn.skypack.dev/ngraph.louvain@2").then(
(d) => d.default
),
pixel: await import("https://cdn.skypack.dev/ngraph.pixel@2").then(
(d) => d.default
),
pagerank: await import("https://cdn.skypack.dev/ngraph.pagerank@2").then(
(d) => d.default
),
generators: await import("https://cdn.skypack.dev/ngraph.generators@19").then(
(d) => d.default
)
})
G = ngraph.generators.balancedBinTree(5)
// G = ngraph.generators.wattsStrogatz(100, 20, 0.50)
// G = ngraph.generators.grid3(5, 5, 5)
PAGERANK = ngraph.pagerank(G)
HUBS_AUTHORITIES = ngraph.hits(G)
CLUSTERS = {
var clusters = ngraph.louvain(G);
// now you can iterate over each node and get its community (aka class):
var classes = [];
G.forEachNode(function(node) {
classes.push( clusters.getClass(node.id) );
});
return classes;
}
LARGESTCLUSTER = {
var L = [];
CLUSTERS.forEach((i,j) => (L[i] || (L[i] = [])).push(j));
var M = [];
G.forEachNode(function(node) {
if (L[node.id] && L[node.id].length > M.length) M = L[node.id];
});
return M;
}
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.
