saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Example of clustering randomly placed particles using a given key (or group in this case) in the form of squares.
The basic logic is decrementing the y on every cutoff point of x, where the cutoff point is determined by the number of particles allowed in a given row.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>

<body>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
		function pr_(obj) {
			var result;
			var count = 0;
			for (var prop in obj) {
				if (Math.random() < 1 / ++count) {
					result = prop;
				}
			}
			return result;
		}

		function gc(c1, c2, n_) {
			var colors_ = d3.scale.linear().domain([0, n_]).range([c1, c2]);
			return colors_;
		}

		var n_ = 400; //n_ number of particles
		var margin = {
			top: 30,
			right: 60,
			bottom: 60,
			left: 30
		};
		var width = 1024 - margin.left - margin.right;
		var height = (550 - 10) - margin.top - margin.bottom;
		var grouping_key = "group";
		var particles = [];

		var groups = {
			group_a: {
				group: "group_a",
				gx: width * 0.02,
				gy: height * 0.1,
				colors_: gc("crimson", "cornsilk", n_)
			},
			group_b: {
				group: "group_b",
				gx: width * 0.21,
				gy: height * 0.1,
				colors_: gc("darkseagreen", "lightblue", n_)
			},
			group_c: {
				group: "group_c",
				gx: width * 0.4,
				gy: height * 0.1,
				colors_: gc("red", "yellow", n_)
			},
			group_d: {
				group: "group_d",
				gx: width * 0.59,
				gy: height * 0.1,
				colors_: gc("springgreen", "turquoise", n_)
			},
			group_e: {
				group: "group_e",
				gx: width * 0.78,
				gy: height * 0.1,
				colors_: gc("tomato", "khaki", n_)
			}
		};

		var svg = d3.select("body")
			.append("svg")
			.attr("id", "particles_svg")
			.attr("width", width).attr("height", height)
			.append("g")
			.attr("transform", "translate(0, 0)");

		for (var i_parts = 0; i_parts <= n_; i_parts++) {
			var particle_grp = pr_(groups);
			var particle = {
				color: groups[particle_grp].colors_(i_parts),
				width: 10,
				height: 10,
				group: groups[particle_grp].group,
				gx: groups[particle_grp].gx,
				gy: groups[particle_grp].gy,
				x: Math.random() * width,
				y: Math.random() * height,
				id: i_parts,
			};
			particles.push(particle);
		}

		var nodes = svg.selectAll(".node").data(particles)
			.enter().append("g")
			.attr("class", "node")
			.attr("transform", function(d) {
				return "translate(" + d.x + "," + d.y + ")";
			})
			.attr("x", function(d) {
				return d.x
			})
			.attr("y", function(d) {
				return d.y
			})
			.attr("group", function(d) {
				return d.group;
			});

		nodes.append("rect")
			.style("fill", function(d) {
				return d.color;
			})
			.attr("id", function(d) {
				return d.id;
			})
			.attr("width", function(d) {
				return d.width;
			})
			.attr("height", function(d) {
				return d.height;
			});

		for (group in groups) {
			var y_ = d3.selectAll(".node").filter(function(d) {
				return d.group == group
			})[0];
			var n = 25;
			for (var q = 0; q < y_.length; q++) {
				var gx = y_[q].__data__.gx;
				var gy = y_[q].__data__.gy;
				var position = movement_square(gx, gy, q, n);
				d3.select(y_[q]).transition().attr("transform", "translate(" + position.x + "," + position.y + ")").delay(q * 40).duration(600);
			}
		}

		function movement_square(x, y, i, n) {
			var npr = 6; //number of elements per row
			var cut = i % npr; //increment x up to the cutoff
			if (i <= npr) {
				y_add = 1;
			} else {
				y_add = Math.floor(i / npr); //decrement y when npr reached
			}
			var x_ = x + (cut * n);
			var y_ = y + (y_add * n);
			return {
				x: x_,
				y: y_
			};
		}
	</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	</style>

	<body>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	function pr_(obj) {
	var result;
	var count = 0;
	for (var prop in obj) {
	if (Math.random() < 1 / ++count) {
	result = prop;
	}
	}
	return result;
	}

	function gc(c1, c2, n_) {
	var colors_ = d3.scale.linear().domain([0, n_]).range([c1, c2]);
	return colors_;
	}

	var n_ = 400; //n_ number of particles
	var margin = {
	top: 30,
	right: 60,
	bottom: 60,
	left: 30
	};
	var width = 1024 - margin.left - margin.right;
	var height = (550 - 10) - margin.top - margin.bottom;
	var grouping_key = "group";
	var particles = [];

	var groups = {
	group_a: {
	group: "group_a",
	gx: width * 0.02,
	gy: height * 0.1,
	colors_: gc("crimson", "cornsilk", n_)
	},
	group_b: {
	group: "group_b",
	gx: width * 0.21,
	gy: height * 0.1,
	colors_: gc("darkseagreen", "lightblue", n_)
	},
	group_c: {
	group: "group_c",
	gx: width * 0.4,
	gy: height * 0.1,
	colors_: gc("red", "yellow", n_)
	},
	group_d: {
	group: "group_d",
	gx: width * 0.59,
	gy: height * 0.1,
	colors_: gc("springgreen", "turquoise", n_)
	},
	group_e: {
	group: "group_e",
	gx: width * 0.78,
	gy: height * 0.1,
	colors_: gc("tomato", "khaki", n_)
	}
	};

	var svg = d3.select("body")
	.append("svg")
	.attr("id", "particles_svg")
	.attr("width", width).attr("height", height)
	.append("g")
	.attr("transform", "translate(0, 0)");

	for (var i_parts = 0; i_parts <= n_; i_parts++) {
	var particle_grp = pr_(groups);
	var particle = {
	color: groups[particle_grp].colors_(i_parts),
	width: 10,
	height: 10,
	group: groups[particle_grp].group,
	gx: groups[particle_grp].gx,
	gy: groups[particle_grp].gy,
	x: Math.random() * width,
	y: Math.random() * height,
	id: i_parts,
	};
	particles.push(particle);
	}

	var nodes = svg.selectAll(".node").data(particles)
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	})
	.attr("x", function(d) {
	return d.x
	})
	.attr("y", function(d) {
	return d.y
	})
	.attr("group", function(d) {
	return d.group;
	});

	nodes.append("rect")
	.style("fill", function(d) {
	return d.color;
	})
	.attr("id", function(d) {
	return d.id;
	})
	.attr("width", function(d) {
	return d.width;
	})
	.attr("height", function(d) {
	return d.height;
	});

	for (group in groups) {
	var y_ = d3.selectAll(".node").filter(function(d) {
	return d.group == group
	})[0];
	var n = 25;
	for (var q = 0; q < y_.length; q++) {
	var gx = y_[q].__data__.gx;
	var gy = y_[q].__data__.gy;
	var position = movement_square(gx, gy, q, n);
	d3.select(y_[q]).transition().attr("transform", "translate(" + position.x + "," + position.y + ")").delay(q * 40).duration(600);
	}
	}

	function movement_square(x, y, i, n) {
	var npr = 6; //number of elements per row
	var cut = i % npr; //increment x up to the cutoff
	if (i <= npr) {
	y_add = 1;
	} else {
	y_add = Math.floor(i / npr); //decrement y when npr reached
	}
	var x_ = x + (cut * n);
	var y_ = y + (y_add * n);
	return {
	x: x_,
	y: y_
	};
	}
	</script>
	</body>