aaizemberg/index.html

## 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 ? c10(i) : "white"; })
                .style("fill", function(d,i) { return !d.children ? "white" : "white"; })
                .attr("stroke", "#888888")
//              .attr("cx", function(d) { return d.x; })
//              .attr("cy", function(d) { return d.y; })
                .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>
	<!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 ? c10(i) : "white"; })
	.style("fill", function(d,i) { return !d.children ? "white" : "white"; })
	.attr("stroke", "#888888")
	// .attr("cx", function(d) { return d.x; })
	// .attr("cy", function(d) { return d.y; })
	.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>