Illustrator artwork

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  
  <svg width="580" height=400>
    
    
    <g id="circles">
      <circle id="circle10" cx="37.5" cy="84" r="28.1"/>
      <circle id="circle9" cx="93.6" cy="84" r="28.1"/>
      <circle id="circle8" cx="149.7" cy="84" r="28.1"/>
      <circle id="circle7" cx="205.8" cy="84" r="28.1"/>
      <circle id="circle6" cx="261.9" cy="84" r="28.1"/>
      <circle id="circle5" cx="318.1" cy="84" r="28.1"/>
      <circle id="circle4" cx="374.2" cy="84" r="28.1"/>
      <circle id="circle3" cx="430.3" cy="84" r="28.1"/>
      <circle id="circle2" cx="486.4" cy="84" r="28.1"/>
      <circle id="circle1" cx="542.5" cy="84" r="28.1"/>
		</g>
    
    <text id="title" transform="matrix(1 0 0 1 9.4141 31)" class="st0 st1">This is my title</text>
    
    
  </svg>
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var svg = d3.select("svg");
    var circles = svg.selectAll("circle");
    
    var myData=[30,21,150,14,31,33,11,254,100,52];
    
    //select everything of a certain type
    circles
      .attr("opacity",function(d,i){
      	return myData[i]/100;
    	})
      .attr("r",10)
    
    //select a specific thing
    d3.select("#circle3").attr("fill","red");
    
    //add interactivity
    circles.on("mouseover",function(d,i){
      d3.select(this).attr("r",20)
      var myid = d3.select(this).attr("id")
      d3.select("#title").text("Just moused over "+myid)
    });
    circles.on("mouseout",function(d,i){
      d3.select(this).attr("r",10)
      d3.select("#title").text("This is my title")
    });
    
    //animate
    circles
      .transition()
      .duration(1000)
    	.ease(d3.easeBounce)
      .attr("cy",function(d,i){
      	return 100+myData[i]
    	})

</script>
</body>

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