Playing with the Beeswarm along a path approach, forked from 1wheel's block: beeswarm-path, which was suggested by Arman.
forked from tomshanley's block: beeswarm on square and circle path
Created
March 9, 2018 01:44
-
-
Save tomshanley/2fb1dac5dfacbf6a7a30708ec6f269ef 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 randomData1 = d3.range(300).map(x => { | |
| var val = Math.random() * 400 | |
| return {val} | |
| }) | |
| var randomData2 = d3.range(300).map(x => { | |
| var val = Math.random() * 400 | |
| return {val} | |
| }) | |
| addSwarm(squareNode, randomData1) | |
| addSwarm(circleNode, randomData2) | |
| 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)) | |
| .on("tick", ticked); | |
| var circles = svg.append("g").selectAll('circle') | |
| .data(_data) | |
| .enter() | |
| .append('circle') | |
| .attr("r", r) | |
| function ticked() { | |
| d3.selectAll('circle') | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment