Last active
September 2, 2015 02:09
-
-
Save abevieiramota/f87a874de8948e7a6399 to your computer and use it in GitHub Desktop.
barras do mal from hell que ficam vermelhas
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
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var dataset = [177, 52, 16, 86, 93, 59, 117, 99, 115, 42, 12, 190, 75, | |
| 47, 20, 102, 140, 7, 62, 140, 197, 164, 136, 161, 180, 142, | |
| 134, 94, 11, 142]; | |
| var POS_X = 10; | |
| var SVG_WIDTH = 10*dataset.length; | |
| var SVG_HEIGHT = 500; | |
| var TRANSITION_DURATION = 2000; | |
| var TRANSITION_DELAY = 2200; | |
| var svg = d3 | |
| .select("body") | |
| .append("svg") | |
| .attr("width", SVG_WIDTH) | |
| .attr("height", SVG_HEIGHT); | |
| var show_arr = function(arr) { | |
| var rects_w_data = svg | |
| .selectAll("rect") | |
| .data(arr, function(d) { return d.key;}) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d) { return d.ix*20;}) | |
| .attr("y", function(d){ return SVG_HEIGHT - d.value * 10;}) | |
| .attr("width", 10) | |
| .attr("height", function(d){ return d.value * 10;}); | |
| } | |
| var update_arr = function(arr, delay) { | |
| svg | |
| .selectAll("rect") | |
| .data(arr, function(d) { return d.key;}) | |
| .transition() | |
| .delay(delay) | |
| .duration(TRANSITION_DURATION) | |
| .ease("bounce") | |
| .each("start", function() { d3.select(this).attr("fill", "red");}) | |
| .attr("x", function(d) { return d.ix*20;}) | |
| .attr("fill","black"); | |
| } | |
| var bubble_sort = function(arr) { | |
| // cria json | |
| var _dataset = []; | |
| for(var i=0;i<arr.length;i++) { | |
| var entry = {}; | |
| entry["ix"] = i; | |
| entry["key"] = i; | |
| entry["value"] = arr[i]; | |
| _dataset.push(entry); | |
| } | |
| // apresenta | |
| show_arr(_dataset); | |
| // bubble | |
| for(var i=0;i<arr.length - 1;i++) { | |
| var min_value = arr[i]; | |
| var ix_min_value = i; | |
| for(var j=i;j<arr.length;j++) { | |
| if(arr[j] < min_value) { | |
| min_value = arr[j]; | |
| ix_min_value = j; | |
| } | |
| }; | |
| var temp = arr[i]; | |
| arr[i] = min_value; | |
| arr[ix_min_value] = temp; | |
| _switch = []; | |
| var entry_i, entry_j; | |
| for(var k=0;k<_dataset.length;k++) { | |
| if(_dataset[k].ix == i) { | |
| entry_i = _dataset[k]; | |
| } | |
| if(_dataset[k].ix == ix_min_value) { | |
| entry_j = _dataset[k]; | |
| } | |
| } | |
| var temp_ix = entry_i.ix; | |
| entry_i.ix = entry_j.ix; | |
| entry_j.ix = temp_ix; | |
| _switch.push(entry_i, entry_j); | |
| // atualiza a visualização | |
| update_arr(_switch, i*TRANSITION_DELAY); | |
| }; | |
| }; | |
| bubble_sort(dataset); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment