index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>circle packing using d3 pack layout</title>
<link href="https://fonts.googleapis.com/css?family=Rock+Salt&display=swap" rel="stylesheet">
<style>
text {
font-family: 'Rock Salt', cursive;
}
div#vis {
text-align: center;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
var data = {
"name": "root",
"children": [
{"name":"PostgreSQL","size":513.919},
{"name":"mongoDB","size":437.608},
{"name":"Redis","size":147.582},
{"name":"DynamoDB","size":62.514},
{"name":"Neo4j","size":51.778},
{"name":"HBase","size":51.152},
{"name":"CouchDB","size":18.135}]};
var w = 700, format = d3.format(",d");
var c10 = d3.scale.category10();
var pack = d3.layout.pack()
.size([w, w])
.sort(null)
.padding(10)
.value(function(d) { return d.size; });
var svg = d3.select("div#vis")
.append("svg")
.attr("width", w)
.attr("height", w);
var vis = svg.datum(data).selectAll(".node").data(pack.nodes).enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var titles = vis.append("title")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function(d) { return "DB-Ranking" + (d.children ? "" : ": " + d.value.toFixed(1).toString()); });
var circles = vis.append("circle")
.style("fill", function(d,i) { return !d.children ? "white" : "white"; })
.attr("stroke", "#888888")
.attr("r", function(d) { return d.r; })
.on("mouseout", function() {
d3.select(this).attr("stroke","grey");
})
.on("mouseover", function() {
d3.select(this).attr("stroke","black");
});
var text = vis.append("text")
.style("text-anchor","middle")
.text( function(d) {return d.name; } )
</script>
</body>
</html>