derPlau · January 4, 2016 16:59
diff --git a/README.md b/README.md
diff --git a/allpcs.csv b/allpcs.csv
diff --git a/index.html b/index.html

 <!DOCTYPE html>

 <head>
 <style>
 .axis text {
  font: 14px sans-serif;
 }
 
 .legend text {
 	font: 12px sans-serif;
 }
 
 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }
 

 
 

 </style>
 <script src="http://d3js.org/d3.v3.min.js"></script>

 </head>

 <body>

 <svg class="chart"></svg>

 <script>

 //TO DO:
 //Better Axes
 //Animation
 //Hovers
 //Hulls
 //Labels
 	//Control to show/hide hulls/labels

 var totWidth = 700,
    totHeight = totWidth,
    margin = {top: 30, right: 30, bottom: 30, left: 30},
    width = totWidth - (margin.left + margin.right),
    height = totHeight - (margin.top + margin.bottom),
 	occptsize = 3,
 	subclusptsize = 5,
 	clusptsize = 8,
 	occopac = .4,
 	subclusopac = 1,
 	clusopac = 1,
 	
 	axlabelltrwidth = 7,
 	axlabeltxtpad = 5,
 	
 	clusnames
 ;

 	var colors = ["#5b6f75", "#ff0329", "#e84aff", "#ad57f0", "#9e7dff", "#6ebaff", "#54dbff", "#1979c1", "#6ee670", "#3bff00", "#43bb00", "#93c000", "#8b7100", "#eb7500", "#b32d4f"];

 	var axlabs = [
 		[{left: "Physical", right: "Intellectual"}],
 		[{left: "Interpersonal", right: "Technical"}],
 		[{left: "Abstract", right: "Concrete"}],
 		[{left: "Information", right: "Interaction"}],
 		[{left: "Manage/Monitor", right: "Produce/Create"}]
 	];


 var x = d3.scale.linear()
    .range([0, width]);
    
 var y = d3.scale.linear()
    .range([height,0]);

 var xax,
 	yax
 ;

 var svg = d3.select(".chart")
 		.attr("width",totWidth)
 		.attr("height",totHeight)
 ;
 var chart = svg .append("g")
 		.attr("transform","translate("+margin.left+","+margin.top+")")
 	;
 	
 var defs = chart.append("defs");

 defs.append("marker")
    .attr("id", "triangle-start")
    .attr("viewBox", "0 0 16 16")
    .attr("refX", 16)
    .attr("refY", 8)
    .attr("markerWidth", -8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M 0 0 L 16 8 L 0 16 z")
 ;

 defs.append("marker")
    .attr("id", "triangle-end")
    .attr("viewBox", "0 0 16 16")
    .attr("refX", 16)
    .attr("refY", 8)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M 0 0 L 16 8 L 0 16 z")
 ;


 d3.csv("allpcs.csv",
 	/*type,*/
 	function(error, data) {
 	
 	//Type conversion
 	data.forEach(function(d) {
 		if (d.type === "Cluster") {
 			d.soc = null;
 			d.soctitle = null;
 			d.subcluster = null;
 			d.subclusname = null;
 		}
 		else if (d.type == "Subcluster") {
 			d.soc = null;
 			d.soctitle = null;
 			d.subcluster = +d.subcluster;
 		}
 		else {
 			d.subcluster = +d.subcluster;
 		}
 		d.cluster = +d.cluster;
 		d.pc1 = +d.pc1;
 		d.pc2 = +d.pc2;
 		d.pc3 = +d.pc3;
 		d.pc4 = +d.pc4;
 		d.pc5 = +d.pc5;
 		d.pc = [d.pc1, d.pc2, d.pc3, d.pc4, d.pc5];
 	});
 	
 	clusnames = 
 		d3.set(data.map(function(d) { return d.clusname; })).values()
 	;
 	
 	
 	var curpcx = 0,
 		curpcy = 1,
 		changeaxis = 0
 	;
 	
 	
 	var dvs = chart.selectAll(".dataval")
 			.data(data, function(d) {return d.type + d.soc + d.cluster + d.subcluster;})
 		.enter() .append("circle")
 			.attr("cx",function(d) {return x(d.pc[curpcx]);})
 			.attr("cy",function(d) {return y(d.pc[curpcy]);})
 			.attr("class","dataval")
 			.attr("r", function(d) {
 				if (d.type === "Cluster") {return clusptsize;}
 				else if (d.type === "Subcluster") {return subclusptsize;}
 				else {return occptsize;}
 				return stroke;
 			})
 			.style("stroke", function(d) {
 				if (d.type === "Cluster") {return "black";}
 				else {return "none";}
 			})
 			.style("fill", function(d) {return colors[d.cluster-1];})
 			.style("fill-opacity", function(d) {
 				if (d.type === "Cluster") {return clusopac;}
 				else if (d.type === "Subcluster") {return subclusopac;}
 				else {return occopac;}
 				return stroke;
 			})
 		;
 	
 	//axupdate(xax,yax,curpcx,curpcy);

 //		update(data,curpcx,curpcy);

 		setInterval(function() {
 			if(changeaxis == 0) {
 				if (curpcy == 4) {curpcx = 0;}
 				else {curpcx = curpcy + 1;}
 				changeaxis = 1;
 			}
 			else {
 				if (curpcx == 4) {curpcy = 0;}
 				else {curpcy = curpcx + 1;}
 				changeaxis = 0;
 			}
 			dataupdate(data,curpcx,curpcy);
 			axupdate(xax,yax,curpcx,curpcy);
 		},1500);
 	  
 }); //end .csv callback


 ///////////////////////
 function dataupdate(data,curpcx,curpcy) {
 	x.domain([d3.min(data, function(d) {return d.pc[curpcx];}),d3.max(data, function(d) {return d.pc[curpcx];})]);
 	y.domain([d3.min(data, function(d) {return d.pc[curpcy];}),d3.max(data, function(d) {return d.pc[curpcy];})]);
 		
 	var transition = svg.transition().duration(1500);
 	
 	transition.selectAll(".dataval")
 			.attr("cx",function(d) {return x(d.pc[curpcx]);})
 			.attr("cy",function(d) {return y(d.pc[curpcy]);})
 		;
 	
 }

 function svgy(y) {
 	return height - y;
 }

 function strwidth(str) {
 	return str.split("").length*axlabelltrwidth
 }

 function axupdate(xax,yax,curpcx,curpcy) {	

 	xax = svg.selectAll(".x.axis")
 			.data(axlabs[curpcx],function(d) {return d.left;});
 			
 	xenter = xax.enter().append("g")
 			.attr("class","x axis")
 			.attr("transform","translate("+ /*margin.left*/width + "," + (totHeight - margin.bottom / 2) + ")")
 			.style("fill-opacity",1e-6)
 			.style("stroke-opacity",1e-6)
 	;
 	
 	xenter .append("text")
 			.attr("y", 0)
 			.attr("x", 0)
 			.attr("text-anchor","start")
 			.text(function(d) {return d.left;})
 	;
 	
 	xenter .append("text")
 			.attr("y", 0)
 			.attr("x", width)
 			.attr("text-anchor","end")
 			.text(function(d) {return d.right;})
 	;
 	
 	xenter .append("line")
 		.attr("x1",function(d) {return strwidth(d.left) + axlabeltxtpad;})
 		.attr("x2",function(d) {return width - (strwidth(d.right) + axlabeltxtpad);})
 		.attr("y1",-4)
 		.attr("y2",-4)
 		.style("stroke","black")
 		.style("fill","none")
 		.attr("marker-end", "url(#triangle-end)")
 		.attr("marker-start", "url(#triangle-start)")
 	;

 	xenter .transition()
 			.duration(1500)
 			.attr("transform","translate("+ margin.left/*width*/ + "," + (totHeight - margin.bottom / 2) + ")")
 			.style("fill-opacity",1)
 			.style("stroke-opacity",1)
 	;
 			
 	
 	xax.exit()
 		.transition()
 			.duration(250)
 			//.attr("x",-(width-margin.left))
 			//.attr("transform","translate("+ (-1*margin.left)/*width*/ + "," + (totHeight - margin.bottom / 2) + ")")
 			.style("fill-opacity",1e-6)
 			.style("stroke-opacity",1e-6)
 			.remove()
 	;

 	yax = svg.selectAll(".y.axis")
 			.data(axlabs[curpcy],function(d) {return d.left;});
 			
 	yenter = yax.enter().append("g")
 			.attr("class","y axis")
 			.attr("transform","translate("+ (margin.left/2) + "," + /*(margin.top)*/height + ")")
 			.style("fill-opacity",1e-6)
 			.style("stroke-opacity",1e-6)
 	;
 	
 	yenter .append("text")
 		.attr("transform","translate(0," + height + ") rotate(-90)")		
 		.text(function(d) {return d.left;})
 		.style("text-anchor","start")
 	;
 	
 	yenter .append("text")
 		.attr("transform","translate(0,0) rotate(-90)")
 		.text(function(d) {return d.right;})
 		.style("text-anchor","end")
 	;
 	
 	yenter .append("line")
 		.attr("x1",-3)
 		.attr("x2",-3)
 		.attr("y1",function(d) {return height - (strwidth(d.left) + axlabeltxtpad);})
 		.attr("y2",function(d) {return strwidth(d.right) + axlabeltxtpad;})
 		.style("stroke","black")
 		.style("fill","none")
 		.attr("marker-end", "url(#triangle-end)")
 		.attr("marker-start", "url(#triangle-start)")
 	;

 	yenter .transition()
 			.duration(1500)
 			.attr("transform","translate("+ (margin.left/2) + "," + (margin.top)/*height*/ + ")")
 			.style("fill-opacity",1)
 			.style("stroke-opacity",1)
 	;
 			
 	
 	yax.exit()
 		.transition()
 			.duration(250)
 			//.attr("x",-(width-margin.left))
 			//.attr("transform","translate("+ (-1*margin.left)/*width*/ + "," + 0*(totHeight - margin.bottom / 2) + ")")
 			.style("fill-opacity",1e-6)
 			.style("stroke-opacity",1e-6)
 			.remove()
 	;
 	
 					
 }

 </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png

	<!DOCTYPE html>

	<head>
	<style>
	.axis text {
	font: 14px sans-serif;
	}

	.legend text {
	font: 12px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}





	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	</head>

	<body>

	<svg class="chart"></svg>

	<script>

	//TO DO:
	//Better Axes
	//Animation
	//Hovers
	//Hulls
	//Labels
	//Control to show/hide hulls/labels

	var totWidth = 700,
	totHeight = totWidth,
	margin = {top: 30, right: 30, bottom: 30, left: 30},
	width = totWidth - (margin.left + margin.right),
	height = totHeight - (margin.top + margin.bottom),
	occptsize = 3,
	subclusptsize = 5,
	clusptsize = 8,
	occopac = .4,
	subclusopac = 1,
	clusopac = 1,

	axlabelltrwidth = 7,
	axlabeltxtpad = 5,

	clusnames
	;

	var colors = ["#5b6f75", "#ff0329", "#e84aff", "#ad57f0", "#9e7dff", "#6ebaff", "#54dbff", "#1979c1", "#6ee670", "#3bff00", "#43bb00", "#93c000", "#8b7100", "#eb7500", "#b32d4f"];

	var axlabs = [
	[{left: "Physical", right: "Intellectual"}],
	[{left: "Interpersonal", right: "Technical"}],
	[{left: "Abstract", right: "Concrete"}],
	[{left: "Information", right: "Interaction"}],
	[{left: "Manage/Monitor", right: "Produce/Create"}]
	];


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

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

	var xax,
	yax
	;

	var svg = d3.select(".chart")
	.attr("width",totWidth)
	.attr("height",totHeight)
	;
	var chart = svg .append("g")
	.attr("transform","translate("+margin.left+","+margin.top+")")
	;

	var defs = chart.append("defs");

	defs.append("marker")
	.attr("id", "triangle-start")
	.attr("viewBox", "0 0 16 16")
	.attr("refX", 16)
	.attr("refY", 8)
	.attr("markerWidth", -8)
	.attr("markerHeight", 8)
	.attr("orient", "auto")
	.append("path")
	.attr("d", "M 0 0 L 16 8 L 0 16 z")
	;

	defs.append("marker")
	.attr("id", "triangle-end")
	.attr("viewBox", "0 0 16 16")
	.attr("refX", 16)
	.attr("refY", 8)
	.attr("markerWidth", 8)
	.attr("markerHeight", 8)
	.attr("orient", "auto")
	.append("path")
	.attr("d", "M 0 0 L 16 8 L 0 16 z")
	;


	d3.csv("allpcs.csv",
	/type,/
	function(error, data) {

	//Type conversion
	data.forEach(function(d) {
	if (d.type === "Cluster") {
	d.soc = null;
	d.soctitle = null;
	d.subcluster = null;
	d.subclusname = null;
	}
	else if (d.type == "Subcluster") {
	d.soc = null;
	d.soctitle = null;
	d.subcluster = +d.subcluster;
	}
	else {
	d.subcluster = +d.subcluster;
	}
	d.cluster = +d.cluster;
	d.pc1 = +d.pc1;
	d.pc2 = +d.pc2;
	d.pc3 = +d.pc3;
	d.pc4 = +d.pc4;
	d.pc5 = +d.pc5;
	d.pc = [d.pc1, d.pc2, d.pc3, d.pc4, d.pc5];
	});

	clusnames =
	d3.set(data.map(function(d) { return d.clusname; })).values()
	;


	var curpcx = 0,
	curpcy = 1,
	changeaxis = 0
	;


	var dvs = chart.selectAll(".dataval")
	.data(data, function(d) {return d.type + d.soc + d.cluster + d.subcluster;})
	.enter() .append("circle")
	.attr("cx",function(d) {return x(d.pc[curpcx]);})
	.attr("cy",function(d) {return y(d.pc[curpcy]);})
	.attr("class","dataval")
	.attr("r", function(d) {
	if (d.type === "Cluster") {return clusptsize;}
	else if (d.type === "Subcluster") {return subclusptsize;}
	else {return occptsize;}
	return stroke;
	})
	.style("stroke", function(d) {
	if (d.type === "Cluster") {return "black";}
	else {return "none";}
	})
	.style("fill", function(d) {return colors[d.cluster-1];})
	.style("fill-opacity", function(d) {
	if (d.type === "Cluster") {return clusopac;}
	else if (d.type === "Subcluster") {return subclusopac;}
	else {return occopac;}
	return stroke;
	})
	;

	//axupdate(xax,yax,curpcx,curpcy);

	// update(data,curpcx,curpcy);

	setInterval(function() {
	if(changeaxis == 0) {
	if (curpcy == 4) {curpcx = 0;}
	else {curpcx = curpcy + 1;}
	changeaxis = 1;
	}
	else {
	if (curpcx == 4) {curpcy = 0;}
	else {curpcy = curpcx + 1;}
	changeaxis = 0;
	}
	dataupdate(data,curpcx,curpcy);
	axupdate(xax,yax,curpcx,curpcy);
	},1500);

	}); //end .csv callback


	///////////////////////
	function dataupdate(data,curpcx,curpcy) {
	x.domain([d3.min(data, function(d) {return d.pc[curpcx];}),d3.max(data, function(d) {return d.pc[curpcx];})]);
	y.domain([d3.min(data, function(d) {return d.pc[curpcy];}),d3.max(data, function(d) {return d.pc[curpcy];})]);

	var transition = svg.transition().duration(1500);

	transition.selectAll(".dataval")
	.attr("cx",function(d) {return x(d.pc[curpcx]);})
	.attr("cy",function(d) {return y(d.pc[curpcy]);})
	;

	}

	function svgy(y) {
	return height - y;
	}

	function strwidth(str) {
	return str.split("").length*axlabelltrwidth
	}

	function axupdate(xax,yax,curpcx,curpcy) {

	xax = svg.selectAll(".x.axis")
	.data(axlabs[curpcx],function(d) {return d.left;});

	xenter = xax.enter().append("g")
	.attr("class","x axis")
	.attr("transform","translate("+ /margin.left/width + "," + (totHeight - margin.bottom / 2) + ")")
	.style("fill-opacity",1e-6)
	.style("stroke-opacity",1e-6)
	;

	xenter .append("text")
	.attr("y", 0)
	.attr("x", 0)
	.attr("text-anchor","start")
	.text(function(d) {return d.left;})
	;

	xenter .append("text")
	.attr("y", 0)
	.attr("x", width)
	.attr("text-anchor","end")
	.text(function(d) {return d.right;})
	;

	xenter .append("line")
	.attr("x1",function(d) {return strwidth(d.left) + axlabeltxtpad;})
	.attr("x2",function(d) {return width - (strwidth(d.right) + axlabeltxtpad);})
	.attr("y1",-4)
	.attr("y2",-4)
	.style("stroke","black")
	.style("fill","none")
	.attr("marker-end", "url(#triangle-end)")
	.attr("marker-start", "url(#triangle-start)")
	;

	xenter .transition()
	.duration(1500)
	.attr("transform","translate("+ margin.left/width/ + "," + (totHeight - margin.bottom / 2) + ")")
	.style("fill-opacity",1)
	.style("stroke-opacity",1)
	;


	xax.exit()
	.transition()
	.duration(250)
	//.attr("x",-(width-margin.left))
	//.attr("transform","translate("+ (-1margin.left)/width*/ + "," + (totHeight - margin.bottom / 2) + ")")
	.style("fill-opacity",1e-6)
	.style("stroke-opacity",1e-6)
	.remove()
	;

	yax = svg.selectAll(".y.axis")
	.data(axlabs[curpcy],function(d) {return d.left;});

	yenter = yax.enter().append("g")
	.attr("class","y axis")
	.attr("transform","translate("+ (margin.left/2) + "," + /(margin.top)/height + ")")
	.style("fill-opacity",1e-6)
	.style("stroke-opacity",1e-6)
	;

	yenter .append("text")
	.attr("transform","translate(0," + height + ") rotate(-90)")
	.text(function(d) {return d.left;})
	.style("text-anchor","start")
	;

	yenter .append("text")
	.attr("transform","translate(0,0) rotate(-90)")
	.text(function(d) {return d.right;})
	.style("text-anchor","end")
	;

	yenter .append("line")
	.attr("x1",-3)
	.attr("x2",-3)
	.attr("y1",function(d) {return height - (strwidth(d.left) + axlabeltxtpad);})
	.attr("y2",function(d) {return strwidth(d.right) + axlabeltxtpad;})
	.style("stroke","black")
	.style("fill","none")
	.attr("marker-end", "url(#triangle-end)")
	.attr("marker-start", "url(#triangle-start)")
	;

	yenter .transition()
	.duration(1500)
	.attr("transform","translate("+ (margin.left/2) + "," + (margin.top)/height/ + ")")
	.style("fill-opacity",1)
	.style("stroke-opacity",1)
	;


	yax.exit()
	.transition()
	.duration(250)
	//.attr("x",-(width-margin.left))
	//.attr("transform","translate("+ (-1margin.left)/width/ + "," + 0(totHeight - margin.bottom / 2) + ")")
	.style("fill-opacity",1e-6)
	.style("stroke-opacity",1e-6)
	.remove()
	;


	}

	</script>
	</body>