Use the Force

DIY force simulation using d3-force-pod.

forked from vasturiano's block: Use the Force

<head>
  <style> body { margin: 0 } </style>
  <script src="//unpkg.com/d3-force-pod/dist/d3-force-pod.js"></script>

<script src="//d3js.org/d3.v4.min.js"></script>
  <script src="//unpkg.com/d3-bboxcollide"></script>
  <script src="//unpkg.com/d3-force-attract"></script>
  <script src="//unpkg.com/d3-force-bounce"></script>
  <script src="//unpkg.com/d3-force-cluster"></script>
  <script src="//unpkg.com/d3-force-container"></script>
  <script src="//unpkg.com/d3-force-magnetic"></script>
  <script src="//unpkg.com/d3-force-surface"></script>
</head>

<body>
  <script>
    const simulationPod = d3ForcePod()(document.body);

/*********** EDIT ME **********/

simulationPod.genNodes({
      density: 0.00025,               // nodes/px
      radiusRange: [1, 8],            // px
      yRange: [0, 0],                 // px
      velocityRange: [0, 1],          // px/tick
      velocityAngleRange: [90, 90]    // 0=right, 90=down
    });
    
    const links = d3.range(100).map(i => ({
      source: i,
      target: Math.round(i/2)
    }))

simulationPod
    .links(links)
      .addForce(d3.forceLink(links))
      .addForce(d3.forceBounce().radius(d => d.r / 10)) // bounce
      .addForce(d3.forceMagnetic().strength(0.5))
      .addForce(d3.forceX().x(window.innerWidth/2).strength(0.0001088));  // vertical

/******************************/

// d3ForcePod: https://github.com/vasturiano/d3-force-pod

// Get inspired at https://github.com/vasturiano/d3-force-registry

</script>
</body>

Updated missing url //unpkg.com/d3-bboxCollide to //unpkg.com/d3-bboxcollide

https://unpkg.com/d3-force-pod/dist/d3-force-pod.js

https://d3js.org/d3.v4.min.js

https://unpkg.com/d3-bboxCollide

https://unpkg.com/d3-force-attract

https://unpkg.com/d3-force-bounce

https://unpkg.com/d3-force-cluster

https://unpkg.com/d3-force-container

https://unpkg.com/d3-force-magnetic

https://unpkg.com/d3-force-surface