Published
Edited
Sep 23, 2020
2 forks
md`# Force layout`
d3 = import("https://cdn.skypack.dev/d3@6")
data = await d3.json('https://raw.githubusercontent.com/danielstern/force-graph-example/master/data/data.json')
{
const simulation = d3.forceSimulation(data.nodes)
.force('charge', d3.forceManyBody().strength(-100))
.force('link', d3.forceLink(data.links).id(d => d.id)
.distance(50))
.force('center', d3.forceCenter(300, 300))
const svg = d3.create("svg").attr("viewBox", [0, 0
, 600, 600]);
const node = svg.selectAll('circle')
.data(data.nodes)
.enter()
.append('circle')
.attr('r', 25)
.attr('fill', 'blue');
const link = svg
.selectAll('path.link')
.data(data.links)
.enter()
.append('path')
.attr('stroke', 'black')
.attr('fill', 'none');
const lineGenerator = d3.line();
simulation.on('tick', () => {
node.attr('cx', d => d.x);
node.attr('cy', d => d.y);
link.attr('d', d => lineGenerator([
[d.source.x, d.source.y],
[d.target.x, d.target.y]])
)
});
return svg.node();
}
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.
