Last active
September 2, 2015 02:21
-
-
Save abevieiramota/09a40c30f3e7b5ab385f to your computer and use it in GitHub Desktop.
gist, pq n atualiza?
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 = 20*dataset.length; | |
| var SVG_HEIGHT = 2000; | |
| var TRANSITION_DURATION = 2000; | |
| var TRANSITION_DELAY = 2200; | |
| var y_scale = d3.scale.linear().domain([0, 200]).range([0, SVG_HEIGHT]); | |
| 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 y_scale(SVG_HEIGHT - d.value * 10);}) | |
| .attr("width", 10) | |
| .attr("height", function(d){ return y_scale(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