CodePen

HTML

            
              <div id="graph"></div>
            
          
!

CSS

            
              .link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var json = {
  "name": "Meet Treat",
  "children": [
    {
      "name": "Meeting 1",
      "children": [
        {
          "name": "Meeting 2",
          "children": [
            {"name": "Meeting 5"}
          ]
        },
        {
          "name": "Meeting 4"
        }
      ]
    },
    {
      "name": "Meeting 3",
      "children": [
        {
          "name": "Meeting 7",
          "children": [
            {"name": "Meeting 8"}
          ]
        }
      ]
    },
    {
      "name": "Meeting 6",
      "children": [
        {
          "name": "Meeting 9"
        },
        {
          "name": "Meeting 10",
          "children": [
            {"name": "Meeting 13"}
          ]
        }
      ]
    },
    {
      "name": "Meeting 11",
      "children": [
        {
          "name": "Meeting 14"
        },
        {
          "name": "Meeting 16"
        }
      ]
    },
    {
      "name": "Meeting 12",
      "children": [
        {
          "name": "Meeting 15",
          "children": [
            {"name": "Meeting 17"}
          ]
        },
        {
          "name": "Meeting 18"
        }
      ]
    },
    {
      "name": "Meeting 19",
      "children": [
        {
          "name": "Meeting 21",
          "children": [
            {
              "name": "Meeting 22",
              "children": [
                {
                  "name": "Meeting 23"
                },
                {
                  "name": "Meeting 24",
                  "children": [
                    {"name": "Meeting 25"}
                  ]
                }
              ]
            }
          ]
        },
        {
          "name": "Meeting 27"
        }
      ]
    },
    {
      "name": "Meeting 20",
      "children": [
        {
          "name": "Meeting 26",
          "children": [
            {"name": "Meeting 28"}
          ]
        },
        {
          "name": "Meeting 29"
        }
      ]
    }
  ]
};


var m = [20, 120, 20, 120],
    w = 1280 - m[1] - m[3],
    h = 1000 - m[0] - m[2],
    i = 0,
    root;

var tree = d3.layout.tree()
    .size([h, w]);

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

var vis = d3.select("#graph").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

//d3.json("flare2.json", function(json) {
  root = json;
  root.x0 = h / 2;
  root.y0 = 0;

  update(root);
//});

function update(source) {
  var duration = d3.event && d3.event.altKey ? 5000 : 500;

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse();

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      ;//.on("click", function(d) { toggle(d); update(d); });
  nodeEnter.append('image')
    .attr('xlink:href', 'http://www.uni-regensburg.de/Fakultaeten/phil_Fak_II/Psychologie/Psy_II/beautycheck/english/durchschnittsgesichter/m(01-32)_gr.jpg')
    .attr('width', 40)
    .attr('height', 40)
    .attr('x', -40)
    .attr('y', -20)
    .attr('clip-path', 'url(#clip1)');
  var clip1 = nodeEnter.append('clipPath')
    .attr('id', 'clip1')
    .attr('x', 0)
    .attr('y', 0);
  clip1.append('circle')
    .attr('r', 20)
    .attr('cx', -20);
  nodeEnter.append('image')
    .attr('xlink:href', 'http://0.tqn.com/d/hairremoval/1/0/e/-/-/-/eyebrow-classic.jpg')
    .attr('width', 40)
    .attr('height', 40)
    .attr('x', 0 )
    .attr('y', -20)
    .attr('clip-path', 'url(#clip2)');
  var clip2 = nodeEnter.append('clipPath')
    .attr('id', 'clip2')
    .attr('x', 0)
    .attr('y', 0);
  clip2.append('circle')
    .attr('r', 20)
    .attr('cx', 20);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  // Update the links…
  var link = vis.selectAll("path.link")
      .data(tree.links(nodes), function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("svg:path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      })
    .transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................