viewof display = {
const nodes = [];
let mouse = null;
const svg = d3.create("svg")
.property("value",{nodes: []})
.attr("viewBox",[0, -height, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
let node = svg.append("g")
.selectAll("circle");
const simulation = d3.forceSimulation(nodes)
//.force("x",d3.forceX(1.5*width).strength(.01))
.force("test",constantForce)
.alphaDecay([0])
.alphaTarget([0])
.velocityDecay([0.0])
.on("tick", ticked);
function constantForce(){
for (var i = 0, n = nodes.length, node, accely = -ay/10, accelx = ax/10; i<n; ++ i){
node = nodes[i];
node.vx += accelx;
node.vy += accely;
//node.x += node.vx;
}
}
function ticked() {
node.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y-25)
svg.insert('circle')
.attr('cx',node.attr('cx'))
.attr('cy',node.attr('cy'))
.attr('r',5)
.style('fill','orange')
.style('opacity', 0.4);
svg.insert('arrow');
}
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:xi*10 , y:-yi*10,vx:vxi,vy:-vyi});
invalidation.then(() => simulation.stop());
return svg.node();
}
viewof xi = slider({
min: 0,
max: 50,
step: 1,
value: 0,
description: "x initial"
})
viewof yi = slider({
min: 0,
max: 40,
step: 1,
value: 0,
description: "y initial"
})
viewof vxi = slider({
min: -10,
max: 10,
step: 1,
value: 0,
description: "v_x initial"
})
viewof vyi = slider({
min: -10,
max: 10,
step: 1,
value: 0,
description: "v_y initial"
})
viewof ax = slider({
min: -5,
max: 5,
step: 0.1,
value: 0,
description: "a_x"
})
viewof ay = slider({
min: -10,
max: 10,
step: 0.1,
value: 0,
description: "a_y"
})
margin = ({top: 25, right: 0, bottom: 25, left: 0})
xAxis = svg=>svg
.attr("transform", `translate(0,${-margin.bottom})`)
.call(d3.axisBottom(x))
x = d3.scaleLinear()
.domain([0,width/10])
.range([0,width])
yAxis = svg => svg
.attr("transform",`translate(0,${-margin.bottom})`)
.call(d3.axisRight(y))
y=d3.scaleLinear()
.domain([height/10,0])
.range([-height,0])
height = 500
viewof b_earthgrav = button({value:"Earth Gravity"})
{
b_earthgrav;
viewof ay.value = -9.8;
}
d3 = require("d3@5")
d3.forceConstant = require('d3-force-constant')
import {slider,checkbox,select,text,button} from "@jashkenas/inputs"
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.
