D3 Examples - TreeMap trial

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
​
<head>
<title> Dota FTW</title>
</head>
​
<body>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
// Define margins
var margin = {top: 40, right: 20, bottom: 60, left: 90},
    width = 560 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
    
var color = d3.scale.category20();
​
var div = d3.select("body").append("div").style("position","relative");
​
var treemap = d3.layout.treemap()
                .size([width,height])
                .value(function(d)
                {
                    return d.size;
                });
                
            d3.json("dotaData.json", function(data) 
            {
                
                var node = div.datum(data).selectAll(".node")
                            .data(treemap.nodes)
                            .enter()
                            .append("div")
                            .attr("class","node")
                            .style("position","absolute")
                            .style("left", function(d) { return d.x + "px"; })
                            .style("top", function(d) { return d.y + "px"; })
                            .style("width", function(d) { return d.dx - 3 + "px"; })
                            .style("height", function(d) { return d.dy - 3 + "px"; })
                            .style("background-color", function(d)
                            {
                                return color(d.name); 
                            })
                            .on("mouseover",function(d)
                            {
        
                                div.append("text")
                                .attr("id","tip")
                                .attr("x",470)
                                .attr("y",50)
                                .attr("fill","red")
                                .attr("font-size","20px")
                                .text(d.name+", "+d.value);
        
                                d3.select(this) .attr("fill","red");
        
                                })
      
                                .on("mouseout",function(d)
                                {
                                    d3.select("#tip").remove();
                                })
                            
                            
                            .append('div')
                            .text(function(d) { return d.name; })
                            .style("font-size", "15px");
                            
            }); 
​
                
</script>
​
​
</body>
​
​
</html>
​
    