I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Apr 21, 2023
2 forks
45 stars
{
await visibility();
const context = DOM.context2d(width, height);
const nodes = d3.range(500).map(() => ({}));
const simulation = d3
.forceSimulation(nodes)
.force("boundary", forceBoundary(20, 20, width - 20, height - 20))
.force("collide", d3.forceCollide(11.5).iterations(4))
.on("tick", ticked);
function ticked() {
context.clearRect(0, 0, width, height);
context.strokeStyle = "steelblue";
context.rect(20, 20, width - 20 - 20, height - 20 - 20);
context.stroke();
for (const { x, y } of nodes) {
context.beginPath();
context.arc(x, y, 10, 0, 2 * Math.PI);
context.fill();
}
}
invalidation.then(() => simulation.stop());
return context.canvas;
}
{
await visibility();
const context = DOM.context2d(width, height);
const nodes = d3.range(500).map(() => ({}));
const simulation = d3
.forceSimulation(nodes)
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collide", d3.forceCollide(11.5).iterations(4))
.on("tick", ticked);
function ticked() {
context.clearRect(0, 0, width, height);
context.save();
context.strokeStyle = "steelblue";
context.rect(20, 20, width - 20 - 20, height - 20 - 20);
context.stroke();
for (const { x, y } of nodes) {
context.beginPath();
context.arc(x, y, 10, 0, 2 * Math.PI);
context.fill();
}
context.restore();
}
invalidation.then(() => simulation.stop());
return context.canvas;
}
aspectRatio = {
await visibility();
const context = DOM.context2d(width, height);
const nodes = d3.range(500).map(() => ({}));
const simulation = d3
.forceSimulation(nodes)
.force("x", d3.forceX(width / 2).strength(0.1))
.force("y", d3.forceY(height / 2).strength((0.2 * width) / height))
.force("collide", d3.forceCollide(11.5).iterations(4))
.on("tick", ticked);
function ticked() {
context.clearRect(0, 0, width, height);
context.save();
context.strokeStyle = "steelblue";
context.rect(20, 20, width - 20 - 20, height - 20 - 20);
context.stroke();
for (const { x, y } of nodes) {
context.beginPath();
context.arc(x, y, 10, 0, 2 * Math.PI);
context.fill();
}
context.restore();
}
invalidation.then(() => simulation.stop());
return context.canvas;
}
forceBoundary = require("d3-force-boundary")
d3 = require("d3@7")
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.
