I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
viewof filteredNodes = navio(network.nodes)
chartNodes = vl.markCircle().encode(
vl
.x()
.fieldQ("x")
.axis(null),
vl
.y()
.fieldQ("y")
.axis(null),
vl
.color()
.fieldN("cluster")
.scale({ scheme: "spectral" }),
vl.size().fieldQ("value"),
vl.text(vl.fieldN("name")),
vl.tooltip(vl.fieldN("name"))
)
chartLinks = vl.markRule()
.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("#ddd3")
);
update = (doLinks) => {
const specs = [];
if (doLinks) {
specs.push(chartLinks.data(filteredNetwork.links));
}
if (filteredNetwork.nodes.length<200) {
specs.push(chartNodes.markText().data(filteredNetwork.nodes));
} else {
specs.push(chartNodes.data(filteredNetwork.nodes));
}
vl.layer(specs)
.width(width - 100)
.height(width/2)
.render({container: target})
}
simulation = {
console.log("Start simulation");
const simulation = d3.forceSimulation(filteredNetwork.nodes)
.force("center", d3.forceCenter())
.force("charge", d3.forceManyBody().strength(-300))
.force("links", d3.forceLink(filteredNetwork.links).strength(0.05).distance(100));
simulation
.on("tick", () => update(simulation.alpha()<0.1));
invalidation.then(() => simulation.stop());
return simulation;
}
network = d3
.json(
"https://gist.githubusercontent.com/john-guerra/6b11c24ca722dba7a8d87e827a457084/raw/0d052d64cb86321bd72b1da01fe7ed96ae82f663/citationsNetwork2018.min.json"
)
.then(net => {
net.nodes.forEach(n => (n.cluster = +n.cluster));
return net;
})
.then(net => ({
...net,
links: net.links.map(l => ({
//convert the links to objects
source: net.nodes[l.source],
target: net.nodes[l.target]
}))
}))
filteredNetwork = {
return {
nodes: filteredNodes,
links: getFilteredLinks(filteredNodes)
};
}
{
return showMatrix
? vl
.markCircle()
.data(filteredNetwork.links)
.encode(
vl
.y()
.fieldO("source.name")
.sort("source.cluster")
.axis(null),
vl
.x()
.fieldO("target.name")
.sort("source.cluster")
.axis(null),
vl
.color()
.fieldN("source.cluster")
.scale({ scheme: "spectral" }),
vl.tooltip([
vl.fieldO("source.cluster"),
vl.fieldO("source.name"),
vl.fieldO("target.name")
])
)
.width(width * .8)
.height(width * .8)
.render()
: md`Click the checkbox to see the matrix 👆`;
}
getFilteredLinks = (nodes) => {
const names = nodes.map(n => n.name);
return network.links.filter(l =>
names.indexOf(l.source.name)!==-1 && names.indexOf(l.target.name)!==-1
);
}
checkbox = title => {
const control = html`<label><strong>${title} </strong><input type="checkbox"/></label>`;
const input = control.querySelector("input");
input.addEventListener("change", () => {
control.value = input.checked;
control.dispatchEvent(new CustomEvent("input"));
});
control.value = input.checked;
return control;
}
import {navio} from "@john-guerra/navio"
import { vl } from "@vega/vega-lite-api"
d3 = require("d3@5")
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.
