The third of a series of data visualizations on basic coding concepts. The while loop will run while the circle is out of the box. When our condition is FALSE, the model stops. The model reactivates upon TRUE (which is not always the case).
Last active
February 17, 2018 03:22
-
-
Save mtaptich/a7d591b09196f21983fc to your computer and use it in GitHub Desktop.
While 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; | |
| } | |
| .guide { | |
| fill: none; | |
| stroke: #7f8c8d; | |
| stroke-dasharray: 2px 10px; | |
| } | |
| .running { | |
| fill: #3498db; | |
| } | |
| .complete { | |
| fill: #8e44ad; | |
| } | |
| .bank{ | |
| fill: #ecf0f1; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 600, | |
| translate_speed = 10000, | |
| fall_speed = 1000, | |
| is_on = true, | |
| fromtop = 100; | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| // Static vectors | |
| svg.append('rect') | |
| .attr('x', 200) | |
| .attr('y', 75) | |
| .attr('width', 400) | |
| .attr('height', 180) | |
| .attr('rx', 0) | |
| .attr('ry', 0) | |
| .style('fill', '#bdc3c7') | |
| svg.append('rect') | |
| .attr('x', 200) | |
| .attr('y', 75) | |
| .attr('width', 400) | |
| .attr('height', 40) | |
| .attr('rx', 0) | |
| .attr('ry', 0) | |
| .attr('class', 'bank') | |
| svg.append('rect') | |
| .attr('x', 200) | |
| .attr('y', height - 70) | |
| .attr('width', 400) | |
| .attr('height', 100) | |
| .attr('rx', 0) | |
| .attr('ry', 0) | |
| .attr('class', 'bank') | |
| var move_right = svg.append('path') | |
| .attr('d', 'M70,'+ fromtop +'h764') | |
| .attr('class', 'guide'); | |
| var move_left = svg.append('path') | |
| .attr('d' , 'M834,'+ fromtop +'H70') | |
| .attr('class', 'guide'); | |
| var my_state = svg.append('circle') | |
| .attr('r', 10) | |
| .style('fill', '#e74c3c') | |
| var secondary = svg.append('text') | |
| .attr('x',400) | |
| .attr('y',height-30) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '24') | |
| .text('{ Secondary Process }') | |
| var process = svg.append('text') | |
| .attr('x',730) | |
| .attr('y',260) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '24') | |
| .text('{ Transform Data }') | |
| var data = svg.append('text') | |
| .attr('class', 'status') | |
| .attr('x',400) | |
| .attr('y',50) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '24') | |
| .text('{ Data Input }') | |
| // My model | |
| function translateAlong(path) { | |
| var l = path.getTotalLength(); | |
| return function(d, i, a) { | |
| return function(t) { | |
| var p = path.getPointAtLength(t * l); | |
| if (p.x > 200 && p.x < 600){ | |
| is_on=false | |
| d3.select('.status') | |
| .text('{ False }') | |
| .style('font-size', '36') | |
| .style('fill', '#e74c3c') | |
| }else{ | |
| is_on=true; | |
| d3.select('.status') | |
| .text('{ True }') | |
| .style('font-size', '32') | |
| .style('fill', '#2ecc71'); | |
| input_data() | |
| } | |
| return "translate(" + p.x + "," + p.y + ")"; | |
| }; | |
| }; | |
| } | |
| function loop(){ | |
| my_state.transition() | |
| .duration(translate_speed) | |
| .ease('sin') | |
| .attrTween("transform", translateAlong(move_right.node())) | |
| .each("end", function(){ | |
| d3.select(this) | |
| .transition() | |
| .delay(500) | |
| .duration(translate_speed) | |
| .ease('sin') | |
| .attrTween("transform", translateAlong(move_left.node())) | |
| .each("end", loop) | |
| }) | |
| } | |
| function input_data(){ | |
| var c = svg.append('circle') | |
| .attr('cy', (10*Math.random()) + 85) | |
| .attr('cx', (400*Math.random()) + 200) | |
| .attr('r', (10*Math.random()) + 2) | |
| .attr('class', 'running') | |
| c.transition() | |
| .duration(fall_speed) | |
| .attr('cy', 250) | |
| .ease('bounce') | |
| .each("end", transform_data); | |
| } | |
| function transform_data(){ | |
| d3.select(this) | |
| .transition() | |
| .duration(1000) | |
| .attr('class', 'complete') | |
| .attr('cy', height - 75) | |
| .transition() | |
| .duration(100) | |
| .remove() | |
| } | |
| // Initiate model | |
| loop() | |
| d3.select(self.frameElement).style("height", (height+20) + "px"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment