Playing with the Beeswarm along a path approach, forked from 1wheel's block: beeswarm-path, which was suggested by Arman.
Last active
March 6, 2018 09:06
-
-
Save tomshanley/0260ae1c415011e3361a54ff977e7268 to your computer and use it in GitHub Desktop.
beeswarm on square and circle path
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset='utf-8'> | |
| <style> | |
| path { | |
| fill: none; | |
| stroke: #00ff50; | |
| stroke-linecap: round; | |
| stroke-width: 40; | |
| opacity: .2; | |
| } | |
| body{ | |
| font-family: monaco, Consolas, 'Lucida Console', monospace; | |
| margin: 0px; | |
| } | |
| </style> | |
| <div id='graph'></div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var r = 3 | |
| var w = 800, h = 800 | |
| var svg = d3.select('#graph') | |
| .html('') | |
| .append('svg') | |
| .attr("width", w) | |
| .attr("height", h) | |
| //square | |
| var squareNode = svg.append('path') | |
| .attr("d", 'M 50,50 L750,50 L750,750 50,750 z') | |
| //circle | |
| var circleNode = svg.append('path') | |
| .attr("d", 'M 400,400 m -150,0 a 150,150 0 1,0 300,0 a 150,150 0 1,0 -300,0') | |
| var randomData = d3.range(300).map(x => { | |
| var val = Math.random() * 400 | |
| return {val} | |
| }) | |
| addSwarm(squareNode, randomData) | |
| addSwarm(circleNode, randomData) | |
| function addSwarm(path, data) { | |
| var node = path.node() | |
| var scaleLength = d3.scaleLinear() | |
| .domain([0, d3.max(data, function(d){ return d.val })]) | |
| .range([0, node.getTotalLength()]) | |
| var scaleX = function(d){ | |
| return node.getPointAtLength(scaleLength(d.val)).x | |
| } | |
| var scaleY = function(d){ | |
| return node.getPointAtLength(scaleLength(d.val)).y | |
| } | |
| var simulation = d3.forceSimulation(data) | |
| .force('x', d3.forceX(d => scaleX(d))) | |
| .force('y', d3.forceY(d => scaleY(d))) | |
| .force('collide', d3.forceCollide(r + 1)) | |
| .stop() | |
| for (var i = 0; i < 120; ++i) simulation.tick() | |
| svg.append("g").selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr("r", r) | |
| .attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")" }) | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment