Published
Edited
Mar 18, 2018
2 stars
viewof nodes = {
let add = html`<div><button>add Node</button></div>`;
add.value = [{index:0}, {index:1}];
add.onclick = () => {
add.value.push({index:add.value.length});
add.dispatchEvent(new CustomEvent('input'));
}
return add;
}
d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-10))
.on("tick", ticked)
size = ({
height: 500,
width: 500
})
function ticked() {
context.clearRect(0, 0, size.width, size.height);
context.save();
context.translate(size.width / 2, size.height / 2);
context.beginPath();
context.stroke();
nodes.forEach(drawNode);
context.fill();
context.restore();
}
function drawNode(d) {
context.beginPath();
context.moveTo(d.x + 3, d.y);
context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
context.fillStyle="#aaa";
context.fill();
context.stroke();
}
context = DOM.context2d(500, 500)
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.
