Treemap BVC

D3 Treemap with mouseover events to show details about each website and link to the site. PLEASE NOTE - that this is using dummy data!

forked from tomshanley's block: Treemap Websites 2

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

<title>Websites</title>

<style>

body {
  font-family: "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 10px;
  background-color: black;
}

p, .formHeading, .agency-name  {
	color: white
}

.formHeading {

font-size: 18px;
	
}

form {
  position: absolute;
	color: white
}

#close {
    float:right;
	  color: white;
    display:inline-block;
    padding:2px 5px;
    background: red;
	cursor: pointer;
}

.node-website, .node-agency {
  
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
  cursor: pointer;
    -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

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

#tooltip {
  position: absolute;
  width: 220px;
  height: auto;
  padding: 10px;
  z-index: 1;
  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);

}

#tooltip.hidden {
  display: none;
}

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

</style>

</div>

var buffer = 0;

var cellpadding = 1;

var windowWidth = ((window.innerWidth - buffer)/12) * 10 ;
var windowHeight = window.innerHeight - buffer - 30;

var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = windowWidth - margin.left - margin.right,
    height = windowHeight - margin.top - margin.bottom;

//var color = d3.scale.category20b();
//var color = d3.scale.ordinal().range([ "#efedf5", "#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3", "#54278f", "#3f007d"]);   //colorbrewer purples

var color = d3.scale.ordinal().range(['rgb(229,245,224)',  'rgb(199,233,192)', 'rgb(161,217,155)','rgb(101,189,104)','rgb(65,171,93)','rgb(35,139,69)','rgb(0,109,44)','rgb(0,68,27)']); //colorbrewer Greens
//var highlightColor = "#de77ae";
var highlightColor = "red";

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
   	.padding(cellpadding)
	  .mode("squarify") //default
    .value(function(d) { return 1; })
	  .children( function(d) { return d.values ; } );

var div = d3.select("#viz").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 clickCount = 0;
	
var mouseClick = function(d) {

d3.csv("govtwebsites.csv", function (data) {

var treeData = { "key": "Government Web Domain", "values": d3.nest()

.key(function (d) { return d.Agency; })

.entries(data)
		};

var node = div.datum(treeData).selectAll(".node")
      .data(treemap.nodes)
      .enter().append("div")
      .attr("class", function(d) { return d.children ? "node-agency" : "node-website" ; })
      .call(position)
	    .style("border", "solid 1px black")
		  .on("click", mouseClick);

color.domain(node.map(function(d) { return d.key ;}));
  
node.style("background", function(d) { return d.children ? color(d.key) : color(d.parent.key); });

d3.selectAll(".node-website")
  .append("div")
  .attr("class","agency-name")
  .text(function(d) {
  	if (d.y - cellpadding === d.parent.y && d.x - cellpadding === d.parent.x){
    	  return d.parent.key ;
  	  }
	} )
  .style("z-index", function(d) { 
  	if (d.y - cellpadding === d.parent.y && d.x - cellpadding === d.parent.x){
	      return 99 ;
  	  }
	} );

customeAnimation();
  
  function customeAnimation() {
  
		hideTooltip();
  
    var value = function() { return 1; }

animate(value);
    
    value = function(d) { return d.size; };
    
    animate(value);
  };
  
  function animate(value){
    node
        .data(treemap.value(value).nodes)
        .transition()
        .duration(3500)
        .call(position);
  }
  
///////////////////////////////
  
	d3.selectAll(".formCheckbox").on("change", updateNodeColors);
  
	function updateNodeColors () {
  
		hideTooltip();
		
		var count = 0;
  
		node
			.transition()
			.style("background", function(d) {
		
				var	matchesATopic = false,
				topics = ["Births-deaths-marriages",
							"Citizenship-and-immigration",
							"Community-arts-and-sport",
							"Consumer-rights",
							"Crime-law-and-justice",
							"Driving-and-transport",
							"Education-and-training",
							"Emergencies-and-disasters",
							"Environment-and-climate",
							"Health",
							"History-culture-and-heritage",
							"Housing-and-property",
							"Internet-media-and-communication",
							"Money-benefits-and-tax",
							"Parliament-and-politics",
							"Passports-travel-and-tourism",
							"Work-and-jobs"],
				topicsForm = document.forms.formTopic;
				
				if (d.children) {
				
					console.log("has children " + d.key);
				
				} else {
			
					for (i = 0; i < topics.length; i++) {
				
						//console.log(topics[i]);
				
						if (topicsForm[topics[i]].checked == true) {
						
							//console.log(d[topics[i]]);
						
							if (d[topics[i]] == "X" ) {
							
								matchesATopic = true;
								//console.log(d.key + " " + matchesATopic);
								count++;
								
								break;
							
							};
						};
					} 
				};
		
				if (matchesATopic) { return highlightColor }
				else return d.children ? color(d.key) : color(d.parent.key); 								   							   
			});
			
		d3.select("#numberofsites").text(count);
	};
});

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

function hideTooltip () {
	d3.select("#tooltip").classed("hidden", true);
}

</script>

<div id="tooltip" class="hidden">
<span id='close' onclick='hideTooltip()'>X</span>
 
  <p><strong id="website"></strong></p>
  <p><span id="screenshot"></span></p>
  <p>Owner: <span id="agency"></span></p>
  <p>Pages: <span id="size"></span></p>
</div>

</body>

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

https://code.jquery.com/jquery-1.11.0.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

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