saifuddin778/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Clustering random points based on their similarity (groups) as star shaped spirals. fun.

  
## 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_ = 450; //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.1,
				gy: height / 2,
				colors_: gc('green', 'cornsilk', n_)
			},
			group_b: {
				group: 'group_b',
				gx: width * 0.3,
				gy: height / 2,
				colors_: gc('violet', 'lightblue', n_)
			},
			group_c: {
				group: 'group_c',
				gx: width * 0.5,
				gy: height / 2,
				colors_: gc('limegreen', 'yellow', n_)
			},
			group_d: {
				group: 'group_d',
				gx: width * 0.7,
				gy: height / 2,
				colors_: gc('springgreen', 'turquoise', n_)
			},
			group_e: {
				group: 'group_e',
				gx: width * 0.9,
				gy: height / 2,
				colors_: gc('gray', 'white', 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: 8,
				height: 8,
				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_star_spiral(gx, gy, q, n);
				d3.select(y_[q]).transition().attr("transform", "translate(" + position.x + "," + position.y + ")").delay(q * 40).duration(600);
			}
		}

		function movement_star_spiral(x, y, i, n) {
			var x_ = i * Math.cos(i + 0.01) + x;
			var y_ = i * Math.sin(i + 0.01) + y;
			return {
				x: parseInt(x_),
				y: parseInt(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_ = 450; //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.1,
	gy: height / 2,
	colors_: gc('green', 'cornsilk', n_)
	},
	group_b: {
	group: 'group_b',
	gx: width * 0.3,
	gy: height / 2,
	colors_: gc('violet', 'lightblue', n_)
	},
	group_c: {
	group: 'group_c',
	gx: width * 0.5,
	gy: height / 2,
	colors_: gc('limegreen', 'yellow', n_)
	},
	group_d: {
	group: 'group_d',
	gx: width * 0.7,
	gy: height / 2,
	colors_: gc('springgreen', 'turquoise', n_)
	},
	group_e: {
	group: 'group_e',
	gx: width * 0.9,
	gy: height / 2,
	colors_: gc('gray', 'white', 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: 8,
	height: 8,
	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_star_spiral(gx, gy, q, n);
	d3.select(y_[q]).transition().attr("transform", "translate(" + position.x + "," + position.y + ")").delay(q * 40).duration(600);
	}
	}

	function movement_star_spiral(x, y, i, n) {
	var x_ = i * Math.cos(i + 0.01) + x;
	var y_ = i * Math.sin(i + 0.01) + y;
	return {
	x: parseInt(x_),
	y: parseInt(y_)
	};
	}
	</script>
	</body>