I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
target = html`<div></div>`
update = (doLinks) =>
vl.layer(doLinks? [chartLinks, chartNodes]: [chartNodes])
.width(width)
.height(width/2)
.render({container:target})
chartNodes = vl.markCircle()
.data(network.nodes)
.encode(
vl.x().fieldQ("x").axis(null),
vl.y().fieldQ("y").axis(null),
vl.color().fieldN("cluster")
)
chartLinks = vl.markRule()
.data(network.links)
.encode(
vl.x().fieldQ("source.x").axis(null),
vl.y().fieldQ("source.y").axis(null),
vl.x2().fieldQ("target.x"),
vl.y2().fieldQ("target.y"),
vl.color().value("#aaa3")
)
network.links
onClusterData = {
if (clusterData) {
netClustering.cluster(network.nodes, network.links);
simulation.alphaTarget(0.7);
update();
}
}
simulation = {
const simulation = d3.forceSimulation(network.nodes)
.force("charge", d3.forceManyBody().strength(-300))
.force("link", d3.forceLink(network.links).strength(0.2).distance(30));
simulation
.on("tick", () => update(simulation.alpha()<0.5));
update();
return simulation;
}
network = d3
.json(
"https://gist.githubusercontent.com/john-guerra/6b11c24ca722dba7a8d87e827a457084/raw/0d052d64cb86321bd72b1da01fe7ed96ae82f663/citationsNetwork2018.min.json"
)
.then(network => {
network.nodes.forEach(n => {
delete n.cluster;
delete n.x;
delete n.y;
});
return network;
})
import {vl} from "@vega/vega-lite-api"
d3 = require("d3@5")
// netClustering = require("netclustering")
netClustering = ""
clusterWorker({ network, id: "index" })
function clusterWorker(args) {
return Generators.observe(
worker(
cluster,
args,
`
importScripts("https://unpkg.com/netclustering/dist/netClustering.js");
`
)
);
}
function cluster({ network, nodeMap, id = "id", debug = false } = {}) {
let res = { nodes: network.nodes, links: network.links };
debug && console.log("🕸️ cluster network", network);
const before = performance.now();
// Links must be indexes or objects
if (!res?.links?.length) {
throw new Error("No Links provided");
}
debug &&
console.log(
"🕸️ res.links[0] !== 'object'",
typeof res.links[0],
typeof res.links[0] !== "object"
);
if (res.links[0][id] === undefined) {
if (!nodeMap) {
nodeMap = new Map(network.nodes.map((d) => [d[id], d]));
}
res.links = network.links.map((l) => ({
...l,
source: nodeMap.get(l.source),
target: nodeMap.get(l.target)
}));
debug &&
console.log("🕸️ Clustering... converting links to pointers ", res);
}
debug &&
console.log(
"🕸️ Clustering... nodes: ",
network.nodes.length,
" links: ",
network.links.length,
res
);
netClustering.cluster(res.nodes, res.links);
debug &&
console.log(
"🕸️ Clustering computed in ",
(performance.now() - before) / 1000
);
return res;
}
import { worker } from "@fil/worker"
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.
