Constructed in the video tutorial: The Pentagon. Inspired by a figure from chapter 5 of Tamara Munzner's excellent book "Visualization Analysis and Design".
Built with blockbuilder.org
Last active
September 26, 2017 21:51
-
-
Save Fasani/05e03d94e4235a71e00187329b429a40 to your computer and use it in GitHub Desktop.
Pentagon Fork
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| var rotateAngle = 1; | |
| var length = 1; | |
| var reverse = false; | |
| setInterval(function() { | |
| reRender(); | |
| }, 10); | |
| function reRender() { | |
| d3.selectAll("svg > *").remove(); | |
| rotateAngle += 1; | |
| if (rotateAngle === 361) { | |
| rotateAngle = 1; | |
| } | |
| if (reverse === false && length > 300) { | |
| reverse = true; | |
| } | |
| if (length < 0) { | |
| reverse = false; | |
| } | |
| if (reverse) { | |
| length -= 1; | |
| } else { | |
| length += 1; | |
| } | |
| drawCircle(rotateAngle, 50, length); | |
| } | |
| function drawCircle(rotateAngle, numPoints, length) { | |
| const svg = d3.select('svg'); | |
| const width = svg.attr('width'); | |
| const height = svg.attr('height'); | |
| const centerX = width / 2; | |
| const centerY = height / 2; | |
| const radius = length; | |
| const points = d3.range(numPoints) | |
| .map(i => { | |
| const angle = i / numPoints * Math.PI * 2 + rotateAngle; | |
| return { | |
| x: Math.sin(angle) * radius + centerX, | |
| y: Math.cos(angle) * radius + centerY | |
| }; | |
| }); | |
| const spokes = points.map(point => ({ | |
| x1: centerX, | |
| y1: centerY, | |
| x2: point.x, | |
| y2: point.y | |
| })); | |
| const wheelLines = d3.range(numPoints).map(i => ({ | |
| x1: points[i].x, | |
| y1: points[i].y, | |
| x2: points[(i + 1) % numPoints].x, | |
| y2: points[(i + 1) % numPoints].y | |
| })); | |
| const lines = spokes.concat(wheelLines); | |
| svg.selectAll('line').data(lines) | |
| .enter().append('line') | |
| .attr('x1', d => d.x1) | |
| .attr('y1', d => d.y1) | |
| .attr('x2', d => d.x2) | |
| .attr('y2', d => d.y2) | |
| .attr('stroke', 'black') | |
| .attr('stroke-width', 2); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment