Published
Edited
Aug 12, 2020
1 fork
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
deconstructed = {
let steps = []
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));

const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id)
.distance(linkDistance)
// .strength(link => {
// return 1 / Math.min(count(link.source), count(link.target))
// })
)
.force("charge", d3.forceManyBody()
.strength(manyBodyStrength)
.distanceMax(distanceMax)
)
.force("x", d3.forceX().strength(xStrength))
.force("y", d3.forceY().strength(yStrength));
for(let i = 0; i < numTicks; i++) {
simulation.tick()
steps.push({
nodes: nodes.map(({x, y, id, group}) => ({x, y, id, group})),
links: links.map(({source,target, value}) => {
return {
value,
source: {x:source.x , y:source.y},
target: {x:target.x , y:target.y}
}
})
})

}
simulation.stop()
return steps
}
Insert cell
data = FileAttachment("graph.json").json()
Insert cell
Insert cell
height = 680
Insert cell
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.group);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@6.0.0-rc.3")
Insert cell

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.
Learn more