Treemap with WordWrap (D3, SVG)

readme.json

{
  "flare": {
    "analytics is a lot of crunch": {
      "cluster": {
        "AgglomerativeCluster": 3938,
        "CommunityStructure": 3812,
        "HierarchicalCluster": 6714,
        "MergeEdge": 743
      },
      "graph": {
        "BetweennessCentrality": 3534,
        "LinkDistance": 5731,
        "MaxFlowMinCut": 7840,
        "ShortestPaths": 5914,
        "SpanningTree": 3416
      },
      "optimization": {
        "AspectRatioBanker": 7074
      }
    },
    "animate makes things fun": {
      "Easing": 17010,
      "FunctionSequence": 5842,
      "interpolate": {
        "ArrayInterpolator": 1983,
        "ColorInterpolator": 2047,
        "DateInterpolator": 1375,
        "Interpolator": 8746,
        "MatrixInterpolator": 2202,
        "NumberInterpolator": 1382,
        "ObjectInterpolator": 1629,
        "PointInterpolator": 1675,
        "RectangleInterpolator": 2042
      },
      "ISchedulable": 1041,
      "Parallel": 5176,
      "Pause": 449,
      "Scheduler": 5593,
      "Sequence": 5534,
      "Transition": 9201,
      "Transitioner": 19975,
      "TransitionEvent": 1116,
      "Tween": 6006
    },
    "data data everywhere...": {
      "converters": {
        "Converters": 721,
        "DelimitedTextConverter": 4294,
        "GraphMLConverter": 9800,
        "IDataConverter": 1314,
        "JSONConverter": 2220
      },
      "DataField": 1759,
      "DataSchema": 2165,
      "DataSet": 586,
      "DataSource": 3331,
      "DataTable": 772,
      "DataUtil": 3322
    },
    "display something beautiful": {
      "DirtySprite": 8833,
      "LineSprite": 1732,
      "RectSprite": 3623,
      "TextSprite": 10066
    },
    "flex your muscles": {
      "FlareVis": 4116
    },
    "physics is religion": {
      "DragForce": 1082,
      "GravityForce": 1336,
      "IForce": 319,
      "NBodyForce": 10498,
      "Particle": 2822,
      "Simulation": 9983,
      "Spring": 2213,
      "SpringForce": 1681
    },
    "query and you get the answer": {
      "AggregateExpression": 1616,
      "And": 1027,
      "Arithmetic": 3891,
      "Average": 891,
      "BinaryExpression": 2893,
      "Comparison": 5103,
      "CompositeExpression": 3677,
      "Count": 781,
      "DateUtil": 4141,
      "Distinct": 933,
      "Expression": 5130,
      "ExpressionIterator": 3617,
      "Fn": 3240,
      "If": 2732,
      "IsA": 2039,
      "Literal": 1214,
      "Match": 3748,
      "Maximum": 843,
      "methods": {
        "add": 593,
        "and": 330,
        "average": 287,
        "count": 277,
        "distinct": 292,
        "div": 595,
        "eq": 594,
        "fn": 460,
        "gt": 603,
        "gte": 625,
        "iff": 748,
        "isa": 461,
        "lt": 597,
        "lte": 619,
        "max": 283,
        "min": 283,
        "mod": 591,
        "mul": 603,
        "neq": 599,
        "not": 386,
        "or": 323,
        "orderby": 307,
        "range": 772,
        "select": 296,
        "stddev": 363,
        "sub": 600,
        "sum": 280,
        "update": 307,
        "variance": 335,
        "where": 299,
        "xor": 354,
        "_": 264
      },
      "Minimum": 843,
      "Not": 1554,
      "Or": 970,
      "Query": 13896,
      "Range": 1594,
      "StringUtil": 4130,
      "Sum": 791,
      "Variable": 1124,
      "Variance": 1876,
      "Xor": 1101
    },
    "scale is all relative": {
      "IScaleMap": 2105,
      "LinearScale": 1316,
      "LogScale": 3151,
      "OrdinalScale": 3770,
      "QuantileScale": 2435,
      "QuantitativeScale": 4839,
      "RootScale": 1756,
      "Scale": 4268,
      "ScaleType": 1821,
      "TimeScale": 5833
    },
    "util is utilitarian": {
      "Arrays": 8258,
      "Colors": 10001,
      "Dates": 8217,
      "Displays": 12555,
      "Filter": 2324,
      "Geometry": 10993,
      "heap": {
        "FibonacciHeap": 9354,
        "HeapNode": 1233
      },
      "IEvaluable": 335,
      "IPredicate": 383,
      "IValueProxy": 874,
      "math": {
        "DenseMatrix": 3165,
        "IMatrix": 2815,
        "SparseMatrix": 3366
      },
      "Maths": 17705,
      "Orientation": 1486,
      "palette": {
        "ColorPalette": 6367,
        "Palette": 1229,
        "ShapePalette": 2059,
        "SizePalette": 2291
      },
      "Property": 5559,
      "Shapes": 19118,
      "Sort": 6887,
      "Stats": 6557,
      "Strings": 22026
    },
    "vis makes it easy to understand": {
      "axis": {
        "Axes": 1302,
        "Axis": 24593,
        "AxisGridLine": 652,
        "AxisLabel": 636,
        "CartesianAxes": 6703
      },
      "controls": {
        "AnchorControl": 2138,
        "ClickControl": 3824,
        "Control": 1353,
        "ControlList": 4665,
        "DragControl": 2649,
        "ExpandControl": 2832,
        "HoverControl": 4896,
        "IControl": 763,
        "PanZoomControl": 5222,
        "SelectionControl": 7862,
        "TooltipControl": 8435
      },
      "data": {
        "Data": 20544,
        "DataList": 19788,
        "DataSprite": 10349,
        "EdgeSprite": 3301,
        "NodeSprite": 19382,
        "render": {
          "ArrowType": 698,
          "EdgeRenderer": 5569,
          "IRenderer": 353,
          "ShapeRenderer": 2247
        },
        "ScaleBinding": 11275,
        "Tree": 7147,
        "TreeBuilder": 9930
      },
      "events": {
        "DataEvent": 2313,
        "SelectionEvent": 1880,
        "TooltipEvent": 1701,
        "VisualizationEvent": 1117
      },
      "legend": {
        "Legend": 20859,
        "LegendItem": 4614,
        "LegendRange": 10530
      },
      "operator": {
        "distortion": {
          "BifocalDistortion": 4461,
          "Distortion": 6314,
          "FisheyeDistortion": 3444
        },
        "encoder": {
          "ColorEncoder": 3179,
          "Encoder": 4060,
          "PropertyEncoder": 4138,
          "ShapeEncoder": 1690,
          "SizeEncoder": 1830
        },
        "filter": {
          "FisheyeTreeFilter": 5219,
          "GraphDistanceFilter": 3165,
          "VisibilityFilter": 3509
        },
        "IOperator": 1286,
        "label": {
          "Labeler": 9956,
          "RadialLabeler": 3899,
          "StackedAreaLabeler": 3202
        },
        "layout": {
          "AxisLayout": 6725,
          "BundledEdgeRouter": 3727,
          "CircleLayout": 9317,
          "CirclePackingLayout": 12003,
          "DendrogramLayout": 4853,
          "ForceDirectedLayout": 8411,
          "IcicleTreeLayout": 4864,
          "IndentedTreeLayout": 3174,
          "Layout": 7881,
          "NodeLinkTreeLayout": 12870,
          "PieLayout": 2728,
          "RadialTreeLayout": 12348,
          "RandomLayout": 870,
          "StackedAreaLayout": 9121,
          "TreeMapLayout": 9191
        },
        "Operator": 2490,
        "OperatorList": 5248,
        "OperatorSequence": 4190,
        "OperatorSwitch": 2581,
        "SortOperator": 2023
      },
      "Visualization": 16540
    }
  }
}

readme.md

Demonstrates the word wrapping of a treemap implemented in SVG.

index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
    <style type="text/css">

rect {
  fill: none;
  stroke: #fff;
}

text {
  font: 10px sans-serif;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500,
    color = d3.scale.category20c();

function fontSize(d,i) {
var size = d.dx/5;
var words = d.data.key.split(' ');
var word = words[0];
var width = d.dx;
var height = d.dy;
var length = 0;
d3.select(this).style("font-size", size + "px").text(word);
while(((this.getBBox().width >= width) || (this.getBBox().height >= height)) && (size > 12))
 {
  size--;
  d3.select(this).style("font-size", size + "px");
  this.firstChild.data = word;
 }
}

function wordWrap(d, i){
var words = d.data.key.split(' ');
var line = new Array();
var length = 0;
var text = "";
var width = d.dx;
var height = d.dy;
var word;
do {
   word = words.shift();
   line.push(word);
   if (words.length)
     this.firstChild.data = line.join(' ') + " " + words[0]; 
   else
     this.firstChild.data = line.join(' ');
   length = this.getBBox().width;
   if (length < width && words.length) {
     ;
   }
   else {
     text = line.join(' ');
     this.firstChild.data = text;
     if (this.getBBox().width > width) { 
       text = d3.select(this).select(function() {return this.lastChild;}).text();
       text = text + "...";
       d3.select(this).select(function() {return this.lastChild;}).text(text);
       d3.select(this).classed("wordwrapped", true);
       break;
    }
    else
      ;

  if (text != '') {
    d3.select(this).append("svg:tspan")
    .attr("x", 0)
    .attr("dx", "0.15em")
    .attr("dy", "0.9em")
    .text(text);
  }
  else
     ;

  if(this.getBBox().height > height && words.length) {
     text = d3.select(this).select(function() {return this.lastChild;}).text();
     text = text + "...";
     d3.select(this).select(function() {return this.lastChild;}).text(text);
     d3.select(this).classed("wordwrapped", true);

     break;
  }
  else
     ;

  line = new Array();
    }
  } while (words.length);
  this.firstChild.data = '';
} 

var treemap = d3.layout.treemap()
    .size([w + 1, h + 1])
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; })
    .sticky(true);

var svg = d3.select("body").append("svg:svg")
    .style("width", w)
    .style("height", h)
  .append("svg:g")
    .attr("transform", "translate(-.5,-.5)");

d3.json("readme.json", function(json) {
  var cell = svg.data(d3.entries(json)).selectAll("g")
      .data(treemap)
    .enter().append("svg:g").filter(function(d){ return d.depth == 1 ? 1 : 0;})
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  cell.append("svg:rect")
      .attr("width", function(d) { return d.dx; })
      .attr("height", function(d) { return d.dy; })
      .style("fill", function(d) { return d.children ? color(d.data.key) : null; });
  
  cell.append("svg:text")
       .attr("x",0)
       .attr("dx", "0.35em")
       .attr("dy", "0.9em") 
      .each(fontSize)
      .each(wordWrap);
});

    </script>
  </body>
</html>