block by nitaku 0667e50795041cdcd729fa51436085b4

Collapsible indented tree II

Full Screen

Collapsible, flippable indented trees.

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var DX, DY, SPEED, TREE_WIDTH, depth_color, height, left, render, render_tree, right, svg, toggle, tree_aree, tree_dip, tree_layout, width;

  TREE_WIDTH = 340;

  DX = 25;

  DY = 50;

  SPEED = 400;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  left = svg.append('g').attr({
    transform: 'translate(16,20)'
  });

  right = svg.append('g').attr({
    transform: "translate(" + (width - TREE_WIDTH - 16) + ",20)"
  });

  tree_layout = d3.layout.tree();

  toggle = function(n, recursive) {
    if (n.children != null) {
      n._children = n.children;
      delete n.children;
      if (recursive) {
        return n._children.forEach(function(c) {
          return toggle(c, true);
        });
      }
    } else if (n._children != null) {
      n.children = n._children;
      delete n._children;
      if (recursive) {
        return n.children.forEach(function(c) {
          return toggle(c, true);
        });
      }
    }
  };

  depth_color = d3.scale.linear().domain([0, 3]).range(['#DBE', '#EEE']).interpolate(d3.interpolateHcl);

  tree_dip = null;

  tree_aree = null;

  d3.json('dipartimenti.json', function(_tree_dip) {
    tree_dip = _tree_dip;
    return d3.json('aree.json', function(_tree_aree) {
      tree_aree = _tree_aree;
      tree_dip.children.forEach(function(c) {
        return toggle(c, true);
      });
      tree_aree.children.forEach(function(c) {
        return toggle(c, true);
      });
      return render();
    });
  });

  render = function() {
    var count_aree, count_dip;
    count_dip = render_tree(tree_dip, right, true);
    count_aree = render_tree(tree_aree, left, false);
    return svg.transition().delay(SPEED).duration(SPEED).attr({
      height: Math.max(count_dip, count_aree) * DY + DY
    });
  };

  render_tree = function(tree, container, flip) {
    var enter_nodes, nodes, nodes_data;
    nodes_data = tree_layout.nodes(tree);
    nodes_data.forEach(function(d, i) {
      d.x = (!flip ? d.depth * DX : 0);
      return d.y = i * DY;
    });
    nodes = container.selectAll('.node').data(nodes_data, function(d) {
      return d.depth + "_" + d.name;
    });
    nodes.exit().transition().duration(SPEED).attr({
      opacity: 0
    }).remove();
    nodes.transition().delay(SPEED).duration(SPEED).attr({
      transform: function(d) {
        return "translate(" + d.x + ", " + d.y + ")";
      }
    });
    enter_nodes = nodes.enter().append('g').attr({
      "class": 'node',
      transform: function(d) {
        return "translate(" + d.x + ", " + d.y + ")";
      },
      opacity: 0
    }).on('click', function(d) {
      toggle(d, false);
      return render();
    }).classed('internal', function(d) {
      return (d.children != null) || (d._children != null);
    });
    enter_nodes.transition().delay(SPEED * 2).duration(SPEED).attr({
      opacity: 1
    });
    enter_nodes.append('rect').attr({
      width: function(d) {
        return TREE_WIDTH - d.depth * DX;
      },
      height: DY,
      fill: function(d) {
        return depth_color(d.depth);
      }
    });
    enter_nodes.append('foreignObject').html(function(d) {
      return "<body xmlns='http://www.w3.org/1999/xhtml'><div><div>" + d.name + "</div></div></body>";
    }).attr({
      width: function(d) {
        return TREE_WIDTH - d.depth * DX;
      },
      height: DY
    });
    nodes.classed('collapsed', function(d) {
      return d._children != null;
    });
    return nodes_data.length;
  };

}).call(this);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Indented tree II</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <svg></svg>
        <script src="index.js"></script>
    </body>
</html>

dipartimenti.json

{"name":"Dipartimenti","children":[{"type":"dipartimento","name":"Dipartimento Ingegneria, ICT e Tecnologie per l'Energia e i Trasporti","sigla":"DIITET","children":[{"type":"istituto","name":"Istituto di Informatica e Telematica","sigla":"IIT"},{"type":"istituto","name":"Istituto di Scienze e Tecnologie Informatiche","sigla":"ISTI"},{"type":"istituto","name":"Istituto Nazionale per Studi ed Esperienze di Architettura Navale","sigla":"INSEAN"},{"type":"istituto","name":"Istituto di Fisica del Plasma \"Piero Caldirola\"","sigla":"IFP"},{"type":"istituto","name":"Istituto Gas Ionizzati","sigla":"IGI"},{"type":"istituto","name":"Istituto di Ricerche sulla Combustione","sigla":"IRC"},{"type":"istituto","name":"Istituto di Tecnologie Avanzate per l'Energia \"Nicola Giordano\"","sigla":"ITAE"},{"type":"istituto","name":"Istituto Motori","sigla":"IM","children":[{"type":"unita_di_    ricerca","name":"motori","site_url":"www.motori.it"}]},{"type":"istituto","name":"Istituto di Fisica Applicata \"Nello Carrara\"","sigla":"IFAC"},{"type":"istituto","name":"Istituto dei Materiali per l'Elettronica ed il Magnetismo","sigla":"IMEM"},{"type":"istituto","name":"Istituto di Studi sui Sistemi Intelligenti per l'Automazione","sigla":"ISSIA"},{"type":"istituto","name":"Istituto per le Macchine Agricole e Movimento Terra","sigla":"IMAMOTER"},{"type":"istituto","name":"Istituto di Tecnologie Industriali e Automazione","sigla":"ITIA"},{"type":"istituto","name":"Istituto per le Tecnologie della Costruzione","sigla":"ITC"},{"type":"istituto","name":"Istituto di Acustica e Sensoristica \"Orso Mario Corbino\"","sigla":"IDASC"},{"type":"istituto","name":"Istituto per il Rilevamento Elettromagnetico dell'Ambiente","sigla":"IREA"},{"type":"istituto","name":"Istituto di Elettronica e di Ingegneria dell'Informazione e delle Telecomunicazioni","sigla":"IEIIT"},{"type":"istituto","name":"Istituto di Calcolo e Reti ad Alte Prestazioni","sigla":"ICAR"},{"type":"istituto","name":"Istituto per le Applicazioni del Calcolo \"Mauro Picone\"","sigla":"IAC"},{"type":"istituto","name":"Istituto di Analisi dei Sistemi ed Informatica \"Antonio Ruberti\"","sigla":"IASI"},{"type":"istituto","name":"Istituto di Matematica Applicata e Tecnologie Informatiche","sigla":"IMATI"}]},{"type":"dipartimento","name":"Dipartimento di Scienze Fisiche e Tecnologie della Materia","sigla":"DSFTM","children":[{"type":"istituto","name":"Istituto Officina dei Materiali","sigla":"IOM"},{"type":"istituto","name":"Istituto Superconduttori, Materiali innovativi e dispositivi","sigla":"SPIN"},{"type":"istituto","name":"Istituto di Nanoscienze","sigla":"NANO"},{"type":"istituto","name":"Istituto Nazionale di Ottica","sigla":"INO"},{"type":"istituto","name":"Istituto di Struttura della Materia","sigla":"ISM"},{"type":"istituto","name":"Istituto dei Sistemi Complessi","sigla":"ISC"},{"type":"istituto","name":"Istituto di Biofisica","sigla":"IBF"},{"type":"istituto","name":"Istituto di Scienze Applicate e Sistemi Intelligenti \"Eduardo Caianiello\"","sigla":"ISASI"},{"type":"istituto","name":"Istituto di Nanotecnologia","sigla":"NANOTEC"},{"type":"istituto","name":"Istituto di Fotonica e Nanotecnologie","sigla":"IFN"},{"type":"istituto","name":"Istituto per la Microelettronica e Microsistemi","sigla":"IMM"}]},{"type":"dipartimento","name":"Dipartimento di Scienze Chimiche e Tecnologie dei Materiali","sigla":"DSCTM","children":[{"type":"istituto","name":"Istituto per la Tecnologia delle Membrane","sigla":"ITM"},{"type":"istituto","name":"Istituto per lo Studio dei Materiali Nanostrutturati","sigla":"ISMN"},{"type":"istituto","name":"Istituto di Metodologie Chimiche","sigla":"IMC"},{"type":"istituto","name":"Istituto per lo Studio delle Macromolecole","sigla":"ISMAC"},{"type":"istituto","name":"Istituto per i Polimeri, Compositi e Biomateriali","sigla":"IPCB"},{"type":"istituto","name":"Istituto di Scienze e Tecnologie Molecolari","sigla":"ISTM"},{"type":"istituto","name":"Istituto per i Processi Chimico-Fisici","sigla":"IPCF"},{"type":"istituto","name":"Istituto di Chimica Biomolecolare","sigla":"ICB"},{"type":"istituto","name":"Istituto di Chimica dei Composti Organo Metallici","sigla":"ICCOm"},{"type":"istituto","name":"Istituto per la Sintesi Organica e la Fotoreattivit\u00e0","sigla":"ISOF"},{"type":"istituto","name":"Istituto di Scienza e Tecnologia dei Materiali Ceramici","sigla":"ISTEC"},{"type":"istituto","name":"Istituto di Chimica del Riconoscimento Molecolare","sigla":"ICRM"},{"type":"istituto","name":"Istituto di Cristallografia","sigla":"IC"},{"type":"istituto","name":"Istituto per l'Energetica e le Interfasi","sigla":"IENI"}]},{"type":"dipartimento","name":"Dipartimento di Scienze del Sistema Terra e Tecnologie per l'Ambiente","sigla":"DTA","children":[{"type":"istituto","name":"Istituto di Ricerca per la Protezione Idrogeologica","sigla":"IRPI"},{"type":"istituto","name":"Istituto di Geologia Ambientale e Geoingegneria","sigla":"IGAG"},{"type":"istituto","name":"Istituto di Scienze Marine","sigla":"ISMAR"},{"type":"istituto","name":"Istituto di Ricerca sulle Acque","sigla":"IRSA"},{"type":"istituto","name":"Istituto sull'Inquinamento Atmosferico","sigla":"IIA"},{"type":"istituto","name":"Istituto di Scienze dell'Atmosfera e del Clima","sigla":"ISAC"},{"type":"istituto","name":"Istituto di Metodologie per l'Analisi Ambientale","sigla":"IMAA"},{"type":"istituto","name":"Istituto per l'Ambiente Marino","sigla":"IAMC"},{"type":"istituto","name":"Istituto per la Dinamica dei Processi Ambientali","sigla":"IDPA"},{"type":"istituto","name":"Istituto di Geoscienze e Georisorse","sigla":"IGG"},{"type":"istituto","name":"Istituto di Biologia Agro-Ambientale e Forestale","sigla":"IBAF"}]},{"type":"dipartimento","name":"Dipartimento di Scienze Bio-Agroalimentari","sigla":"DISBA","children":[{"type":"istituto","name":"Istituto per il sistema produzione animale in ambiente Mediterraneo","sigla":"ISPAAM"},{"type":"istituto","name":"Istituto di Biologia e Biotecnologia Agraria","sigla":"IBBA"},{"type":"istituto","name":"Istituto di Biometeorologia","sigla":"IBIMET"},{"type":"istituto","name":"Istituto per i Sistemi Agricoli e Forestali del Mediterraneo","sigla":"ISAFoM"},{"type":"istituto","name":"Istituto per la Protezione Sostenibile delle Piante","sigla":"IPSP"},{"type":"istituto","name":"Istituto di Bioscienze e Biorisorse","sigla":"IBBR"},{"type":"istituto","name":"Istituto di Scienze delle Produzioni Alimentari","sigla":"ISPA"},{"type":"istituto","name":"Istituto per la Valorizzazione del Legno e delle Specie Arboree","sigla":"IVALSA"}]},{"type":"dipartimento","name":"Dipartimento di Scienze Biomediche","sigla":"DSB","children":[{"type":"istituto","name":"Istituto di Biostrutture e Bioimmagini","sigla":"IBB"},{"type":"istituto","name":"Istituto di Scienze Neurologiche","sigla":"ISN"},{"type":"istituto","name":"Istituto di Farmacologia Traslazionale","sigla":"IFT"},{"type":"istituto","name":"Istituto di Bioimmagini e Fisiologia Molecolare","sigla":"IBFM"},{"type":"istituto","name":"Istituto di Genetica Molecolare","sigla":"IGM"},{"type":"istituto","name":"Istituto di Tecnologie Biomediche","sigla":"ITB"},{"type":"istituto","name":"Istituto di Biomedicina e di Immunologia Molecolare \"Alberto Monroy\"","sigla":"IBIM"},{"type":"istituto","name":"Istituto di Fisiologia Clinica","sigla":"IFC"},{"type":"istituto","name":"Istituto di Neuroscienze","sigla":"IN"},{"type":"istituto","name":"Istituto di Ricerca Genetica e Biomedica","sigla":"IRGB"},{"type":"istituto","name":"Istituto di Biochimica delle Proteine","sigla":"IBP"},{"type":"istituto","name":"Istituto di Genetica e Biofisica \"Adriano Buzzati Traverso\"","sigla":"IGB"},{"type":"istituto","name":"istituto di Biologia Cellulare e Neurobiologia","sigla":"IBCN"},{"type":"istituto","name":"Istituto di Biologia e Patologia Molecolari","sigla":"IBPM"},{"type":"istituto","name":"Istituto per l'Endocrinologia e l'Oncologia \"Gaetano Salvatore\"","sigla":"IEOS"},{"type":"istituto","name":"Istituto di Biomembrane e Bioenergetica","sigla":"IBBE"}]},{"type":"dipartimento","name":"Dipartimento di Scienze Umane e Sociali - Patrimonio Culturale","sigla":"DSU","children":[{"type":"istituto","name":"Istituto di Studi sul Mediterraneo Antico","sigla":"ISMA"},{"type":"istituto","name":"Centro di Responsabilit\u00e0 di Attivit\u00e0 Scientifica","sigla":"IDAIC"},{"type":"istituto","name":"Istituto per i Beni Archeologici e Monumentali","sigla":"IBAM"},{"type":"istituto","name":"Istituto per le Tecnologie Applicate ai Beni Culturali","sigla":"ITABC"},{"type":"istituto","name":"Istituto per la Conservazione e Valorizzazione dei Beni Culturali","sigla":"ICVBC"},{"type":"istituto","name":"Istituto di Scienze e Tecnologie della Cognizione","sigla":"ISTC"},{"type":"istituto","name":"Istituto per le Tecnologie Didattiche","sigla":"ITD"},{"type":"istituto","name":"Istituto di Studi Giuridici Internazionali","sigla":"ISGI"},{"type":"istituto","name":"Istituto di Opera del Vocabolario Italiano","sigla":"OVI"},{"type":"istituto","name":"Istituto di Teoria e Tecniche dell'Informazione Giuridica","sigla":"ITTIG"},{"type":"istituto","name":"Istituto di Linguistica Computazionale \"Antonio Zampolli\"","sigla":"ILC"},{"type":"istituto","name":"Istituto di Studi sulle Societ\u00e0 del Mediterraneo","sigla":"ISSM"},{"type":"istituto","name":"Istituto di Ricerca su Innovazione e Servizi per lo Sviluppo","sigla":"IRISS"},{"type":"istituto","name":"Istituto di Storia dell'Europa Mediterranea","sigla":"ISEM"},{"type":"istituto","name":"Istituto di Studi sui Sistemi Regionali Federali e sulle Autonomie \"Massimo Severo Giannini\"","sigla":"ISSIRFA"},{"type":"istituto","name":"Istituto di Ricerche sulla Popolazione e le Politiche Sociali","sigla":"IRPPS"},{"type":"istituto","name":"Istituto di Ricerca sui Sistemi Giudiziari","sigla":"IRSIG"},{"type":"istituto","name":"Istituto per il Lessico Intellettuale Europeo e Storia delle Idee","sigla":"ILIESI"},{"type":"istituto","name":"Istituto per la Storia del Pensiero Filosofico e Scientifico Moderno","sigla":"ISPF"},{"type":"istituto","name":"Istituto di Ricerca sulla Crescita Economica Sostenibile","sigla":"IRCRES"}]}]}

flare.json

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

index.coffee

TREE_WIDTH = 340
DX = 25
DY = 50
SPEED = 400

svg = d3.select 'svg'

width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

left = svg.append 'g'
  .attr
    transform: 'translate(16,20)'
    
right = svg.append 'g'
  .attr
    transform: "translate(#{width-TREE_WIDTH-16},20)"

tree_layout = d3.layout.tree()

toggle = (n, recursive) ->
  if n.children?
    n._children = n.children
    delete n.children
    if recursive
      n._children.forEach (c) -> toggle(c, true)
  else if n._children?
    n.children = n._children
    delete n._children
    if recursive
      n.children.forEach (c) -> toggle(c, true)

depth_color = d3.scale.linear()
  .domain([0,3])
  .range(['#DBE','#EEE'])
  .interpolate(d3.interpolateHcl)
  
tree_dip = null
tree_aree = null

d3.json 'dipartimenti.json', (_tree_dip) ->
  tree_dip = _tree_dip
  d3.json 'aree.json', (_tree_aree) ->
    tree_aree = _tree_aree
    
    # collapse all
    tree_dip.children.forEach (c) -> toggle(c, true)
    tree_aree.children.forEach (c) -> toggle(c, true)
    
    render()


render = () ->
  count_dip = render_tree(tree_dip, right, true)
  count_aree = render_tree(tree_aree, left, false)
  
  # make room for the whole tree
  svg
    .transition().delay(SPEED).duration(SPEED)
      .attr
        height: Math.max(count_dip,count_aree)*DY+DY


render_tree = (tree, container, flip) ->
  # preprocessing
  nodes_data = tree_layout.nodes tree
  
  # layout
  nodes_data.forEach (d,i) ->
    d.x = (if not flip then d.depth*DX else 0)
    d.y = i*DY
      
  # nodes
  nodes = container.selectAll '.node'
    .data nodes_data, (d) -> "#{d.depth}_#{d.name}"
    
  nodes.exit()
    .transition().duration(SPEED)
      .attr
        opacity: 0
    .remove()
    
  nodes
    .transition().delay(SPEED).duration(SPEED)
      .attr
        transform: (d) -> "translate(#{d.x}, #{d.y})"
      
  enter_nodes = nodes.enter().append 'g'
    .attr
      class: 'node'
      transform: (d) -> "translate(#{d.x}, #{d.y})"
      opacity: 0
    .on 'click', (d) ->
      toggle(d, false)
      render()
    .classed 'internal', (d) -> d.children? or d._children?
    
  enter_nodes
    .transition().delay(SPEED*2).duration(SPEED)
      .attr
        opacity: 1
        
  enter_nodes.append 'rect'
    .attr
      width: (d) -> TREE_WIDTH - d.depth*DX
      height: DY
      fill: (d) -> depth_color(d.depth)
        
  enter_nodes.append 'foreignObject'
    .html (d) -> "<body xmlns='http://www.w3.org/1999/xhtml'><div><div>#{d.name}</div></div></body>"
    .attr
      width: (d) -> TREE_WIDTH - d.depth*DX
      height: DY
        
  nodes
    .classed 'collapsed', (d) -> d._children?
    
  return nodes_data.length

index.css

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
body {
  overflow-y: scroll;
}

svg {
  width: 100%;
}

.node {
  font-size: 13px;
  font-family: sans-serif;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.node rect {
  stroke: white;
  stroke-width: 2px;
}
.node foreignObject > div {
  text-align: center;
  display: table;
  width: 100%;
  height: 100%;
}
.node foreignObject > div > div {
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}
.internal.node {
  font-weight: bold;
  cursor: pointer;
}