index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>dos circulos</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script>
var w = 160, h = 120;
var svg = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",500);
var data = [7500000,15000000];
var scaleX = d3.scaleLinear().domain([0,1]).range([w/4,3*w/4]);
var area = d3.scaleSqrt().domain([0,15000000]).range([0,50]);
svg.selectAll("circle")
.data(data).enter().append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "3")
.attr("cx", function(d,i) { return scaleX(i); } )
.attr("cy", h / 2)
.attr("r", area );</script>
</body>
</html>