Published
Edited
May 22, 2020
1 fork
md`# 1D Motion Plots`
viewof display = {
const nodes = [];
let mouse = null;
const svg = d3.create("svg")
.property("value",{nodes: []})
.attr("viewBox",[-width / 2, -height / 2, width, height]);
const simulation = d3.forceSimulation(nodes)
.force("x",d3.forceX(1.5*width).strength(.01))
//.force("test",constantForce())
.alphaDecay([0])
.alphaTarget([1])
.on("tick", ticked);
let node = svg.append("g")
.selectAll("circle");
function constantForce(){
for (var i = 0, n = nodes.length, node, accel = 10; i<n; ++ i){
node = nodes[i];
node.x += 0.1;
}
}
function ticked() {
node.attr("cx", d => d.x)
.attr("cy", d => d.y)
svg.insert('circle')
.attr('cx',node.attr('cx'))
.attr('cy',node.attr('cy'))
.attr('r',5)
.style('fill','orange')
.style('opacity', 0.4);
}
function spawn(initial){
nodes.push(initial);
node = node
.data(nodes).join(
enter => enter.append("circle").attr("r", 0)
.call(enter => enter.transition().attr("r", 5)),
update => update,
exit => exit.remove()
);
simulation.nodes(nodes);
simulation.alpha(1).restart();
svg.property("value", {
nodes: nodes.map(d => ({id: d.index})),
});
svg.dispatch("input");
}
spawn({x:-width/3, y:0});
invalidation.then(() => simulation.stop());
return svg.node();
}
height = 500
d3 = require("d3@5")
d3.forceConstant = require('d3-force-constant')
import {drag} from "@d3/force-directed-graph"
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.
