Treemap websites

Treemap with ability to highlight nodes that meet a criteria (OR statement)

<!DOCTYPE html>
<meta charset="utf-8">

<title>Websites Treemap</title>

<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

form {
  position: absolute;

}

.node-website, .node-agency {
  
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;

}

.node-agency {
	pointer-events: none;
}

#tooltip {
  position: absolute;
  width: 220px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 20px;
}

}

</style>

<body>

<form>
  <label><input type="radio" class="boxsize" name="mode" value="size" checked> Size</label>
  <label><input type="radio" class="boxsize" name="mode" value="count"> Count</label>
</form>
<br>

<form id="showhidetopics" name="formTopic">
	<label><input class = "formCheckbox" type="checkbox" name="Health"> Health</label>
	<label><input class = "formCheckbox" type="checkbox" name="Education"> Education</label>
</form>

var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 1200 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.size; });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
	
var mousemove = function(d) {
  
  //console.log("event x " + d3.event.pageX);
  //console.log("event y " + d3.event.pageY);
  
  var xPosition = d3.event.pageX;
  var yPosition = d3.event.pageY;
  
  //console.log(xPosition);
  //console.log(yPosition);

d3.select("#tooltip")
    .style("left", xPosition + "px")
    .style("top", yPosition + "px");
  d3.select("#tooltip #agency")
    .text(d.name);
  d3.select("#tooltip").classed("hidden", false);
  
  d3.select(this)
	.style("box-shadow", "inset 0 0 10px white");
  
};

///////////////////////////////

var mouseout = function() {
  d3.select("#tooltip").classed("hidden", true);
  d3.select(this).style("box-shadow", "none" );
};

///////////////////////////////

d3.json("websites.json", function(error, root) {

d3.selectAll(".boxsize").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };

node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
  
  
  ///////////////////////////////
  
	d3.selectAll(".formCheckbox").on("change", updateNodeColors);
  
	function updateNodeColors () {
  
		node
			.transition()
			.style("background", function(d) {
		
			var	matchesATopic = false,
			topics = ["Education", "Health"],
			topicsForm = document.forms.formTopic;
			
			if (d.children) {
			
				console.log("has children " + d.name);
			
			} else {
		
			for (i = 0; i < topics.length; i++) {
		
				console.log(topics[i]);
		
				if (topicsForm[topics[i]].checked == true) {
				
					//var val = d[topics[i]
					
					console.log(d[topics[i]]);
				
					if (d[topics[i]] == "y" ) {
					
						matchesATopic = true;
						console.log(d.name + " " + matchesATopic);
						break;
					
					};
					
				};
		
			} };
		
			if (matchesATopic) { return "red" }
			else return d.children ? color(d.name) : color(d.parent.name); 
											   							   
		});
  
	};
	
  
  
});

///////////////////////////////

</script>

</body>