Research Application Manager with the Alan Turing Institute / PhD from @GC_CUNY / formerly Research Software Engineer @LivingwMachines and @dhinstitutes project mgr
Public
Edited
Nov 24, 2022
data = {
const urls = {
nodes:
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTz_3alkMj1NY56P4ZJzBVjmgVDFN71XVCjmSK6rQX45awfBgXetpVI23xvEsKa39Jsz2NW-JvF7OYW/pub?gid=305618985&single=true&output=tsv",
links:
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTz_3alkMj1NY56P4ZJzBVjmgVDFN71XVCjmSK6rQX45awfBgXetpVI23xvEsKa39Jsz2NW-JvF7OYW/pub?gid=624273204&single=true&output=tsv"
};
const _nodes = await d3.tsv(urls.nodes);
const _links = await d3.tsv(urls.links);
// create a group lookup object
const groups = Object.fromEntries(
[...new Set(_nodes.map((node) => node.group))]
.sort()
.map((d, ix) => [d, ix])
);
// set up a links object
const links = _links.map((link) =>
Object.assign({
source: link.source,
target: link.target,
link
})
);
// create list of all link sources and targets ("valid links")
const validLinks = _.flatten(links.map((l) => [l.source, l.target]));
// set up nodes & validate that they exist in the links list
const nodes = _nodes
.map((node) =>
Object.assign({
id: node.id,
group: groups[node.group],
node
})
)
.filter((d) => validLinks.includes(d.id)); // filter nodes to only include those that are in the list of valid links
return { nodes, links };
}
groupedGraph(data, {
height: 1000,
margin: 1.2,
excludeGroups: [0], // exclude the first group (ie. the empty one)
label: (d) => d.node.name, // d.id if you want latin spelling, d.node.name if you want Hebrew
r: (d) => +d.node.radius + 1, // added +1 to make the zeroes at least visible... you could do a scale here
labelStyle: {
fontSize: 12,
fontFamily: "serif",
color: false
}
}).node()
import { groupedGraph, basicStyling } from "@kallewesterling/groupedgraph"
basicStyling
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.