Skip to content

Instantly share code, notes, and snippets.

@mikong mikong/index.html
Created Dec 7, 2011

Embed
What would you like to do?
<html>
<head>
<script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
<script src="https://raw.github.com/mbostock/d3/master/d3.geom.js"></script>
<script src="https://raw.github.com/mbostock/d3/master/d3.layout.js"></script>
<style>
#area { background: #ddd; }
circle { stroke-width: 2px; stroke: #fff; }
</style>
</head>
<body>
<div id="area" />
<script>
function genCircle() {
return {
x: Math.random() * 400 + 25,
y: Math.random() * 400 + 25
}
}
var data = [genCircle(), genCircle(), genCircle(), genCircle()];
var canvass = d3.select('#area').append('svg:svg')
.attr('height', 600)
.attr('width', 960);
var circles = canvass.selectAll('circle')
.data(data);
circles.enter()
.append('svg:circle')
.attr('cx', function(d) { return d.x })
.attr('cy', function(d) { return d.y })
.attr('r', 20)
.attr('fill', '#933');
var force = d3.layout.force()
.nodes(data)
.links([])
.size([400, 400])
.start()
.gravity(0.000)
.charge(-300);
force.on('tick', function(e) {
canvass.selectAll('circle')
.attr('transform', function(d) {
var newX = d.x + (Math.random() * 3);
var newY = d.y + (Math.random() * 3);
return 'translate(' + newX + ',' + newY + ')';
});
force.resume();
});
setInterval(function() {
canvass.selectAll('circle').transition()
.duration(300)
.attr('r', function() { return Math.random() * 40 + 20; });
}, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.