var margin = {top: 10, right: 200, bottom: 10, left: 40},
    width  = (getParam("width") || 1400) - margin.left - margin.right,
    height = (getParam("height") || 800) - margin.top - margin.bottom;
    offset_right = 300;

var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom + width/10);

var base = svg.append("g")
              .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

var tree = d3.layout.tree()
             .separation(function(a, b) { return (a.fname == b.fname) ? 1 : 0.8 })
             .children(function(a){
               var result_before_limit = a.children.filter(function(e){
                 var ex_pattern = getParam("exclude");
                 var in_pattern = getParam("include");

                 function match(pattern){
                   return (new RegExp(pattern, 'i')).test(e.fname);
                 }

                 return (!in_pattern || match(in_pattern)) && (!ex_pattern || !match(ex_pattern));
               })

               var remainders_num = _.max([result_before_limit.length - getParam("limit"), 0]);
               var remainders = (0 < remainders_num) ? [{
                 "name": "remainders", "label": ("rem:" + remainders_num), "children": []
               }] : [];

               return result_before_limit.slice(0, getParam("limit") || Infinity).concat(remainders);
             })
             .size([height, width + height/10 - offset_right]);

var diagonal = d3.svg.diagonal()
                     .projection(function(d) { return [d.y, d.x + d.y / 10]; });

var color = d3.scale.category20();
var rails_directory_hue = d3.scale.ordinal()
                                  .domain([null, "controller", "model", "view", "helper", "lib", "vendor", "config", "js", "stylesheet", "db"])
                                  .rangeBands([0, 360]);
// var gray_scale = d3.scale.linear().domain([0, 255]).range(["red", "blue"]);

function setupJSON(json){
  if(json.is_action){
    json.children = [];
  }

  if(json.children){
    _.each(json.children, function(json_){ setupJSON(json_) });
  }
}

d3.json("input.json", function(json) {
  setupJSON(json);

  var nodes = tree.nodes(json);
  var links = tree.links(nodes);

  var font_size = 9;

  base.selectAll("path.link")
     .data(links)
     .enter()
     .append("path")
     .attr("class", "link")
     .attr("d", function(d){
         return diagonal(d);
      });

  base.selectAll("g.textnode")
      .data(nodes)
      .enter()
      .append("g")
      .each(function(d){
           var texts = [d.label || (d.corners + " " + ((d.fname && d.lnum) ? (d.fname + ":" + d.lnum) : ''))];
           var offset_x = 0; //(-1) * d3.max(texts, function(t){ return font_size * (t || "").length }) / 4;
           var offset_y = (-1) * (font_size * texts.length) / 2;

           var text = d3.select(this).selectAll("text.label")
                        .data(texts)
                        .enter()
                        .append("text")
                        .attr("class", "label")
                        .attr("x", function(d){ return offset_x; })
                        .attr("y", function(d, i){ return offset_y + font_size*(i+1); })
                        .attr("fill", "#000")
                        .attr("font-family", "trebuchet ms, helvetica, sans-serif")
                        .attr("text-anchor", "start")
                        .attr("font-size", font_size)
                        .text(function(t){ return t })
                        .on("mouseover", function(){
                            return tooltip.style("visibility", "visible");
                        })
                        .on("mousemove", function(){
                            var inner = ""
                            _.each(d.around_text || [], function(arr){ inner += "<pre><code>" + arr[0] + ": " + arr[1] + "</code></pre>"});
                            return tooltip.style("top", (d3.event.pageY + 10) + "px")
                                          .style("left",(d3.event.pageX - 100) + "px")
                                          .html(inner);
                        })
                        .on("mouseout", function(){
                            return tooltip.style("visibility", "hidden");
                        });

           var real_box_width  = d3.max(text[0].map(function(e){ return e.getBBox().width; }));
           var real_box_height = d3.sum(text[0].map(function(e){ return e.getBBox().height; }));

           d3.select(this)
             .insert("rect", "text")
             .attr("width", function(e){  return real_box_width })
             .attr("height", function(e){ return real_box_height })
             .attr("rx", 3)
             .attr("ry", 3)
             //.style("fill", function(e){ return gray_scale(strToCode(d.search_word || "", 255)) })
             .style("fill", function(e){ return d3.hsl(rails_directory_hue(d.rails_directory), 1, 0.5) })
             .attr("x", function(e){ return offset_x })
             .attr("y", function(e){ return offset_y })
             .attr("fill-opacity", function(e){ return 0.3 })
             .style("stroke-width", "0");

      })
      .attr("transform",  function(d){ return "translate(" + d.y + ",  " + (d.x + d.y / 10) + ")"; });

    var tooltip = d3.select("body")
                    .append('div')
                    .attr('class', 'tooltip');
});

@@ -1556,24 +1556,201 @@
 t_right%5D);%0A%0A
+var x_scale = function(x)%7B%0A  var threshold = 500;%0A  var scale = 5;%0A%0A  if(x %3C threshold)%7B%0A    return (x * 1.0)/scale;%0A  %7Delse%7B%0A    return x - threshold + threshold/scale;%0A  %7D%0A%7D%0A%0A
 var diagonal
@@ -1825,19 +1825,28 @@
 return %5B
+x_scale(
 d.y
+)
 , d.x + 
@@ -5453,25 +5453,24 @@
 dth%22, %220%22);%0A
-%0A
       %7D)%0A   
@@ -5527,19 +5527,28 @@
 ate(%22 + 
+x_scale(
 d.y
+)
  + %22,  %22

Apply sqrt scale to x coordinate