Exploration of K-Means clustering for PCA and tSNE

Exploration of K-Means clustering for various projection methods

<!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="https://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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js