I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Mar 24
Paused
Importers
5 stars
matrixChart = showMatrix ? vl
.markCircle({ tooltip: true })
.encode(
vl
.y()
.fieldO("source.name")
.sort(vl.fieldO("source.cluster"))
.axis(null)
.axis(filteredNetwork.nodes.length > 200 ? null : {}),
vl
.x()
.fieldO("target.name")
.sort(vl.fieldO("source.cluster"))
.axis(filteredNetwork.nodes.length > 100 ? null : {}),
vl.size().fieldQ("value"),
vl.color().fieldN("source.cluster")
)
.data(
filteredNetwork.links.map((l) => ({
...l,
source: dAuthorsId.get(l.source),
target: dAuthorsId.get(l.target)
}))
)
.width(width - 200)
.height(width - 200)
.render() : htl.html`Please enable show matrix`
networkTypes = [
"Co-Authorship",
"Citation"
//"computed now from papers"
]
function clearFilteredAuthors() {
viewof selectedAuthors.value = [];
viewof selectedAuthors.dispatchEvent(new Event("input"));
viewof minLinkValue.value = selectedNetwork === "Citation" ? 15 : 0;
viewof minLinkValue.dispatchEvent(new Event("input"));
}
function showKhouryVis() {
viewof selectedAuthors.value = khouryVisProfessors;
viewof selectedAuthors.dispatchEvent(new Event("input"));
viewof selectedNetwork.value = "Co-Authorship";
viewof selectedNetwork.dispatchEvent(new Event("input"));
viewof minLinkValue.value = 0;
viewof minLinkValue.dispatchEvent(new Event("input"));
}
function showMostCoauthorship() {
viewof selectedAuthors.value = [];
viewof selectedAuthors.dispatchEvent(new Event("input"));
viewof selectedNetwork.value = "Co-Authorship";
viewof selectedNetwork.dispatchEvent(new Event("input"));
viewof minLinkValue.value = 15;
viewof minLinkValue.dispatchEvent(new Event("input"));
}
function showMostCited() {
viewof selectedAuthors.value = [];
viewof selectedAuthors.dispatchEvent(new Event("input"));
viewof minLinkValue.value = 30;
viewof minLinkValue.dispatchEvent(new Event("input"));
viewof selectedNetwork.value = "Citation";
viewof selectedNetwork.dispatchEvent(new Event("input"));
}
khouryVisProfessors = [
"Enrico Bertini",
"John Alexis Guerra Gómez",
"Lace M. K. Padilla",
"Cody Dunne",
"Michelle A. Borkin",
"Michelle Borkin",
"Michael Correll",
"Melanie Tory",
// "Caglar Yildirim",
// "Yifan Hu"
]
import {vl} from "@vega/vega-lite-api-v5"
r = d3
.scaleSqrt()
.domain([0, d3.max(network.nodes.map((d) => d.value))])
.range([1, maxR])
w = d3
.scaleLinear()
.domain([0, d3.max(network.links.map((l) => l.value))])
.range([0.1, 10])
ns = d3
.scaleLinear()
.domain([0, network.nodes.length])
.range([-70, -0.1])
colors = d3.schemeCategory10.concat(d3.schemeAccent)
// d3.quantize(d3.interpolateTurbo, dClusters.size)
dClusters = d3.group(network.nodes, d=> d.cluster)
dAuthorsName = d3.group(network.nodes, d=> d.name)
dAuthorsId = new Map(network.nodes.map((d,i) => [d.index,d]))
network = {
switch (selectedNetwork) {
case "Citation":
return citationNetwork;
case "computed now from papers":
return networkComputed;
default:
return coAuthorshipNetwork;
}
}
filteredNetwork = filterNetwork(network, {
edgelessNodes,
nodeId: (d) => d.index,
nodesMap: dAuthorsId,
egoDistance,
egoPoint5,
byNodes: (n) =>
selectedClusters.length === 0 || selectedClusters.includes("" + n.cluster),
byLinks: (l) =>
l.value >= minLinkValue &&
(selectedAuthors.length === 0 ||
selectedAuthors.includes(dAuthorsId.get(l.source).name) ||
selectedAuthors.includes(dAuthorsId.get(l.target).name))
})
function filterNetwork(
network,
{
nodeId = (d) => d.id,
byNodes = null,
byLinks = null,
edgelessNodes = false, // Should we allow nodes without edges?
nodesMap,
egoDistance = 1,
egoPoint5 = true // find connections between filtered connections
} = {}
) {
nodesMap = nodesMap
? nodesMap
: new Map(network.nodes.map((d, i, all) => [nodeId(d, i, all), d]));
let res = {
nodes: [...network.nodes],
links: [...network.links]
};
//
function filterNodesFromLinks(res) {
const ids = [...new Set(res.links.map((l) => [l.source, l.target]).flat())];
res.nodes = ids.map((id) => nodesMap.get(id)).filter((d) => d); // undefined when the node is not visible anymore;
return res;
}
function filterLinksFromNodes({ nodes, links }, { filterBoth = true } = {}) {
const ids = new Set(nodes.map(nodeId));
let filteredLinks = links;
links = links
.filter(({ source, target }) =>
filterBoth
? ids.has(source) && ids.has(target)
: ids.has(source) || ids.has(target)
)
.map((l) => ({ ...l }));
return { nodes, links };
}
// Filter nodes
if (byNodes) {
res.nodes = res.nodes.filter(byNodes).map((n) => ({ ...n }));
}
res = filterLinksFromNodes(res, { filterBoth: true });
// Then links
if (byLinks) {
res.links = res.links.filter(byLinks).map((l) => ({
...l
}));
// console.log("Filter Links", res);
// Remove edgeless nodes
if (!edgelessNodes) {
res = filterNodesFromLinks(res, { filterBoth: true });
}
}
if (egoPoint5) {
// 0.5
res = filterLinksFromNodes(
{ nodes: res.nodes, links: network.links },
{ filterBoth: true }
);
res = filterNodesFromLinks(res, { filterBoth: true });
}
for (
let currentDistance = 1;
currentDistance < egoDistance;
currentDistance += 1
) {
res = filterLinksFromNodes(
{ nodes: res.nodes, links: network.links },
{ filterBoth: false }
);
res = filterNodesFromLinks(res, { filterBoth: true });
if (egoPoint5) {
// 0.5
res = filterLinksFromNodes(
{ nodes: res.nodes, links: network.links },
{ filterBoth: true }
);
res = filterNodesFromLinks(res, { filterBoth: true });
}
}
return res;
}
coAuthorshipNetwork = FileAttachment("coauthorshipNetwork2024_full.json")
.json()
.then((res) => {
res.nodes.map((d) => (d.name = d.name.replace(/\d/g, '').trim())); // there is a weird 001 in the data 🤷🏼
return res;
})
citationNetwork = FileAttachment("citationsNetwork2024_full.json")
.json()
.then((res) => {
res.nodes.map((d) => (d.name = d.name.replace(/\d/g, '').trim())); // there is a weird 001 in the data 🤷🏼
return res;
})
viewof selectedPapers = navio(papers)
papers = selectedNetwork === "computed now from papers"
? FileAttachment("IEEE VIS papers 1990-2024 - Main dataset.csv").csv({
typed: true
})
: [{ id: 1 }]
viewof unrollAttr = Inputs.select( ["AuthorNames", "InternalReferences"], {label: "Unroll papers by"})
viewof papersUnrolled = aq.from(selectedPapers)
.derive({name: aq.escape(d => op.split(d[unrollAttr], ";"))})
.unroll("name")
.view()
clusters = d3
.groups(network.nodes, (d) => d.cluster)
.sort((a, b) => d3.descending(a[1].length, b[1].length))
.map((d) => `${d[0]}: ${d[1].map((d) => d.name).join(", ")} `)
selectedClusters = selectedClustersObjs.map(d => d.split(": ")[0])
networkComputed = {
if (selectedNetwork !== "computed now from papers")
return { nodes: [], links: [] };
const network = tableToNetwork(papersUnrolled.objects(), {
nodesBy: "name",
matchBy: "DOI"
});
network.nodes.map((n) => {
n.index = n.id;
n.name = n.id;
n.value = n.degree;
n.cluster = 1;
delete n.id;
delete n.degree;
});
network.links.map((l) => {
l.value = l.count;
delete l.count;
});
return network;
}
allPapers = FileAttachment("IEEE VIS papers 1990-2024 - Main dataset.csv").csv({
typed: true
})
allPapers
.filter((d) => d.AuthorNames && d.AuthorNames.indexOf("Cody Dunne") !== -1)
.map((d) => `${d.AuthorNames}- ${d.Title}`)
OnClickLink("Click me", {
label: "clickme",
onClick: () => {
console.log("testing");
}
})
function OnClickButton(label, opts) {
const btn = Inputs.button(label, opts);
if (opts.onClick) {
btn.addEventListener("click", opts.onClick);
}
return btn;
}
function OnClickLink(label, opts) {
const btn = htl.html`<a href="">${label}</a>`;
if (opts.onClick) {
btn.addEventListener("click", (evt) => {
evt.preventDefault();
opts.onClick(evt);
});
}
return btn;
}
height = 600
import {tableToNetwork} from "@john-guerra/table-to-network"
import {aq, op} from "@uwdata/arquero"
import {navio} from "@john-guerra/navio"
import { ForceGraph } from "@john-guerra/force-directed-graph"
import {searchCheckbox} from "@john-guerra/search-checkbox"
import {multiAutoSelect} from "@john-guerra/multi-auto-select"
import {PersistInput} from "@john-guerra/persist-input"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.