Skip to content

Instantly share code, notes, and snippets.

@vasturiano

vasturiano/README.md

Last active October 22, 2017 04:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vasturiano/75d3c886b80bae378ac0ea689e8e1a37 to your computer and use it in GitHub Desktop.
Save vasturiano/75d3c886b80bae378ac0ea689e8e1a37 to your computer and use it in GitHub Desktop.
Download ZIP
Use the Force
Raw
README.md
Raw
index.html
<head>
<style> body { margin: 0 } </style>
<script src="//unpkg.com/d3-force-pod"></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