D3 Examples - Treemap BVC

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!
xxxxxxxxxx
 
•<!DOCTYPE html>
<meta charset="utf-8">
​
<title>Websites</title>
​
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
​
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
​
<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>
​
<body>
  <div class="row">
    <div class="col-md-4">
      <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Opciones<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a onclick="setModel('monto');" >Monto</a></li>
          <li><a onclick="setModel('precierrre');">Precio cierre</a></li>
          <li><a onclick="setModel('colcap');">Colcap</a></li>
        </ul>
      </div>
      <div class="col-md-12" id="viz" ></div> 
    </div>
  </div>  
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
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) {
​
    var xPosition = d3.event.pageX;
    var yPosition = d3.event.pageY;
    
    // stop tooltip going off the right or bottom side of screen
    if (xPosition > (width/2)) {xPosition = xPosition - 242; }
    else xPosition = xPosition + 25; 
    if (yPosition > (height/2)) {yPosition = yPosition - 200; };
    
    clickCount++;
    d3.selectAll(".node-website").style("box-shadow", "none" );
    d3.select(this)
        .style("box-shadow", "inset 0 0 10px white");       
                    
    d3.select("#tooltip")
        .style("left", xPosition + "px")
        .style("top", yPosition + "px")
        .style("z-index", 100);
    d3.select("#tooltip #website")
        .html('<a href="https://'+ d.NEMO +'" target="_blank">' + d.NEMO + '</a>');
    d3.select("#tooltip #agency")
        .text(d.MONTO);
    d3.select("#tooltip #size")
        .text("$"+numeral(d.PRECIOCIERRE).format('0,0'));
    d3.select("#tooltip #fecha")
    .text(d.FECHA);
  
  
  
    d3.select("#tooltip").classed("hidden", false);
    
    if (clickCount === 1) {
        singleClickTimer = setTimeout(function() {
            clickCount = 0;
        }, 250); }      
    else if (clickCount === 2) {
        clearTimeout(singleClickTimer);
        clickCount = 0;
        hideTooltip();
        d3.selectAll(".node-website").style("box-shadow", "none" );
    }
  
};
//  Se carga csv
d3.csv("acciones.csv", function (data) {
    var treeData = { "key": "Precio de acciones", "values": d3.nest()
​
        .key(function (d) { return d.PRECIOCIERRE; })
        .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 ;}));
  
 // Se da color no se tdavia como
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.PRECIOCIERRE; };
    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 = [
                  "PRECIOCIERRE"            
                 ],
                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);
}
​
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"; });
}
  
// ----------- Funciones propias afp
  
function setModel(tag){   
  if(tag == "monto"){
    alert("Proximamante: "+tag);
  }else if(tag == "precierrre"){
    alert("Proximamante: "+tag);
  }else if(tag == "colcap"){
    alert("Proximamante: "+tag);
  }else{
    console.log("Not find "+ tag);
  }
}
  
​
​
</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>Monto acciones:  <span id="agency"></span></p>
  <p>Precio cierre: <span id="size"></span></p>
  <p>Fecha: <span id="fecha"></span></p>
</div>
</body>
​
​
    