Digital historian at the Roy Rosenzweig Center for History and New Media, George Mason University
Public
Edited
Dec 15, 2022
nodes = await FileAttachment("nodes.csv").csv({ typed: true })
edges = await FileAttachment("edges.csv").csv({ typed: true })
parseData = (nodes, edges) => {
const data = {
nodes: [],
links: []
}
// Add nodes to data object
nodes.forEach(node => {
data.nodes.push({id: node.id, label: node.Label})
})
// Add edges to data object
edges.forEach(edge => {
data.links.push({source: edge.source, target: edge.target})
})
return data
}
network = parseData(nodes, edges);
import {ForceGraph} from "@d3/force-directed-graph"
graph = ForceGraph(network, {
nodeId: d => d.id,
nodeTitle: d => `${d.label}`, // pause mouse over node to see title
linkStrokeWidth: l => Math.sqrt(l.value),
width,
height: 600,
invalidation // a promise to stop the simulation when the cell is re-run
})
chart = panGraph(network)
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.
