Avoid collision in Bubble chart

I'm trying to make a horizontal bubble graph, but I don't know how to avoid collision between the bubbles. Each bubble represents a year and can have any value and size without colliding. How I can fix this?

D3 version

<script src="https://unpkg.com/d3@5.15.0/dist/d3.min.js"></script>

Js

var width = 1000;
var height = 500;

const data = [ { name: "2010", value: 2 }, 
               { name: "2011", value: 20 }, 
               { name: "2012", value: 8 }, 
               { name: "2013", value: 2 }, 
               { name: "2014", value: 31 }, 
               { name: "2015", value: 45 }, 
               { name: "2016", value: 20 }, 
               { name: "2017", value: 10 },
               { name: "2018", value: 5 },
               { name: "2019", value: 6 },
               { name: "2020", value: 1 }];    

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var g = svg.selectAll("g")
           .data(data)
           .enter()
           .append("g")
           .attr("transform", function(d, i) {
               return "translate(0,0)";
           });

g.append("circle")
  .attr("cx", function(d, i) {
      return (i * 100) + 50;
  })
  .attr("cy", function() {
      return 100;
  })
  .attr("r", function(d) {
      return d.value * 2;
  })
  .attr("fill", function(d, i) {
      return '#FF5532';
  });

g.append("text")
  .attr("x", function(d, i) {
      return (i * 100) + 50;
  })
  .attr("y", 105)
  .attr("stroke", "black")
  .attr("font-size", "12px")
  .attr("font-family", "sans-serif")
  .text(function(d) {
      return d.name;
  });

You can stack the bubble without saying exactly where they will be positioned, but rather positioning them conditionally to the previous one.

var currentCx = 0
const size_factor = 2

data = data.map(yearData => {
currentCx += yearData.value*size_factor
const _currentCx = currentCx

// This line is repeated, because the center of circle, 
// Is exctracted in the middle of the two sums
currentCx += yearData.value*size_factor
const _radius = yearData.value*size_factor

return {...yearData, cx: _currentCx, radius: _radius }
})

you can use cx, and radius values as-is in attr

.attr("cx", function(d, i) {
  return d.cx;
})
.attr("cy", function() {
  return 100;
})
.attr("r", function(d) {
 return d.radius;
})

Also don't forget to modify the text position accordingly, and to make var data (instead of const)