Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/.block

Created September 23, 2017 22:55
Show Gist options
  • Save clhenrick/2f000f8f199f5f9e85888a097e2145c7 to your computer and use it in GitHub Desktop.
Save clhenrick/2f000f8f199f5f9e85888a097e2145c7 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
});
const links = d3.range(50).map(i => ({
source: i,
target: i+1,
}));
simulationPod
.links(links)
.addForce(d3.forceLink(links))
.addForce(d3.forceMagnetic().charge(-30))
// .addForce(d3.forceBounce().radius(d => d.r).elasticity(0)) // 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