curious hacker. ❤️Elixir.
Published
Edited
May 22, 2018
{
const svg = d3.select(DOM.svg(width, height))
const simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
const link = svg.append('g').attr('class', 'links')
.selectAll('line').data(graph.links)
.enter()
.append('line')
.attr('stroke', '#999')
.attr('stroke-width', d => Math.sqrt(d.value))
const node = svg.append('g').attr('class', 'nodes')
.selectAll('circle').data(graph.nodes)
.enter()
.append('circle')
.attr('r', 5)
.attr('fill', 'black')
.call(drag(simulation))
simulation.nodes(graph.nodes).on('tick', () => {
link
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y)
node
.attr('cx', d => d.x)
.attr('cy', d => d.y)
})
simulation.force('link').links(graph.links)
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.
