Skip to content

Instantly share code, notes, and snippets.

@jtauber

jtauber/README.md

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jtauber/1ff0675ba73244997e0a to your computer and use it in GitHub Desktop.
Save jtauber/1ff0675ba73244997e0a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.node {
fill: #333;
cursor: pointer;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var fill = d3.scale.category20();
var force = d3.layout.force()
.size([width, height])
.nodes([
{word: "I"},
{word: "need"},
{word: "to"},
{word: "ensure"},
{word: "these"},
{word: "words"},
{word: "don't"},
{word: "overlap"},
])
.gravity(0.05)
.charge(-200)
.on("tick", tick);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll(".node")
.data(force.nodes());
node.enter().insert("text")
.attr("class", "node")
.call(force.drag);
force.start();
function tick() {
node.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function(d) { return d.word; });
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment