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")
)
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")
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.
