abevieiramota · September 2, 2015 02:29
diff --git a/index.html b/index.html
 <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 = 600;
 		var TRANSITION_DURATION = 2000;
 		var TRANSITION_DELAY = 2200;
 		var y_scale = d3.scale.linear().domain([0, 200]).range([0, SVG_HEIGHT - 50]);

 		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 - y_scale(d.value);})
 			.attr("width", 10)
 			.attr("height", function(d){ return y_scale(d.value);})
 			.attr("fill", "blue");
 		}
 		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("y", SVG_HEIGHT).attr("height", 0);})
 			.attr("x", function(d) { return d.ix*20;})
 			.attr("fill","blue")
 			.attr("y", function(d){ return SVG_HEIGHT - y_scale(d.value);})
 			.attr("height", function(d){ return y_scale(d.value);});
 			
 			
 		}
 		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;
 					}
 				};

 				if(i == ix_min_value) {
 					continue;
 				}
 				
 				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>
	<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 = 600;
	var TRANSITION_DURATION = 2000;
	var TRANSITION_DELAY = 2200;
	var y_scale = d3.scale.linear().domain([0, 200]).range([0, SVG_HEIGHT - 50]);

	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 - y_scale(d.value);})
	.attr("width", 10)
	.attr("height", function(d){ return y_scale(d.value);})
	.attr("fill", "blue");
	}
	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("y", SVG_HEIGHT).attr("height", 0);})
	.attr("x", function(d) { return d.ix*20;})
	.attr("fill","blue")
	.attr("y", function(d){ return SVG_HEIGHT - y_scale(d.value);})
	.attr("height", function(d){ return y_scale(d.value);});


	}
	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;
	}
	};

	if(i == ix_min_value) {
	continue;
	}

	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>