Jverma · February 7, 2016 19:06
diff --git a/README.md b/README.md
diff --git a/finalOutput.csv b/finalOutput.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <html>
 <head>
 	<title>Clusters</title>
 </head>
 <body>
 <style type="text/css">
 	body{
 		font: 20px sans-serif;
 	}

 	#select-container{
 		font: 10px sans-serif;
 	}

 	.axis path,
 	.axis line{
 		font: 10px sans-serif;
 		fill: none;
 		stroke: #000;
 		shape-rendering: crispEdges;
 	}

 	.dot{
 		stroke: none;
 	}

 	.button1{
 		height: 50px;
 		width: 120px;
 		font-style: sans-serif;
 		position: absolute;
 		top: 10%;
 		left: 30%;
 		background-color: lightblue;
 		font-size: 10px;
 	}

 	.button2{
 		height: 50px;
 		width: 120px;
 		font-style: sans-serif;
 		position: absolute;
 		top: 10%;
 		left: 50%;
 		background-color: lightgreen;
 		font-size: 10px;
 	}
 </style>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <div><p>Exploration of K-Means clustering for various projection methods</p></div>
 <div id="select-container"><p>Original Coordinates</p></div>
 <p></p>
 <button class="button1">Principal Components</button>
 <p></p>
 <button class="button2">tSNE</button>

 <script type="text/javascript">
 var x_var="magU";
 var y_var="magU";
 var cluster="clusterPC2";

 d3.select(".button1")
 	.on("click", function(){
 		x_var = "PC1";
 		y_var = "PC2";
 		scatter(x_var, y_var, cluster);
 	});

 d3.select(".button2")
 	.on("click", function(){
 		x_var = "TSNE1";
 		y_var = "TSNE2";
 		scatter(x_var, y_var, cluster);
 	});

 function scatter(x_var, y_var, cluster){
 	d3.select("svg")
 		.remove();

 	var color = d3.scale.category20();
 	var margin = {top:20, right:20, bottom:30, left:40};
 	var w = 960 - margin.left - margin.right;
 	var h = 500 - margin.top - margin.bottom;

 	var x = d3.scale.linear()
 				.range([0,w]);

 	var y = d3.scale.linear()
 				.range([h, 0]);



 	var xAxis = d3.svg.axis()
 					.scale(x)
 					.orient("bottom");

 	var yAxis = d3.svg.axis()
 					.scale(y)
 					.orient("left");

 	var svg = d3.select("body").append("svg")
 				.attr("width", w + margin.left + margin.right)
 				.attr("height", h + margin.top + margin.bottom)
 				.append("g")
 				.attr("transform", "translate("+ margin.left + "," + margin.top + ")");


 	d3.csv("finalOutput.csv", function(error, data){
 		if (error) throw error;
 		contents = data.map(function(d){
 			magU = +d.cmodelmag_u;
 			magG = +d.cmodelmag_g;
 			magR = +d.cmodelmag_r;
 			magI = +d.cmodelmag_i;
 			magZ = +d.cmodelmag_z;
 			PC1 = +d.PC1;
 			PC2 = +d.PC2;
 			TSNE1 = +d.TSNE1;
 			TSNE2 = +d.TSNE2;
 			clusterPC2 = d.clusterPC2;
 			clusterPC3 = d.clusterPC3;
 			clusterPC4 = d.clusterPC4;
 			clusterPC5 = d.clusterPC5;
 			clusterTSNE2 = d.clusterTSNE2;
 			clusterTSNE3 = d.clusterTSNE3;
 			clusterTSNE4 = d.clusterTSNE4;
 			clusterTSNE5 = d.clusterTSNE5;
 			return {"magU": magU, "magG":magG, "magR":magR, "magI":magI, "magZ":magZ, "PC1":PC1, "PC2":PC2, "TSNE1":TSNE1, "TSNE2":TSNE2, "clusterPC2":clusterPC2,  "clusterPC3":clusterPC3, "clusterPC4":clusterPC4, "clusterPC5":clusterPC5, "clusterTSNE2":clusterTSNE2, "clusterTSNE3":clusterTSNE3, "clusterTSNE4":clusterTSNE4, "clusterTSNE5":clusterTSNE5}
 		});

 		x.domain(d3.extent(contents, function(d){return d[x_var];})).nice();


 		y.domain(d3.extent(contents, function(d){return d[y_var];})).nice();



 		svg.append("g")
 			.attr("class", "x axis")
 			.attr("transform", "translate(0," + h + ")")
 			.call(xAxis)
 			.append("text")
 			.attr("class", "label")
 			.attr("x", w)
 			.attr("y", -6)
 			.style("text-anchor", "end")
 			.style("font", "10px sans-serif")
 			.text(x_var);



 		svg.append("g")
 			.attr("class","y axis")
 			.call(yAxis)
 			.append("text")
 			.attr("class", "label")
 			.attr("transform", "rotate(-90)")
 			.attr("y", 6)
 			.attr("dy", ".71em")
 			.style("text-anchor", "end")
 			.style("font", "10px sans-serif")
 			.text(y_var);



 		svg.selectAll(".dot")
 			.data(contents)
 			.enter().append("circle")
 			.attr("class", "dot")
 			.attr("r", 5)
 			.attr("cx", function(d){return x(d[x_var]);})
 			.attr("cy", function(d){return y(d[y_var]);})
 			.attr("fill", function(d){return color(d[cluster]);});

 	}
 	);
 };



 var features = ["magU", "magG", "magR", "magI", "magZ"];
 var clusters = ["clusterPC2", "clusterPC3", "clusterPC4", "clusterPC5", "clusterTSNE2", "clusterTSNE3", "clusterTSNE4", "clusterTSNE5"];


 var dropdownX = d3.select('#select-container').append("p").text("X-axis ").append("select")
 	.attr("name", "country-list");

 var optionsX = dropdownX.selectAll("option")
 		.data(features)
 		.enter().append("option");

 optionsX.text(function(d){return d;})

 dropdownX.on("change", menuChangedX);

 function menuChangedX(){
 	var selectedValue = d3.event.target.value;
 	x_var = selectedValue;
 	scatter(x_var, y_var, cluster);
 }

 var dropdownY = d3.select('#select-container').append("p").text("Y-axis ").append("select")
 	.attr("name", "country-list1");

 var optionsY = dropdownY.selectAll("option")
 		.data(features)
 		.enter().append("option");

 optionsY.text(function(d){return d;})

 dropdownY.on("change", menuChangedY);

 function menuChangedY(){
 	var selectedValue = d3.event.target.value;
 	y_var = selectedValue;
 	scatter(x_var, y_var, cluster);
 }


 var dropdownColor = d3.select('#select-container').append("p").text("Number of clusters ").append("select")
 	.attr("name", "clusters");

 var options = dropdownColor.selectAll("option")
 	.data(clusters)
 	.enter().append("option")

 options.text(function(d){return d;})


 dropdownColor.on("change", menuChangedColor);
 function menuChangedColor(){
 	var selectedValue = d3.event.target.value;
 	cluster = selectedValue;
 	scatter(x_var, y_var, cluster);
 }

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>Clusters</title>
	</head>
	<body>
	<style type="text/css">
	body{
	font: 20px sans-serif;
	}

	#select-container{
	font: 10px sans-serif;
	}

	.axis path,
	.axis line{
	font: 10px sans-serif;
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot{
	stroke: none;
	}

	.button1{
	height: 50px;
	width: 120px;
	font-style: sans-serif;
	position: absolute;
	top: 10%;
	left: 30%;
	background-color: lightblue;
	font-size: 10px;
	}

	.button2{
	height: 50px;
	width: 120px;
	font-style: sans-serif;
	position: absolute;
	top: 10%;
	left: 50%;
	background-color: lightgreen;
	font-size: 10px;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<div><p>Exploration of K-Means clustering for various projection methods</p></div>
	<div id="select-container"><p>Original Coordinates</p></div>
	<p></p>
	<button class="button1">Principal Components</button>
	<p></p>
	<button class="button2">tSNE</button>

	<script type="text/javascript">
	var x_var="magU";
	var y_var="magU";
	var cluster="clusterPC2";

	d3.select(".button1")
	.on("click", function(){
	x_var = "PC1";
	y_var = "PC2";
	scatter(x_var, y_var, cluster);
	});

	d3.select(".button2")
	.on("click", function(){
	x_var = "TSNE1";
	y_var = "TSNE2";
	scatter(x_var, y_var, cluster);
	});

	function scatter(x_var, y_var, cluster){
	d3.select("svg")
	.remove();

	var color = d3.scale.category20();
	var margin = {top:20, right:20, bottom:30, left:40};
	var w = 960 - margin.left - margin.right;
	var h = 500 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0,w]);

	var y = d3.scale.linear()
	.range([h, 0]);



	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select("body").append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate("+ margin.left + "," + margin.top + ")");


	d3.csv("finalOutput.csv", function(error, data){
	if (error) throw error;
	contents = data.map(function(d){
	magU = +d.cmodelmag_u;
	magG = +d.cmodelmag_g;
	magR = +d.cmodelmag_r;
	magI = +d.cmodelmag_i;
	magZ = +d.cmodelmag_z;
	PC1 = +d.PC1;
	PC2 = +d.PC2;
	TSNE1 = +d.TSNE1;
	TSNE2 = +d.TSNE2;
	clusterPC2 = d.clusterPC2;
	clusterPC3 = d.clusterPC3;
	clusterPC4 = d.clusterPC4;
	clusterPC5 = d.clusterPC5;
	clusterTSNE2 = d.clusterTSNE2;
	clusterTSNE3 = d.clusterTSNE3;
	clusterTSNE4 = d.clusterTSNE4;
	clusterTSNE5 = d.clusterTSNE5;
	return {"magU": magU, "magG":magG, "magR":magR, "magI":magI, "magZ":magZ, "PC1":PC1, "PC2":PC2, "TSNE1":TSNE1, "TSNE2":TSNE2, "clusterPC2":clusterPC2, "clusterPC3":clusterPC3, "clusterPC4":clusterPC4, "clusterPC5":clusterPC5, "clusterTSNE2":clusterTSNE2, "clusterTSNE3":clusterTSNE3, "clusterTSNE4":clusterTSNE4, "clusterTSNE5":clusterTSNE5}
	});

	x.domain(d3.extent(contents, function(d){return d[x_var];})).nice();


	y.domain(d3.extent(contents, function(d){return d[y_var];})).nice();



	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", w)
	.attr("y", -6)
	.style("text-anchor", "end")
	.style("font", "10px sans-serif")
	.text(x_var);



	svg.append("g")
	.attr("class","y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.style("font", "10px sans-serif")
	.text(y_var);



	svg.selectAll(".dot")
	.data(contents)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", 5)
	.attr("cx", function(d){return x(d[x_var]);})
	.attr("cy", function(d){return y(d[y_var]);})
	.attr("fill", function(d){return color(d[cluster]);});

	}
	);
	};



	var features = ["magU", "magG", "magR", "magI", "magZ"];
	var clusters = ["clusterPC2", "clusterPC3", "clusterPC4", "clusterPC5", "clusterTSNE2", "clusterTSNE3", "clusterTSNE4", "clusterTSNE5"];


	var dropdownX = d3.select('#select-container').append("p").text("X-axis ").append("select")
	.attr("name", "country-list");

	var optionsX = dropdownX.selectAll("option")
	.data(features)
	.enter().append("option");

	optionsX.text(function(d){return d;})

	dropdownX.on("change", menuChangedX);

	function menuChangedX(){
	var selectedValue = d3.event.target.value;
	x_var = selectedValue;
	scatter(x_var, y_var, cluster);
	}

	var dropdownY = d3.select('#select-container').append("p").text("Y-axis ").append("select")
	.attr("name", "country-list1");

	var optionsY = dropdownY.selectAll("option")
	.data(features)
	.enter().append("option");

	optionsY.text(function(d){return d;})

	dropdownY.on("change", menuChangedY);

	function menuChangedY(){
	var selectedValue = d3.event.target.value;
	y_var = selectedValue;
	scatter(x_var, y_var, cluster);
	}


	var dropdownColor = d3.select('#select-container').append("p").text("Number of clusters ").append("select")
	.attr("name", "clusters");

	var options = dropdownColor.selectAll("option")
	.data(clusters)
	.enter().append("option")

	options.text(function(d){return d;})


	dropdownColor.on("change", menuChangedColor);
	function menuChangedColor(){
	var selectedValue = d3.event.target.value;
	cluster = selectedValue;
	scatter(x_var, y_var, cluster);
	}

	</script>

	</body>
	</html>