D3 Examples - Newton's cradle

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.geom.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.js"></script>
<script type="text/javascript" src="d3.z.collide.js"></script>
<style>
    .ball { fill:steelblue;stroke:black}
    .wire {stroke:black;stroke-widh:1;fill:none}
</style>
</head>
        
<body>
  <script type="text/javascript">
var w=960,h=500,nodes=[], wires=[], links=[],
    no_strands = 7, no_links = 5;
​
svg=d3.select("body")
    .append("svg:svg")
    .attr("height",h)
    .attr("width",w)
    
​
d3.range(no_strands).forEach(function(strand) {
    var n = d3.range(no_links).map(function(d,i) { return {x:100+strand*20,y:100+d*25,fixed:false}})
    nodes=nodes.concat(n)
    wires.push(n)
    d3.range(n.length-1).forEach(function(d,i) { links.push({target:n[i],source:n[i+1]})})
    n[0].fixed=true         // fix the top circle
    n[n.length-1].mass=10   // and give the last ball mass and radius
    n[n.length-1].radius=10
})
​
​
balls = svg.selectAll(".ball")
    .data(nodes.filter(function(d) { return d.radius > 0}))
    
    balls.enter()
        .append("circle")
        .attr("class","ball")
        .attr("r",function(d) { return d.radius})
​
lines = svg.selectAll("path")
    .data(wires)
    
    lines.enter()
        .append("path")
        .attr("class","wire")
​
force = d3.layout.force()
    .linkStrength(10)
    .linkDistance(25)
    .friction(1)
    .nodes(nodes).links(links)
    .charge(0)
    .on("tick.redraw",redraw)
    .size([200,9999]).gravity(0.001)
    .start()
​
balls.call(force.drag)   
d3.z.collide(force)
​
​
function redraw() {
    balls.attr("cx",function(d) { return d.x})
    balls.attr("cy",function(d) { return d.y})
    lines.attr("d", d3.svg.line().interpolate("cardinal")
                .x(function(d) { return d.x})
                .y(function(d) { return d.y}))
   force.resume() 
}
​
​
</script>
</body>
</html>
    