I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
viewof nodes_filtered= navio(nodes, {height:400, attribWidth:30})
viewof edges_filtered=navio(edges, {height:400})
md`## The data`
nodes = FileAttachment("Dataset 4. ComputerScience_vertexlist.txt").text().then(res => d3.tsvParse(res, d3.autoType))
dictNodes = {
const dictNodes = new Map();
nodes_filtered.forEach(d => {
dictNodes.set(d["# u"], d)
})
return dictNodes;
}
edges = FileAttachment("Dataset 3. ComputerScience_edgelist.txt").text()
.then(res => d3.tsvParse(res, d3.autoType))
.then(data => data.map(e => ({
...e,
source:dictNodes.get(e["# u"]),
target: dictNodes.get(e["v"])
})
))
edgesGrouped = d3.groups(edges_filtered, d => d["# u"], d=> d.v)
.map(u => u[1]
.reduce((p,v) => p.concat([{
source:u[0],
target:v[0],
count:v[1].length
}]),
[])
).flat()
edgesCombined = {
// Hash the nodes
const dictNodesFiltered = new Map();
nodes_filtered.forEach(d => {
dictNodesFiltered.set(d["# u"], d)
})
const edgesWithNodes= edgesGrouped.map(e => (
{
...e,
source:dictNodes.get(e.source) ,
target:dictNodes.get(e.target),
}
)).filter(e => e.source && e.target);
netclustering.cluster(nodes_filtered, edgesWithNodes);
return edgesWithNodes;
}
ForceGraph({nodes})
import {navio} from "@john-guerra/navio"
d3 = require("d3-dsv", "d3-array")
import {vl} from "@vega/vega-lite-api"
netclustering = require("netclustering")
import { select, checkbox } from "@jashkenas/inputs"
import { ForceGraph } from "@john-guerra/force-directed-graph"
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.
