D3 Examples - Treemap websites

xxxxxxxxxx
 
•<!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>
​
​
<!--<form id="showhidetopic" name="formTopic">
<select multiple class = "formMultiple"  name="SelBranch">
  <option value="health">Health</option>
  <option value="education">Education</option>
  <option value="elections">Elections</option>
  <option value="citizenship">Citizenship</option>
</select>
</form>-->
​
<script src="d3.min.js"></script>
​
<script>
​
​
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) {
​
  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", function(d) { return d.children ? "node-agency" : "node-website" ; })
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : color(d.parent.name); })
      .style("border", "solid 1px white")
      /*.style("background", function(d) {
            var filename = "";
            filename = "url(" + "images/" + d.image + ")" ;
            console.log(filename);
            return filename ; })
        .style("background-size", "Cover")*/
      //.text(function(d) { return d.children ? null : d.name; })
        .on("mousemove", mousemove)                  
        .on("mouseout", mouseout);
      
 
    
​
  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); 
                                                                           
        });
  
    };
    
  
  
});
​
///////////////////////////////
​
function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
​
​
​
​
</script>
​
<div id="tooltip" class="hidden">
  <p><strong id="agency"></strong></p>
  <p><span id="website"></span></p>
  <p><span id="screenshot"></span></p>
  <p><span id="size"></span></p>
</div>
​
</body>
​
​
    