Force Layout from List by mbostock

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  stroke: #ccc;
}

.node {
  fill: #000;
  stroke: #fff;
}

</style>
<div id="chart"></div>
<ul style="display:none;" id="list">
  <li><a href="//kenneth.kufluk.com/blog/">Kenneth</a>
    <ul>
      <li><a href="//twitter.com/kennethkufluk" target="_blank" class="icon twitter">Twitter</a></li>
      <li><a href="//www.linkedin.com/in/kennethkufluk" target="_blank" class="icon linkedin">LinkedIn</a></li>
      <li><a href="//www.facebook.com/kenneth.kufluk" target="_blank" class="icon facebook">Facebook</a></li>
      <li><a href="//feeds.feedburner.com/KennethKufluk" target="_blank" class="icon rss">RSS Feed</a></li>
      <li><a href="//kenneth.kufluk.com/blog/">Blog categories</a>
        <ul>
          <li><a href="//kenneth.kufluk.com/blog/blog/general/" title="View all posts filed under General">General</a></li>
          <li><a href="//kenneth.kufluk.com/blog/blog/personal/" title="View all posts filed under Personal">Personal</a></li>
          <li><a href="//kenneth.kufluk.com/blog/blog/physics/" title="View all posts filed under Physics &amp; Astronomy">Physics &amp; Astronomy</a></li>
          <li><a href="//kenneth.kufluk.com/blog/blog/projects/" title="View all posts filed under Projects">Projects</a></li>
          <li><a href="//kenneth.kufluk.com/blog/blog/rant/" title="View all posts filed under Ranting">Ranting</a></li>
          <li><a href="//kenneth.kufluk.com/blog/blog/work/" title="View all posts filed under Work">Work</a></li>
        </ul>
      </li>
      <li><a href="//kenneth.kufluk.com/blog/">Pages</a>
        <ul>
          <li><a href="//kenneth.kufluk.com/blog/about/" title="About Kenneth">About Kenneth</a></li>
          <li><a href="//kenneth.kufluk.com/blog/work/" title="Employment">Employment</a></li>
          <li><a href="//kenneth.kufluk.com/blog/experiments/" title="Experiments">Experiments</a></li>
        </ul>
      </li>
      <li><a href="//kenneth.kufluk.com/blog/">Friends</a>
        <ul>
          <li><a href="//coderonfire.com/" title="Coder on Fire" rel="friend met co-worker colleague neighbor">Andrew Mason</a></li>
          <li><a href="//www.wait-till-i.com" title="Wait till I come!" rel="met">Christian Heilmann</a></li>
          <li><a href="//www.danwebb.net" rel="friend met" title="Godlike JavaScript Guru">Dan Webb</a></li>
          <li><a href="//www.sitedaniel.com" rel="friend met co-worker colleague neighbor" title="Flash Whizz">Daniel Goldsworthy</a></li>
          <li><a href="//dean.edwards.name" rel="friend met" title="Godlike JavaScript Guru">Dean Edwards</a></li>
          <li><a href="//www.dotsonline.co.uk" title="My auntie&#8217;s music shop.">Dot&#8217;s Shop</a></li>
          <li><a href="//simonwillison.net/" title="PHP, Python, CSS, XML and general web development.">Simon Willison</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var fill = d3.scale.category20();

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

var nodes = d3.selectAll("li")[0],
    links = nodes.slice(1).map(function(d) {
      return {source: d, target: d.parentNode.parentNode};
    });

var force = d3.layout.force()
    .charge(-120)
    .distance(30)
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .start();

var link = svg.selectAll(".link")
    .data(links)
  .enter().append("line")
    .attr("class", "link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

var node = svg.selectAll(".node")
    .data(nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5)
    .call(force.drag);

force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});

</script>