El DB-Ranking de las 7dbs, marzo 2020 (circle packing d3js)

<!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 text = vis.append("text")
  .style("text-anchor","middle")
  .text( function(d) {return d.name; } )
</script>  
  
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js