Zoomable Icicle with Text in D3.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

var w = 960,
    h = 500,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });

d3.json("math_map_simple.json", function(json) {
  //var data = data(partition(d3.entries([json])[0]));
  //console.log(data);
  var cell = vis.selectAll("g")
      .data(partition(d3.entries(json)[0]))
    .enter().append("svg:g")
    	.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
    	.on("click", click);
    	
      //.attr("x", function(d) { return x(d.x); })
      //.attr("y", function(d) { return y(d.y); });
      
   cell.append("svg:rect")
      .attr("width", function(d) { return x(d.dx); })
      .attr("height", function(d) { return y(d.dy); })
      .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); });
      
      
   
   cell.append("svg:text")
   		.attr("y",d.y+20)
   		.attr("x",d.x+15)
   		.text(function(d) { return d.data.key;});

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.layout.js