Engineering Manager @ Datadog, faculty @ Parsons MSDV program.
Public
Edited
Mar 24, 2023
function makeNodes(n, key){
return d3.range(n).map(i => {
return {
id: `node-${key}-${i}`
}
})
}
function makeEdge(source, target){
return {
source, target
}
}
makeNodes(86, 'nyc')
nodes = [
{
id: 'node-nyc',
},
{
id: 'node-paris',
},
{
id: 'node-nyc-remote',
},
{
id: 'node-paris-remote',
},
...makeNodes(86, 'nyc'),
...makeNodes(9, 'nyc-remote'),
...makeNodes(68, 'paris'),
...makeNodes(16, 'paris-remote'),
]
edges = [
...makeNodes(86, 'nyc').map(({ id }) => makeEdge(id, 'node-nyc')),
...makeNodes(68, 'paris').map(({ id }) => makeEdge(id, 'node-paris')),
...makeNodes(9, 'nyc-remote').map(({ id }) => makeEdge(id, 'node-nyc-remote')),
...makeNodes(16, 'paris-remote').map(({ id }) => makeEdge(id, 'node-paris-remote')),
makeEdge('node-nyc', 'node-paris'),
makeEdge('node-paris', 'node-nyc'),
makeEdge('node-nyc-remote', 'node-nyc'),
makeEdge('node-nyc-remote', 'node-paris'),
makeEdge('node-paris-remote', 'node-nyc'),
makeEdge('node-paris-remote', 'node-paris'),
]
import {ForceGraph} from "@d3/force-directed-graph"
ForceGraph({ nodes, links: edges })
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.
