Published
Edited
Sep 30, 2019
2 forks
Insert cell
Insert cell
svg `<svg width="1000" height="500">
<g transform="translate(50, 250)"></g>
</svg>
`
Insert cell
colorScale = ['#f1dac0', '#fae15f', '#eb474d', '#448582', '#1e3c53', '#9ab0a2'];

Insert cell
xCenter = [45, 200, 355, 505, 655, 805]
Insert cell
Insert cell
simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(10))
.force('x', d3.forceX().x(function(d) {
return xCenter[d.category];
}))
.force('collision', d3.forceCollide().radius(function(d) {
return d.radius + 2;
}))
.on('tick', ticked);
Insert cell
function ticked() {
var u = d3.select('svg g')
.selectAll('circle')
.data(nodes);

u.enter()
.append('circle')
.attr('r', function(d) {
return d.radius;
})
.style('fill', function(d) {
return colorScale[d.category];
})
.merge(u)
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
})

u.exit().remove();
}
Insert cell
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