simple treema

_.md

[ Launch Inlet ]
Gist #4127332 [ Launch Inlet ]
Gist #2958196 No Previous Gist

config.json

{"description":"simple treema","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5001752848378613,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false}}

inlet.js

var data =[{"name": "dataset", "children": 
           [{"name" : "apples", "size": 50},
           {"name" : "apples", "size": 50},
           {"name" : "apples", "size": 50},
           {"name" : "apples", "size": 50}]
           }];



var width=300, height=300;


var treemap = d3.layout.treemap()
        .children(function(d) { return d.children; })
        .size([width,height])
        .value(function(d) { return d.size; }) ;
               
    var svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height);
 

    svg
      .data(data)
    .selectAll("rect")
        .data(function(d){return treemap.nodes(d);})
        .enter()
        .append("rect")
        .attr("fill", "red")
        .attr("stroke", "black")
        .call(cell)
      .text(function(d) { return d.name; });

 
function cell(){
    this
        .attr("x",function(d){return d.x + "px";})
        .attr("y",function(d){return d.y + "px";})
        .attr("width",function(d){return d.dx - 1 + "px";})
        .attr("height",function(d){return d.dy - 1 + "px";});
}