derPlau · August 29, 2015 13:58
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 	<meta charset="utf-8">  
 <head>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <link rel="stylesheet" href="ss.css">

 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

 </head>

 <body>

 <div class="container">

 <div class = "column two-thirds">

 <svg class="chart">  
 <defs>
 	<filter id="f1" x="0" y="0">
 		<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
 	</filter>
 	<filter id="f3" x="-50%" y="-50%" width="200%" height="200%">
 		<feOffset result="offOut" in="SourceAlpha" dx="4" dy="4" />
 		<feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" />
 		<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
 	</filter>	
 </defs>
 </svg>

 <script src="skillspace.js"></script>

 </div> <!--end .column.two-thirds (viz column)-->
 <div class = "column one-third info">
 <div id = "controls">
 <p>Bubble size indicates: <select id="bubsize" autocomplete = "off">
  <option value="none">Nothing</option>
  <option value="entry">Starting Wages</option>
  <option value="median">Typical Wages</option>
  <option value="openings">Expected Job Openings</option>
  <option value="growth">Expected Job Growth</option>
  <option value="ed">Typical Education Required</option>
  <option value="exp">Typical Experience Required</option>
  <option value="ojt">Typical On-The-Job Training Required</option>
 </select>
 <svg class = "sizelegend"></svg>

 
 <p>Bubble color indicates: <select id="bubcolor" autocomplete="off">
  <option value="entry">Starting Wages</option>
  <option value="median">Typical Wages</option>
  <option value="openings">Expected Job Openings</option>
  <option value="growth">Expected Job Growth</option>
  <option value="ed">Typical Education Required</option>
  <option value="exp">Typical Experience Required</option>
  <option value="ojt">Typical On-The-Job Training Required</option>
  <option value="cluster">Skill Cluster</option>
 </select>

 <svg class = "legend"></svg>
 </div> <!--End #controls-->

 		<div id="slxn-hist">
 		</div>

 <!--<button type="button">Restart</button>-->
 </div> <!--end .column.one-third (info column)-->

  <div id="light" class="white_content" style="display:none">
  	 
  	<div class="ui-widget" id= "occpick">
 		  <label for="seloccs">Enter the name of a job you've had. </label><br>
 		  <input id="seloccs" autocomplete="off" autofocus=true>
 		</div>
 		
 		
 	<div class="bypass">
 		<p>Or <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Just explore!</a></p>
 	</div>

  </div>
  <div id="fade" class="black_overlay" style="display:none"></div>

 </div> <!--End .container-->
 </body>
diff --git a/skillspace.csv b/skillspace.csv
diff --git a/skillspace.js b/skillspace.js
 var totWidth = +d3.select(".column.two-thirds").style("width").substr(0,d3.select(".column.two-thirds").style("width").length-2) - 20,
    totHeight = Math.floor(window.innerHeight-20),
    margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = totWidth - (margin.left + margin.right),
    height = totHeight - (margin.top + margin.bottom),
 	minptsize = 4,
 	maxptsize = 15,
 	occptsize = minptsize + (maxptsize - minptsize)/5,
 	occopac = 0.6
 ;

 /*Stuff (selection values, variable ranges) for bubble filling/size*/
 var filltype = "entry",
 	sizetype = "none",
 	tiles = {},
 	entryrange,
 	medrange,
 	openingsrange,
 	growthrange,
 	rbvals = []
 	;

 	var colorstops = {
 		wages : ['rgb(165,0,38)','rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,139)','rgb(217,239,139)','rgb(166,217,106)','rgb(102,189,99)','rgb(26,152,80)','rgb(0,104,55)'],
 		openings : ['rgb(165,0,38)','rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,144)','rgb(224,243,248)','rgb(171,217,233)','rgb(116,173,209)','rgb(69,117,180)','rgb(49,54,149)'],
 		growth : {
 			neg: ['rgb(227,74,51)','rgb(253,187,132)','rgb(254,232,200)'],
 			pos: ['rgb(241,238,246)','rgb(208,209,230)','rgb(166,189,219)','rgb(116,169,207)','rgb(54,144,192)','rgb(5,112,176)','rgb(3,78,123)']
 		},
 		ed : ["rgb(247,251,255)","rgb(222,235,247)","rgb(198,219,239)","rgb(158,202,225)","rgb(107,174,214)","rgb(66,146,198)","rgb(33,113,181)","rgb(8,69,148)"],
 		ojt : ["rgb(239,243,255)","rgb(198,219,239)","rgb(158,202,225)","rgb(107,174,214)","rgb(49,130,189)","rgb(8,81,156)"],
 		exp : ["rgb(239,243,255)","rgb(189,215,231)","rgb(107,174,214)","rgb(33,113,181)"],
 		cluster : ["#5b6f75", "#ff0329", "#e84aff", "#ad57f0", "#9e7dff", "#6ebaff", "#54dbff", "#1979c1", "#6ee670", "#3bff00", "#43bb00", "#93c000", "#8b7100", "#eb7500", "#b32d4f"]
 	};
 	
 	var xwalks = {
 		ed : [null,"Less than High School","H.S. Diploma or Equivalent","Postsecondary Non-Degree","Some College, No Degree","Associate's Degree","Bachelor's Degree","Master's Degree","Doctorate or Professional Degree"],
 		ojt : ["None","Short-term","Moderate-term","Long-term","Apprenticeship","Internship or Residency"],
 		exp : ["None","Less than 1 Year","1 - 5 Years","More than 5 Years"]
 	};

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


 var salformat = d3.format("$,d");

 var tooltip = d3.tip()
 	.attr("class","tooltip")
 	.offset(function(d) {
 		if (d.y < height / 2) {return [10,0];}
 		else {return [-6,0];}
 	})
 	.html(function(d) {return  "<h3>" + d.soctitle + "</h3>" + statshtml(d);})
 	.direction(function(d) {
 		if (d.y < height / 2) {return 's';}
 		else {return 'n';}
 	})
 ;

 var legtip = d3.tip()
 	.attr("class","legtip")
 	.offset([-6,0])
 ;

 var sizetip = d3.tip()
 	.attr("class","legtip")
 	.offset([-6,0])
 ;

 var svg = d3.select(".chart")
 		.attr("width",totWidth)
 		.attr("height",totHeight)
 ;

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

 var breadcrumbs = chart.append("g")
 	.attr("class","breadcrumbs")
 ;

 var focused = chart.append("g")
 	.attr("class","focused")
 ;

 var data,
 	crumboccs = [],
 	alloccs = []
 ;
 	
 var legwidth;
 var legend;
 var legr;
 var legentries;
 var sizelegend;
 var sizelegr;
 var sizelegentries;

 var force=d3.layout.force()
 		.charge(-175)
 		.chargeDistance(750)
 		.theta(1.5)
 		.gravity(1)
 		.size([width*.75,height])
 		.linkDistance(function(d) {return d.dist;})
 		.alpha(.01),
 	links = [],
 	link,
 	node
 	;
 	
 var focnodes = [],
 	foclinks = [],
 	focsocs = []
 	;

 d3.csv("skillspace.csv",
 	parsedat,
 	function(error, indat) {
 	init (indat);
 	setlegend();
 	setsizelegend();	

 		
 	 d3.select("#bubcolor").on("change", function() {
 		filltype = this.value;
 		chart.selectAll("circle")
 			.style("fill", function(d) {return bubfill(d);})
 		;
 		legendupdate();
 		});

 	 d3.select("#bubsize").on("change", function() {
 		sizetype = this.value;
 		chart.selectAll("circle")
 			.attr("r", function(d) {return bubsize(d);})
 		;
 		sizelegendupdate();
 	  });
  
 	legendupdate();
 		
 }); //end .csv callback

 function init (indat){
 	data=indat;
 			
 	d3.select(".info") .style("height",totHeight + "px");
 	
 	tiles = {};
 	
 	tiles.wages = d3.range(.1,1.1,.1).map(function(p) {return d3.quantile(data.map(function(d) {return d.wages.median;}).concat(data.map(function(d) {return d.wages.entry;})).filter(function(p) {return p != null;}).sort(function(a,b) {return a-b;}),p);});
 	tiles.openings = d3.range(.1,1.1,.1).map(function(p) {return d3.quantile(data.map(function(d) {return d.jobs.openings;}).filter(function(p) {return p;}).sort(function(a,b) {return a-b;}),p);});
 	tiles.growth = {
 	neg : d3.range(1,4).map(function(p) {return p/3;}).map(function(p) {return d3.quantile(data.map(function(d) {return d.jobs.pctchange;}).filter(function(p) {return p<0;}).filter(function(p) {return p != null;}).sort(function(a,b) {return a-b;}),p);}),
 	pos : d3.range(1,8).map(function(p) {return p/7;}).map(function(p) {return d3.quantile(data.map(function(d) {return d.jobs.pctchange;}).filter(function(p) {return p>=0;}).filter(function(p) {return p != null;}).sort(function(a,b) {return a-b;}),p);})
 	};
 	curextent = [d3.extent(data, function(d) {return x(d.pc[0]);}),d3.extent(data, function(d) {return y(d.pc[1]);})];	
 	alloccs = data.map(function(d) {return d.soctitle;});
 	legwidth = +d3.select(".column.one-third").style("width").substr(0,d3.select(".column.one-third").style("width").length-2);
 	legr = d3.min([(legwidth / 20 - 5),15]);
 	legend = d3.select(".legend")
  		.attr("height","40px")
  		.attr("width",legwidth)
  	;
 	sizelegend = d3.select(".sizelegend")
 		.attr("height", (maxptsize * 2 + 6) + "px")
 		.attr("width",legwidth)
 	;
 	$(function() {
 	var occlist = alloccs;
 	$( "#seloccs" ).autocomplete({
 	  source: occlist,
 	  select: function( event, ui ) {
 					var row = data.filter(function(d) {return d.soctitle == ui.item.value;})[0];
 					document.getElementById('light').style.display='none';
 					document.getElementById('fade').style.display='none';
 					focus(row);
 	  },
 	  appendTo: "#light"
 	});
 	});
 	
 // 	x.domain([d3.min(data, function(d) {return d.pc[0];}),d3.max(data, function(d) {return d.pc[0];})]);
 // 	y.domain([d3.min(data, function(d) {return d.pc[1];}),d3.max(data, function(d) {return d.pc[1];})]);
 	
 	x.domain(d3.extent(data.map(function(d) {return d.pc[0];})));
 	y.domain(d3.extent(data.map(function(d) {return d.pc[1];})));

 	data.map(function(d,i) {
 		d.neighbors.map(function(n) {
 			n.source = i;
 			n.target = data.map(function(s) {return s.soc;}).indexOf(n.soc);
 			n.dist = 0;
 			for (pc = 0; pc < 5; ++pc) {
 				n.dist += Math.pow(d.pc[pc] - data[n.target].pc[pc],2);
 			}
 			n.dist = Math.sqrt(n.dist);
 			links.push({source: n.source, target: n.target, dist: n.dist, soc:n.soc, sourcesoc:n.sourcesoc});
 		});
 		d.x = x(d.pc[0]);
 		d.y = y(d.pc[1]);
 		d.fixed = true;
 	});
 	
 	
 	force
 		.nodes(data)
 		.links(links)
 		.alpha(0)
 		.start()
 	;
 	
 	link = breadcrumbs.selectAll(".link")
 			.data(links,function(d) {
 				return d.sourcesoc + "->" + d.soc;
 			})
 		.enter().append("line")
 			.attr("class", "link initial")
 		;

 	node = focused.selectAll(".node")
 			.data(data, function(d) {return d.soc;})
 		.enter().append("circle")
 			.attr("class", "node")
 			.attr("r", 5)
 //			.style("fill", function(d) { return	color(d.group);	})
 			.style("fill", function(d) {return bubfill(d);})
 			.style("stroke", "#999")
 			.style("fill-opacity", .9)
 			.style("stroke-opacity", 1)
 //			.call(force.drag)
 			.call(tooltip)	
 			.on("mouseover",tooltip.show)
 			.on("mouseout",tooltip.hide)
 			.on("mousedown",function(d) {
 				svg.on("mouseout",null);
 				focus(d);
 			})

 		;

 	force.on("tick", function()	{
 		
 		link.attr("x1",	function(d)	{	return d.source.x; })
 				.attr("y1",	function(d)	{	return d.source.y; })
 				.attr("x2",	function(d)	{	return d.target.x; })
 				.attr("y2",	function(d)	{	return d.target.y; });

 		node.attr("cx",	function(d)	{	return d.x;	})
 				.attr("cy",	function(d)	{	return d.y;	});
 	});
 }

 function setlegend() {
 	legtip
 			.html(function(d,i) {
 			if (filltype == "entry" || filltype == "median" || filltype == "openings" || filltype == "growth") {
 					
 				if (filltype == "entry" || filltype == "median") {
 					var vals = [tiles.wages[i-1],tiles.wages[i]];
 					vals = vals.map(function(p) {return (p == null ? null : salformat(Math.round(p)));});
 				}
 				else {
 						if (filltype == "growth") {
 							var vals = tiles.growth.neg.concat(tiles.growth.pos);
 							vals = [vals[i-1],vals[i]];
 							vals = vals.map(function(p) {return (p == null ? null : (Math.round(p) + "%"));});
 						}
 						else {var vals = [tiles[filltype][i-1],tiles[filltype][i]].map(function(p) {return (p == null ? null : (Math.round(p/10)));});}
 				}
 				if (vals[0] == null) {return "< " + vals[1];}
 				else {return vals[0] + " - " + vals[1];}
 			}
 			else {
 				if(filltype == "ed") {return xwalks.ed[i+1];}
 				else {return xwalks[filltype][i];}
 			}
 		})
 	;

 }

 function legendupdate() {
    d3.selectAll(".legentry") .remove();
    
 	legentries = legend .selectAll(".legentry")
 		.data(filltype == "growth" ? colorstops.growth.neg.concat(colorstops.growth.pos) : colorstops[((filltype == "entry" || filltype == "median") ? "wages" : filltype)], function(d,i) {return i;})
 	;
 	legentries .enter() .append("circle")
 	.attr("class","legentry")
 	.attr("cy", "20px")
 	.attr("cx", function(d,i) {return (legr +(2*legr + 10)*i) + "px";})
 	.attr("r", legr + "px")
 	.style("stroke","#888")
 	.style("fill-opacity",occopac)
 	//   	.style("stroke-width","1px")
 	.style("fill",function(d) {
 		return d;
 		})
 	.call(legtip)			
 	.on("mouseover",legtip.show)
 	.on("mouseout",legtip.hide)
 	;
  
  	legentries .exit() .remove();
 }

 function setsizelegend() {
 	sizetip
 			.html(function(d,i) {
 			if (sizetype == "entry" || sizetype == "median" || sizetype == "openings" || sizetype == "growth") {
 					
 				if (sizetype == "entry" || sizetype == "median") {
 					var vals = [tiles.wages[i-1],tiles.wages[i]];
 					vals = vals.map(function(p) {return (p == null ? null : salformat(Math.round(p)));});
 				}
 				else {
 						if (sizetype == "growth") {
 							var vals = tiles.growth.neg.concat(tiles.growth.pos);
 							vals = [vals[i-1],vals[i]];
 							vals = vals.map(function(p) {return (p == null ? null : (Math.round(p) + "%"));});
 						}
 						else {var vals = [tiles[sizetype][i-1],tiles[sizetype][i]].map(function(p) {return (p == null ? null : (Math.round(p/10)));});}
 				}
 				if (vals[0] == null) {return "< " + vals[1];}
 				else {return vals[0] + " - " + vals[1];}
 			}
 			else {
 				if(sizetype == "ed") {return xwalks.ed[i+1];}
 				else {return xwalks[sizetype][i];}
 			}
 		})
 	;

 }

 function sizelegendupdate() {
     d3.selectAll(".sizelegentry") .remove();
    
    if (sizetype != "none") {
 		sizelegentries = sizelegend .selectAll(".sizelegentry")
 			.data((sizetype == "ed" || sizetype == "exp" || sizetype == "ojt") ? d3.range(colorstops[sizetype].length) : d3.range(10));
 		sizelegentries .enter() .append("circle")
 		.attr("class","sizelegentry")
 		.attr("cy", ((maxptsize + 5)) + "px")
 		.style("fill-opacity",occopac)
 		.attr("cx", function(d,i) {
 			var xpos = minptsize;
 			for (var xi = 0; xi <= i; ++xi) {
 				xpos += (maxptsize - minptsize) * (xi / ((sizetype == "ed" || sizetype == "exp" || sizetype == "ojt") ? (colorstops[sizetype].length - 1) : 9)) * 2 + 20;
 			}
 			return xpos + "px";
 		})
 		.attr("r", function(d,i) {return minptsize + (maxptsize - minptsize) * (i / ((sizetype == "ed" || sizetype == "exp" || sizetype == "ojt") ? (colorstops[sizetype].length - 1) : 9));})
 		.style("stroke","#888")
 		//   	.style("stroke-width","1px")
 		.style("fill","#ddd")
 		.call(sizetip)			
 		.on("mouseover",sizetip.show)
 		.on("mouseout",sizetip.hide)
 		;
 	  
 		sizelegentries .exit() .remove();
 	}

 }



 function focus(row){
 	tooltip.hide();
 	d3.select(".tooltip") .attr("class","tooltip"); //workaround d3-tip.js bug where direction class (n,s, etc) isn't cleared on tooltip.hide
 	var curfocgroup;
 	
 	if (focsocs.some(function(c) {return row.soc == c.soc;})) {
 		curfocgroup = focsocs.map(function(s) {return s.soc;}).indexOf(row.soc);
 		focsocs.splice(curfocgroup+1);
 		//Prune & re-branch @ end
 	}
 	else {
 		curfocgroup = focsocs.length;
 		focsocs.push({soc:row.soc,i:data.map(function(d) {return d.soc;}).indexOf(row.soc),focgroup:curfocgroup});
 	}
 	
 	foclinks = [];
 	
 	focnodes = focsocs;
 	focnodes = focnodes.map(function(s) {
 		var tmpnode = /*jQuery.extend({},data[s.i])*/data[s.i];
 		tmpnode.focgroup = s.focgroup;
 		tmpnode.classes = ["breadcrumb"];
 		if (s.soc == row.soc) tmpnode.classes.push("selection")
 		return tmpnode;
 	});
 	crumboccs = focnodes;
 //		focnodes[focnodes.length-1].classes = focnodes[focnodes.length-1].classes.concat("curslxn");
 	
 	for (linkit = 1; linkit < focnodes.length; ++linkit) {
 //		var tmplink = jQuery.extend({},focnodes[linkit-1].neighbors.filter(function(f) {return f.soc == focnodes[linkit].soc;})[0]);
 		var tmplink = focnodes[linkit-1].neighbors.filter(function(f) {return f.soc == focnodes[linkit].soc;})[0];
 		tmplink.classes = ["breadcrumb"];
 		foclinks.push(tmplink);
 	}
 	
 	var thiscat = row.neighbors.map(function(n) {
 		return focnodes.map(function(f) {return f.soc;}).indexOf(n.soc) < 0 ?
 //			jQuery.extend({},data.filter(function(d) {return d.soc == n.soc;})[0]) :
 			data.filter(function(d) {return d.soc == n.soc;})[0] :
 			null;
 	}).filter(function(c) {return c;})
 	thiscat.forEach(function(i) {	
 //		var tmpcat = jQuery.extend({},i);
 		var tmpcat = i;
 		tmpcat.focgroup = curfocgroup;
 		tmpcat.classes =["neighbor"];
 	})
 	focnodes = focnodes.concat(thiscat);
 	
 	row.neighbors.map(function(n) {
 //		var tmplink = jQuery.extend({},n);
 		var tmplink = n;
 		tmplink.classes = ["spoke"];
 		foclinks.push(tmplink);
 	});
 	
 //	focnodes.forEach(function(f) {f.fixed = false;});
 	focnodes.forEach(function(f,i) {
 		if (i < focsocs.length-2 || i >= focsocs.length) {
 			f.fixed = false;
 		}
 		else {
 			f.fixed = false;
 		}
 	});
 	
 	
 	
 	foclinks.forEach(function(n) {
 		n.source = focnodes.map(function(s) {return s.soc;}).indexOf(n.sourcesoc); 
 		n.target = focnodes.map(function(s) {return s.soc;}).indexOf(n.soc);
 	});
 	
 	force
 		.charge(-200)
 		.chargeDistance(500)
 		.theta(1.5)
 		.gravity(0)
 		.size([width*.75,height])
 		.linkDistance(function(d) {return d.dist;})
 		.alpha(.01)		
 		.nodes(focnodes)
 		.links(foclinks)
 		.start()
 	;
 	
 	link = breadcrumbs.selectAll(".link")
 			.data(foclinks,function(d) {return d.sourcesoc + "->" + d.soc;});
 			
 	link .exit().remove();
 	
 	link	.enter().append("line");
 	link	.attr("class", function(d) {return d.classes.join(" ") + " link";})
 		;

 	node = focused.selectAll(".node")
 			.data(focnodes, function(d) {return d.soc;});
 	
 	node .exit().remove();
 	
 	node .enter().append("circle")			
 //			.call(tooltip)	
 			.on("mouseover",tooltip.show)
 			.on("mouseout",tooltip.hide)
 			.on("mousedown",function(d) {
 				svg.on("mouseout",null);
 				focus(d);
 			})
 		;
 	
 	node	.attr("class", function(d) {return d.classes.join(" ") + " node "+ " o" + d.soc.replace("-","");})
 			.attr("r", function(d) {return bubsize(d);})
 //			.style("fill", function(d) { return	color(d.group);	})
 			.style("fill", function(d) {return bubfill(d);})
 			.style("stroke", "#999")
 			.style("fill-opacity", .9)
 			.style("stroke-opacity", 1)
 			.call(force.drag)
 	;
 			
 	force.on("tick", function(e)	{
 		var k = 0.2 * e.alpha;
 		
 		focnodes.map(function(n,ni) {
 			if (focsocs.map(function(s) {return s.soc;}).some(function(f) {return f == n.soc;})) {
 				var fermata = 20;
 				n.y += ((fermata * Math.sqrt(ni)*Math.cos(ni) + height/2) - n.y) * k;
 				n.x += ((fermata * Math.sqrt(ni)*Math.sin(ni) + width/2) - n.x) * k;
 			}
 		});
 		
 		link.attr("x1",	function(d)	{	return d.source.x; })
 				.attr("y1",	function(d)	{	return d.source.y; })
 				.attr("x2",	function(d)	{	return d.target.x; })
 				.attr("y2",	function(d)	{	return d.target.y; });

 		node.attr("cx",	function(d)	{	return d.x;	})
 				.attr("cy",	function(d)	{	return d.y;	});
 	});

 	var stophere = 1;
 	
 	steptext(crumboccs);
 }



 function steptext(dat) {
 		var shheight = totHeight - d3.select("#controls")[0][0].offsetHeight - 50;
 		var ptdiv = d3.select("#slxn-hist");
 		ptdiv .style("height",shheight + "px");
 		var pathtext = ptdiv.selectAll(".pathtext")
 				.data(dat, function(d) {return d.soc;})
 		;
 		
 		pathtext .enter() .insert("div",":first-child")
 				.attr("class",function(d) {return "pathtext " + "o" + d.soc.replace("-","");})
 				.style("opacity","10e-6")
 				.style("position","relative")
 				.style("left","500px")
 				.on("mouseover", function(d) {
 					d3.select(this) .style("background-color","#ccc");
 					d3.selectAll("circle.o" + d.soc.replace("-","")) 
 						.style("filter","url(#f3)")
 						.attr("r",function() {
 							return this.r.baseVal.value +5;
 						})
 //						.attr("r",function(p) {return 50;})
 				;})
 				.on("mouseout", function(d) {
 					d3.select(this) .style("background-color","#fff");
 					d3.selectAll("circle.o" + d.soc.replace("-","")) 
 						.style("filter",null)
 						.attr("r",function() {return this.r.baseVal.value - 5;})
 //						.attr("r",function(p) {return 50;})
 				;})
 		;
 		
 		pathtext .html(function(d,i) {return ptxt(d,i,dat.length);});

 		
 		pathtext .transition() .duration(500)
 //			.style("position",null)
 			.style("opacity",1)
 			.style("left",0)
 		;
 		
 		pathtext .exit() .remove();

 }

 function ptxt(d,i,datlength) {
 	var h1line = "<h3>" + (i == 0 ? "Starting Point" : i < (datlength - 1) ? ("Step " + (i)) : "Current Selection") + ": " + d.soctitle + "</h3>";
 	var stats = statshtml(d);
 	var needed = "<p><em>Additional training required: </em> Server-side data required.</p>";
 	return (h1line + stats + needed);
 }




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

 function bubsize(d) {
 	if (sizetype == "none") {return occptsize;};
 	if (sizetype == "entry" || sizetype == "median") {
 //		
 		return tilesize(d.wages[sizetype],tiles.wages,colorstops.wages);
 	}
 	else if (sizetype == "openings") {
 		return tilesize(d.jobs[sizetype],tiles[sizetype],colorstops[sizetype]);
 	}
 	else if (sizetype == "growth") {
 		if (d.jobs.pctchange < 0) {
 			return tilesize(d.jobs.pctchange,tiles.growth.neg,colorstops.growth.neg);
 		}
 		else {
 			return tilesize(d.jobs.pctchange,tiles.growth.pos,colorstops.growth.pos);
 		}
 //		return multifill(d.jobs.pctchange,colorstops.growth,[tiles.growth[0],0,tiles.growth[tiles.growth.length-2],tiles.growth[tiles.growth.length-1]]);
 	}
 	
 	else if (sizetype == "ed" || sizetype == "exp" || sizetype == "ojt" || sizetype == "cluster") {
 		return qsize(((sizetype == "ed" || sizetype == "cluster") ? d[sizetype] - 1 : d[sizetype]),colorstops[sizetype]);
 	}
 }

 function tilesize(d,tiles) { 
 	if (d == null) {return occptsize;}

 	else {
 			var topindex = tiles.indexOf(tiles.filter(function(p) {return p >= d;})[0]);
 			if (topindex < 0) {
 				stophere = 1;
 			}

 			return (topindex / tiles.length) * (maxptsize - minptsize) + minptsize;
 	}		
 }

 function qsize(d,colvals) { 
 	stophere = 1;
 	if (d == null || d < 0) {
 		return occptsize;
 	}
 	else {
 			return (d / colvals.length) * (maxptsize - minptsize) + minptsize;
 	}		
 }

 function bubfill(d) {
 	if (filltype == "entry" || filltype == "median") {
 //		
 		return tilefill(d.wages[filltype],tiles.wages,colorstops.wages);
 	}
 	else if (filltype == "openings") {
 		return tilefill(d.jobs[filltype],tiles[filltype],colorstops[filltype]);
 	}
 	else if (filltype == "growth") {
 		if (d.jobs.pctchange < 0) {
 			return tilefill(d.jobs.pctchange,tiles.growth.neg,colorstops.growth.neg);
 		}
 		else {
 			return tilefill(d.jobs.pctchange,tiles.growth.pos,colorstops.growth.pos);
 		}
 //		return multifill(d.jobs.pctchange,colorstops.growth,[tiles.growth[0],0,tiles.growth[tiles.growth.length-2],tiles.growth[tiles.growth.length-1]]);
 	}
 	
 	else if (filltype == "ed" || filltype == "exp" || filltype == "ojt" || filltype == "cluster") {
 		return qfill(((filltype == "ed" || filltype == "cluster") ? d[filltype] - 1 : d[filltype]),colorstops[filltype]);
 	}
 }

 function tilefill(d,tiles,colors) { 
 	if (d == null) {return "#ccc";}

 	else {
 			var topindex = tiles.indexOf(tiles.filter(function(p) {return p >= d;})[0]);
 			if (topindex < 0) {
 				stophere = 1;
 			}

 			return colors[topindex];
 	}		
 }

 function qfill(d,colvals) { 
 	//colpoints is a 3 x N matrix with N values defining ranges for r, g, b: [[r0, r1,...ri...rN],[g0, g1,...gi...gN],[b0, b1,...bi...bN]]
 	//xpoints are the color values to hit at each of colpoints above (i.e.,colpoints[j].length and xpoints.length should be equal.)
 	stophere = 1;
 	if (d == null || d < 0) {
 		return "#ccc";
 	}
 	else {
 			return colvals[d];
 	}		
 }

 function parsedat(d) {
 	//Remember: PC's and associated loadings will be zero-indexed!
 	//Loadings will be in reverse order of variance explained (5 -> 4 -> 3) cuz that's how we want to plot 'em!
 	var row = {};
 	var rotobj = {};
 	
 	row.soc = d.soc;
 	row.pc=[+d.PC1, +d.PC2, +d.PC3, +d.PC4, +d.PC5];
 	row.rotpcs = [];
 	
 	for (i = 1; i <= 5; ++i) {
 		rotobj = {};
 		rotobj.mean = +d["o" + i + "mean"];
 		rotobj.std = +d["o" + i + "std"];
 		rotobj.loadings = [];
 		for (j = 5; j >= 3; --j) {
 			rotobj.loadings.push(+d["o" + i + "pc" + j]);
 		}
 		row.rotpcs.push(rotobj);
 	}
 	
 	row.soctitle = d.soctitle;
 	row.cluster = +d.cluster;
 	
 	row.neighbors = [];
 	for (i = 1; i <= 10; ++i) {
 			row.neighbors.push({sourcesoc:d.soc,soc:d["neighbor" + i]});
 	}
 	
 	row.jobs = +d.totopen == 0 ? {pctchange: null, openings: null} : {pctchange: +d.pctchange, openings: +d.totopen};
 	row.wages = {
 		entry: (+d.entrywage == 0 ? null : +d.entrywage), 
 		median: (+d.medwage == 0 ? null : +d.medwage)
 	};
 	row.ed = +d.ed == -99 ? null : +d.ed;
 	row.exp = +d.exp == -99 ? null : +d.exp;
 	row.ojt = +d.ojt == -99 ? null : +d.ojt;
 	
 	row.classes = [];
 	
 	return row;
 	
 }

 function statshtml (d) {
 	var htmllines = []
 	htmllines.push("<p><em>Starting wage: </em> " + (d.wages.entry == null ? "Unavailable" : (salformat(d.wages.entry) + "</p>")));
 	htmllines.push("<p><em>Typical wage: </em>" +  (d.wages.median == null ? "Unavailable" : (salformat(d.wages.median) + "</p>")));
 	htmllines.push("<p><em>Expected openings per year: </em>" +  (d.jobs.openings == null ? "Unavailable" : (Math.round(d.jobs.openings/10) + "</p>")));
 	htmllines.push("<p><em>Expected jobs growth over 10 years: </em>" +  (d.jobs.pctchange == null ? "Unavailable" : (d.jobs.pctchange + "%</p>")));
 	htmllines.push("<p><em>Typical Education for Entry: </em>" +  (d.ed == null ? "Unavailable" : (xwalks.ed[d.ed] + "</p>")));
 	htmllines.push("<p><em>Related-Occupation Work Experience: </em>" +  (d.exp == null ? "Unavailable" : (xwalks.exp[d.exp] + "</p>")));
 	htmllines.push("<p><em>Post-hire Training Needed for Competency: </em>" +  (d.ojt == null ? "Unavailable" : (xwalks.ojt[d.ojt] + "</p>")));
 	return htmllines.join(" ");
 }

diff --git a/ss.css b/ss.css
 *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

 body {
 	font-size: 14px;
 	font-family: sans-serif;
 }

 .container {
  margin: 0 auto;
  max-width: 2000px;
  width: 95%;
 }

 .column {
  float: left;
  margin-left: 1%;
 }
 
 .column:first-child {
  margin-left: 0;
 }

 .column.full {
  width: 100%;
 }
  
 .column.two-thirds {
  width: 65%;
 }
  
 .column.half {
  width: 47.5%;
 }
 
 .column.one-third {
  width: 30%;
 }


 
 .tooltip, .legtip {
  font-weight: bold;
  padding: 2px;
  background: rgba(0, 0, 0, 0.8);
  font: 12px sans-serif;
  line-height: 14px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
 }

 /* Creates a small triangle extender for the tooltip */
 .tooltip.n:after, .legtip:after {
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
 }
 .tooltip.s:before {
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25B2";
  position: absolute;
  text-align: center;
 }

 /* Style northward tooltips differently */
 .tooltip.n:after, .legtip.n:after {
  margin: -2px 0 0 0;
  top: 100%;
  left: 0;
 } 

 .tooltip.s:before {
  margin: -2px 0 0 0;
  bottom: 100%;
  left: 0;
 } 

 .tooltip p , .pathtext p{
 	font-size: 10px;
 	padding:0;
 	margin:5px;
 	line-height: 1em;
 }

 .tooltip em, .pathtext em {
 	color: rgb(0,200,200);
 }

 .tooltip h3, .pathtext h3 {
 	margin:0;
 	margin-top:5px;
 	padding:0;
 	line-height: 1em;
 }

 .pathtext  {
 	padding: 5px;
 	padding-bottom:10px
 	margin:0
 }

 .ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 12px;
    text-align: center;
 }

 .ui-widget label {
 	margin-top: 2%;
 	display: block;
 	text-align: center;
 	font-weight: bold;
 	font-size: larger;
 }

 .ui-widget input {

 	width: 90%;

 }

 .ui-autocomplete {
 	text-align: left;
 }

 div .bypass {
 	margin-top: 2%;
 	display: block;
 	text-align: center;
 }
 div .bypass p,a{
 	font-weight: bold;
 	font-size: larger;
 }


 .black_overlay{
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #444;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
 }
 
 /*
 .white_content {
    display: block;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    padding: 16px;
 */
  /*  border: 16px solid orange;*/
 /*
    background-color: #fff;
    overflow: auto;
 }
 */

 .white_content {
    display: block;
    position: absolute;
 	width: 50%;
 	height: 25%;
 	top: 25%;
 	left: 25%;
 	border: 2px solid black;
 	background-color: #fff;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=1);
    z-index:1002;
    padding: 5px;
  font: 14px sans-serif;
 		
 }
 .info {
 	overflow: hidden;
 }

 #slxn-hist {
 	border: 1px black;
 	padding : 2%;
 	display: block;
  font: 14px sans-serif;
  height: 100%;
  overflow:auto;
 }


 #slxn-hist p {
 	padding-left: 5%;
 	padding-right: 5%;

 }

 .one-third select {
 	width: 100%;
 }


 line.breadcrumb {
 			stroke: #000;
 			stroke-width: 5;
 			stroke-dasharray: .5,8;
 			stroke-opacity: .5;
 			stroke-linecap: round;

 }

 line.spoke {
 	stroke: #fb8;

 }

 line.initial {
 	stroke: #ccc;
 	stroke-opacity: .2;

 }
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="ss.css">

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

	</head>

	<body>

	<div class="container">

	<div class = "column two-thirds">

	<svg class="chart">
	<defs>
	<filter id="f1" x="0" y="0">
	<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
	</filter>
	<filter id="f3" x="-50%" y="-50%" width="200%" height="200%">
	<feOffset result="offOut" in="SourceAlpha" dx="4" dy="4" />
	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" />
	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	</filter>
	</defs>
	</svg>

	<script src="skillspace.js"></script>

	</div> <!--end .column.two-thirds (viz column)-->
	<div class = "column one-third info">
	<div id = "controls">
	<p>Bubble size indicates: <select id="bubsize" autocomplete = "off">
	<option value="none">Nothing</option>
	<option value="entry">Starting Wages</option>
	<option value="median">Typical Wages</option>
	<option value="openings">Expected Job Openings</option>
	<option value="growth">Expected Job Growth</option>
	<option value="ed">Typical Education Required</option>
	<option value="exp">Typical Experience Required</option>
	<option value="ojt">Typical On-The-Job Training Required</option>
	</select>
	<svg class = "sizelegend"></svg>


	<p>Bubble color indicates: <select id="bubcolor" autocomplete="off">
	<option value="entry">Starting Wages</option>
	<option value="median">Typical Wages</option>
	<option value="openings">Expected Job Openings</option>
	<option value="growth">Expected Job Growth</option>
	<option value="ed">Typical Education Required</option>
	<option value="exp">Typical Experience Required</option>
	<option value="ojt">Typical On-The-Job Training Required</option>
	<option value="cluster">Skill Cluster</option>
	</select>

	<svg class = "legend"></svg>
	</div> <!--End #controls-->

	<div id="slxn-hist">
	</div>

	<!--<button type="button">Restart</button>-->
	</div> <!--end .column.one-third (info column)-->

	<div id="light" class="white_content" style="display:none">

	<div class="ui-widget" id= "occpick">
	<label for="seloccs">Enter the name of a job you've had. </label><br>
	<input id="seloccs" autocomplete="off" autofocus=true>
	</div>


	<div class="bypass">
	<p>Or <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Just explore!</a></p>
	</div>

	</div>
	<div id="fade" class="black_overlay" style="display:none"></div>

	</div> <!--End .container-->
	</body>
	, :before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

	body {
	font-size: 14px;
	font-family: sans-serif;
	}

	.container {
	margin: 0 auto;
	max-width: 2000px;
	width: 95%;
	}

	.column {
	float: left;
	margin-left: 1%;
	}

	.column:first-child {
	margin-left: 0;
	}

	.column.full {
	width: 100%;
	}

	.column.two-thirds {
	width: 65%;
	}

	.column.half {
	width: 47.5%;
	}

	.column.one-third {
	width: 30%;
	}



	.tooltip, .legtip {
	font-weight: bold;
	padding: 2px;
	background: rgba(0, 0, 0, 0.8);
	font: 12px sans-serif;
	line-height: 14px;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	}

	/* Creates a small triangle extender for the tooltip */
	.tooltip.n:after, .legtip:after {
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}
	.tooltip.s:before {
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25B2";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.tooltip.n:after, .legtip.n:after {
	margin: -2px 0 0 0;
	top: 100%;
	left: 0;
	}

	.tooltip.s:before {
	margin: -2px 0 0 0;
	bottom: 100%;
	left: 0;
	}

	.tooltip p , .pathtext p{
	font-size: 10px;
	padding:0;
	margin:5px;
	line-height: 1em;
	}

	.tooltip em, .pathtext em {
	color: rgb(0,200,200);
	}

	.tooltip h3, .pathtext h3 {
	margin:0;
	margin-top:5px;
	padding:0;
	line-height: 1em;
	}

	.pathtext {
	padding: 5px;
	padding-bottom:10px
	margin:0
	}

	.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	text-align: center;
	}

	.ui-widget label {
	margin-top: 2%;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: larger;
	}

	.ui-widget input {

	width: 90%;

	}

	.ui-autocomplete {
	text-align: left;
	}

	div .bypass {
	margin-top: 2%;
	display: block;
	text-align: center;
	}
	div .bypass p,a{
	font-weight: bold;
	font-size: larger;
	}


	.black_overlay{
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #444;
	z-index:1001;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
	}

	/*
	.white_content {
	display: block;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	padding: 16px;
	*/
	/* border: 16px solid orange;*/
	/*
	background-color: #fff;
	overflow: auto;
	}
	*/

	.white_content {
	display: block;
	position: absolute;
	width: 50%;
	height: 25%;
	top: 25%;
	left: 25%;
	border: 2px solid black;
	background-color: #fff;
	-moz-opacity: 1;
	opacity: 1;
	filter: alpha(opacity=1);
	z-index:1002;
	padding: 5px;
	font: 14px sans-serif;

	}
	.info {
	overflow: hidden;
	}

	#slxn-hist {
	border: 1px black;
	padding : 2%;
	display: block;
	font: 14px sans-serif;
	height: 100%;
	overflow:auto;
	}


	#slxn-hist p {
	padding-left: 5%;
	padding-right: 5%;

	}

	.one-third select {
	width: 100%;
	}


	line.breadcrumb {
	stroke: #000;
	stroke-width: 5;
	stroke-dasharray: .5,8;
	stroke-opacity: .5;
	stroke-linecap: round;

	}

	line.spoke {
	stroke: #fb8;

	}

	line.initial {
	stroke: #ccc;
	stroke-opacity: .2;

	}