Skip to content

Instantly share code, notes, and snippets.

@leonsas

leonsas/index.html

Created July 19, 2012 15:20
Show Gist options
  • Save leonsas/3144628 to your computer and use it in GitHub Desktop.
Save leonsas/3144628 to your computer and use it in GitHub Desktop.
Download ZIP
bubble chart
Raw
index.html
<html>
<head></head>
<body>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<script type="text/javascript">
var dataset = {"nodes": [{"statuses_count": 905, "name": "ThinkBlue Initiative", "friends_count": 1247, "followers_count": 120, "id": 171099799, "screen_name": "ThinkBlueInit"}, {"statuses_count": 218, "name": "Be Liquid", "friends_count": 261, "followers_count": 61, "id": 293498084, "screen_name": "MyWayToDelphi"}, {"statuses_count": 284, "name": "discover5oceans", "friends_count": 1952, "followers_count": 1075, "id": 105296106, "screen_name": "discover5oceans"}]};
var w = 500;
var h = 500;
var center = {x: w / 2, y: h / 2}
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll("circle")
var force= d3.layout.force()
.charge(function (d)
{
return -Math.pow(d.radius, 2.0) / 16;
})
.size([w,h]);
force
.nodes(dataset.nodes)
.start();
;
var node = svg.selectAll("circle.node")
.data(dataset.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", function(d){return Math.sqrt(d.followers_count)})
.style("fill", "#FF0000")
.call(force.drag);
node.append("title").text(function(d){return d.screen_name +": " + d.followers_count;});
force.on("tick", function() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
d3.select(".node")[0][0].setAttribute("r","2")
d3.select(".node")[0][0].setAttribute("style","fill:rgb(0,20,200)")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment