Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 9, 2016 00:06
Download ZIP
Force Layout from List
Raw
.block
license: gpl-3.0
Raw
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="http://kenneth.kufluk.com/blog/">Kenneth</a>
<ul>
<li><a href="http://twitter.com/kennethkufluk" target="_blank" class="icon twitter">Twitter</a></li>
<li><a href="http://www.linkedin.com/in/kennethkufluk" target="_blank" class="icon linkedin">LinkedIn</a></li>
<li><a href="http://www.facebook.com/kenneth.kufluk" target="_blank" class="icon facebook">Facebook</a></li>
<li><a href="http://feeds.feedburner.com/KennethKufluk" target="_blank" class="icon rss">RSS Feed</a></li>
<li><a href="http://kenneth.kufluk.com/blog/">Blog categories</a>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/blog/general/" title="View all posts filed under General">General</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/personal/" title="View all posts filed under Personal">Personal</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/physics/" title="View all posts filed under Physics &amp; Astronomy">Physics &amp; Astronomy</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/projects/" title="View all posts filed under Projects">Projects</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/rant/" title="View all posts filed under Ranting">Ranting</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/work/" title="View all posts filed under Work">Work</a></li>
</ul>
</li>
<li><a href="http://kenneth.kufluk.com/blog/">Pages</a>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/about/" title="About Kenneth">About Kenneth</a></li>
<li><a href="http://kenneth.kufluk.com/blog/work/" title="Employment">Employment</a></li>
<li><a href="http://kenneth.kufluk.com/blog/experiments/" title="Experiments">Experiments</a></li>
</ul>
</li>
<li><a href="http://kenneth.kufluk.com/blog/">Friends</a>
<ul>
<li><a href="http://coderonfire.com/" title="Coder on Fire" rel="friend met co-worker colleague neighbor">Andrew Mason</a></li>
<li><a href="http://www.wait-till-i.com" title="Wait till I come!" rel="met">Christian Heilmann</a></li>
<li><a href="http://www.danwebb.net" rel="friend met" title="Godlike JavaScript Guru">Dan Webb</a></li>
<li><a href="http://www.sitedaniel.com" rel="friend met co-worker colleague neighbor" title="Flash Whizz">Daniel Goldsworthy</a></li>
<li><a href="http://dean.edwards.name" rel="friend met" title="Godlike JavaScript Guru">Dean Edwards</a></li>
<li><a href="http://www.dotsonline.co.uk" title="My auntie&#8217;s music shop.">Dot&#8217;s Shop</a></li>
<li><a href="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment