Published
Edited
May 5, 2019
1 fork
1 star
Insert cell
Insert cell
a = {
const width = 500;
const height = 500;
const nodes = _.map(new Array(1000), ()=>({}));
const simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(0.4))
.force('center', d3.forceCenter(width / 2, height / 2))
.force('collision', d3.forceCollide().radius(6))
.on('tick', ticked);

function ticked() {
var u = d3.select('svg')
.selectAll('circle')
.data(nodes)

u.enter()
.append('circle')
.attr('r', 5)
.merge(u)
.attr('cx', function(d) {
return d.x
})
.attr('cy', function(d) {
return d.y
});

u.exit().remove()
}
return html`<svg width=${width} height=${height}>`;
}
Insert cell
Insert cell
_ = require('lodash')
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