fabricjs

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas Scatterplot</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js"></script>
	<style type="text/css">
		.hiddenCanvas{
			display: none;
		}

div#tooltip {
			position: absolute;        
			display: inline-block;
			padding: 10px;
			font-family: 'Open Sans' sans-serif;
			color: #000;
			background-color: #fff;
			border: 1px solid #999;
			border-radius: 2px;
		    pointer-events: none;
			opacity: 0;
			z-index: 1;
		}
	</style>

</head>
<body>
<div id="container"></div>
<div id="tooltip"></div>

var y = d3.scaleLinear()
		.domain([2,8])
		.range([height, 0]);

// main canvas
	var mainCanvas = d3.select('#container')
		.append('canvas')
		.classed('mainCanvas', true)
		.attr('width', width)
		.attr('height', height);

var canvas=new fabric.Canvas(mainCanvas.node())
  var f=0
  data.forEach((d)=>{
      var c=new fabric.Circle({radius: Math.abs(d.r), fill: 'green', left: x(d.x), top: y(d.y)})
      canvas.add(c)
  })

</script>
	
</body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

https://d3js.org/d3.v4.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/d3-scale.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js