Skip to content

Instantly share code, notes, and snippets.

@tacastillo

tacastillo/.block

Created September 23, 2017 22:44
Show Gist options
  • Save tacastillo/ae94cc9c95e0dc87fb407b99890bad9b to your computer and use it in GitHub Desktop.
Save tacastillo/ae94cc9c95e0dc87fb407b99890bad9b to your computer and use it in GitHub Desktop.
Download ZIP
Use the Force
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<head>
<style> body { margin: 0 } </style>
<script src="//unpkg.com/d3-force-pod/dist/d3-force-pod.js"></script>
<!-- Force plugins -->
<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
});
simulationPod
.addForce(d3.forceBounce().radius(d => d.r)) // bounce
.addForce(d3.forceX().x(window.innerWidth/2).strength(0.002)); // vertical
/******************************/
// d3ForcePod: https://github.com/vasturiano/d3-force-pod
// Get inspired at https://github.com/vasturiano/d3-force-registry
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment