The first of a series of data visualizations on basic coding concepts. The for loop continues as long as our circle fits (e.g., our condition)!
Last active
May 28, 2019 05:08
-
-
Save mtaptich/9d90c5609cca6c7056a2 to your computer and use it in GitHub Desktop.
For Loop
This file contains hidden or 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> | |
| body { | |
| width: 1024px; | |
| margin-top: 0; | |
| margin: auto; | |
| font-family: "Lato", "PT Serif", serif; | |
| color: #222222; | |
| padding: 0; | |
| font-weight: 300; | |
| line-height: 33px; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .circle { | |
| fill: #e74c3c; | |
| } | |
| .match { | |
| fill: #fff; | |
| stroke: #222222; | |
| fill-opacity: 0.8; | |
| } | |
| .guide { | |
| fill: none; | |
| stroke: #7f8c8d; | |
| stroke-dasharray: 2px 1px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| speed = 500; | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| var rscale = d3.scale.sqrt() | |
| .range([5, 25]) | |
| .domain([1, 10]) | |
| var initiate = svg.append("path") | |
| .attr("d", 'M418.7,38.7v76') | |
| .attr('class', 'guide'); | |
| var process = svg.append('path') | |
| .attr('d',"M418.7,119v120.3") | |
| .attr('class', 'guide'); | |
| var increment = svg.append('path') | |
| .attr('d',"M418.7,241.3v200") | |
| .attr('class', 'guide'); | |
| var update = svg.append('path') | |
| .attr('d',"M415.7,441.3H219.3V116.7H417") | |
| .attr('class', 'guide'); | |
| var exit = svg.append('path') | |
| .attr('d',"M420.4,116.7h76") | |
| .attr('class', 'guide'); | |
| function start(loops) { | |
| var loops = 1; | |
| d3.select('.status').text('Status: '+loops); | |
| circle.attr('r', rscale(loops)); | |
| circle.transition() | |
| .duration(speed) | |
| .attrTween("transform", translateAlong(initiate.node())) | |
| .transition() | |
| .duration(speed/2) | |
| .each("end", function(){ | |
| interate(loops); | |
| }); | |
| } | |
| function interate(loop) { | |
| circle.transition() | |
| .duration(speed) | |
| .attrTween("transform", translateAlong(process.node())) | |
| .transition() | |
| .duration(speed) | |
| .transition() | |
| .duration(speed) | |
| .attrTween("transform", translateAlong(increment.node())) | |
| .each("end", function(){ grow (loop)}); | |
| } | |
| function grow(loop){ | |
| if (loop <=10 - 1) { | |
| loop +=1; | |
| d3.select('.status').text('Status: '+loop); | |
| circle.transition() | |
| .duration(speed*2) | |
| .attr('r', rscale(loop)) | |
| .transition() | |
| .duration(speed) | |
| .attrTween("transform", translateAlong(update.node())) | |
| .transition() | |
| .duration(speed/2) | |
| .each("end", function(){ interate (loop)}); | |
| } else{ | |
| loop +=1; | |
| d3.select('.status').text('Status: '+loop); | |
| circle.transition() | |
| .duration(speed*2) | |
| .attr('r', rscale(loop)) | |
| .transition() | |
| .duration(speed*5) | |
| .ease('bounce') | |
| .attrTween("transform", translateAlong(update.node())) | |
| .transition() | |
| .duration(speed*2) | |
| .each("end", end) | |
| } | |
| } | |
| function end() { | |
| circle.transition() | |
| .duration(1000) | |
| .attrTween("transform", translateAlong(exit.node())) | |
| .ease('linear') | |
| .each("end", function(){ | |
| d3.select(this).transition().delay(2000).each('end', start) | |
| }); | |
| } | |
| function translateAlong(path) { | |
| var l = path.getTotalLength(); | |
| return function(d, i, a) { | |
| return function(t) { | |
| var p = path.getPointAtLength(t * l); | |
| return "translate(" + p.x + "," + p.y + ")"; | |
| }; | |
| }; | |
| } | |
| var status = svg.append('text') | |
| .attr('class', 'status') | |
| .attr('x',216) | |
| .attr('y',50) | |
| .style('text-anchor', 'start') | |
| .style('font-size', '24') | |
| .text('Status: ') | |
| var enter_loop = svg.append('text') | |
| .attr('class', 'status') | |
| .attr('x',418.5) | |
| .attr('y',34) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '14') | |
| .text('{ enter loop }') | |
| var code_block = svg.append('text') | |
| .attr('class', 'status') | |
| .attr('x',450) | |
| .attr('y',244) | |
| .style('text-anchor', 'start') | |
| .style('font-size', '24') | |
| .text('{ code block }') | |
| var minus_one = svg.append('text') | |
| .attr('class', 'status') | |
| .attr('x',450) | |
| .attr('y',444) | |
| .style('text-anchor', 'start') | |
| .style('font-size', '24') | |
| .text('{ increment }') | |
| var exit_loop = svg.append('text') | |
| .attr('class', 'status') | |
| .attr('x',565) | |
| .attr('y',117) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '14') | |
| .text('{ exit loop }') | |
| var match = svg.append('circle') | |
| .attr('cx', 417) | |
| .attr('cy', 117) | |
| .attr('r', rscale(10)) | |
| .attr('class', 'match') | |
| var circle = svg.append("circle") | |
| .attr('class', 'circle') | |
| .attr("r", 20) | |
| .attr("transform", "translate(0," + -height / 3 + ")"); | |
| start() | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment