abevieiramota · August 30, 2015 01:32
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 = [5,2,4,7,9,1,0,3,8,6,77,91,-2,39,201];

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

 		var svg = d3
 		.select("body")
 		.append("svg")
 		.attr("width", SVG_WIDTH)
 		.attr("height", SVG_HEIGHT);

 		var _dataset = {};

 		var show_arr = function(arr) {

 			for(var i=0;i<arr.length;i++) {

 				_dataset[i] = arr[i];
 			};

 			_dataset = d3.entries(_dataset);

 			var texts_w_data = svg
 			.selectAll("text")
 			.data(_dataset, function(d) { return d.key;})
 			.enter()
 			.append("text")
 			.text(function(d) { return d.value; })
 			.attr("x", POS_X)
 			.attr("y", function(d, i) { return NUMBER_HEIGHT*(i+1);});

 		}

 		var update_arr = function(arr) {

 			for(var i=0;i<arr.length;i++) {

 				_dataset[i] = arr[i];
 			};

 			_dataset = d3.entries(_dataset);

 			var texts_w_data = svg
 			.selectAll("text")
 			.data(_dataset, function(d) { return d.key;})
 			.transition()
 			.delay(TRANSITION_DELAY)
 			.duration(TRANSITION_DURATION)
 			.tween("text", function(d) {

 				var rng = d3.interpolateRound(0, d.value);

 				return function(t) {

 					this.textContent = rng(t);
 				};});

 			//.text(function(d) { return d.value; });

 		}

 		var switch_arr = function(arr, i, j) {

 			// TODO: verificar se i e j estão dentro do domínio
 			// TODO: verificar se arr é array rs



 		};

 		var bubble_sort = function(arr) {

 			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;

 			};

 			return arr;
 		};

 		show_arr(dataset);

 		sorted_dataset = bubble_sort(dataset);

 		update_arr(sorted_dataset);


 /*
 d3
 .select("body")
 .on("click", function() {

 	dataset[0] = 999;

 	console.log(dataset);

 	ps
 	.data(dataset)
 	.transition()
 	.duration(4000)
 	.text(function(d) { return d; })
 	.attr("x", function(d, i) { return 10;})
 	.attr("y", function(d, i) { return 20*(i+1);});
 });
 */

 </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 = [5,2,4,7,9,1,0,3,8,6,77,91,-2,39,201];

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

	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", SVG_WIDTH)
	.attr("height", SVG_HEIGHT);

	var _dataset = {};

	var show_arr = function(arr) {

	for(var i=0;i<arr.length;i++) {

	_dataset[i] = arr[i];
	};

	_dataset = d3.entries(_dataset);

	var texts_w_data = svg
	.selectAll("text")
	.data(_dataset, function(d) { return d.key;})
	.enter()
	.append("text")
	.text(function(d) { return d.value; })
	.attr("x", POS_X)
	.attr("y", function(d, i) { return NUMBER_HEIGHT*(i+1);});

	}

	var update_arr = function(arr) {

	for(var i=0;i<arr.length;i++) {

	_dataset[i] = arr[i];
	};

	_dataset = d3.entries(_dataset);

	var texts_w_data = svg
	.selectAll("text")
	.data(_dataset, function(d) { return d.key;})
	.transition()
	.delay(TRANSITION_DELAY)
	.duration(TRANSITION_DURATION)
	.tween("text", function(d) {

	var rng = d3.interpolateRound(0, d.value);

	return function(t) {

	this.textContent = rng(t);
	};});

	//.text(function(d) { return d.value; });

	}

	var switch_arr = function(arr, i, j) {

	// TODO: verificar se i e j estão dentro do domínio
	// TODO: verificar se arr é array rs



	};

	var bubble_sort = function(arr) {

	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;

	};

	return arr;
	};

	show_arr(dataset);

	sorted_dataset = bubble_sort(dataset);

	update_arr(sorted_dataset);


	/*
	d3
	.select("body")
	.on("click", function() {

	dataset[0] = 999;

	console.log(dataset);

	ps
	.data(dataset)
	.transition()
	.duration(4000)
	.text(function(d) { return d; })
	.attr("x", function(d, i) { return 10;})
	.attr("y", function(d, i) { return 20*(i+1);});
	});
	*/

	</script>

	</body>

	</html>