abevieiramota · August 30, 2015 21:34
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 = [];
 		var size = 20;
 		var MAX_VALUE = 30;
 		for(var i=0;i<size;i++) {
 			dataset.push(Math.round(Math.random() * MAX_VALUE));
 		}

 		var POS_X = 10;
 		var SVG_WIDTH = 20*dataset.length;
 		var SVG_HEIGHT = 500;
 		var TRANSITION_DURATION = 1000;
 		var TRANSITION_DELAY = 1000;

 		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(500)
 			.ease("linear")
 			.attr("x", function(d) { return d.ix*20;});
 		}

 		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*600);
 			};

 		};

 		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 = [];
	var size = 20;
	var MAX_VALUE = 30;
	for(var i=0;i<size;i++) {
	dataset.push(Math.round(Math.random() * MAX_VALUE));
	}

	var POS_X = 10;
	var SVG_WIDTH = 20*dataset.length;
	var SVG_HEIGHT = 500;
	var TRANSITION_DURATION = 1000;
	var TRANSITION_DELAY = 1000;

	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(500)
	.ease("linear")
	.attr("x", function(d) { return d.ix*20;});
	}

	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*600);
	};

	};

	bubble_sort(dataset);

	</script>

	</body>

	</html>