蜂群情节不会崩溃

$(function() {
  
  let $graphs = $('.graph')
  let $firstSetOfNames = $('.graph:first-child .graph-dd')
  
  const setup = () => {
    let longest = 0
    $firstSetOfNames.each(function() {
      longest = ($(this).width() > longest) ? $(this).width() : longest
    })
    $graphs.css('padding-right', longest + 'px')
  }
  
  const collides = ($e1, $e2) => {
    let e1x1 = $e1.offset().left
    let e1x2 = e1x1.x1 + $e1.outerWidth( true )
    let e2x1 = $e2.offset().left
    let e2x2 = e2x1.x1 + $e2.outerWidth( true )
    let x = ((e1x1 < e2x1) && (e2x1 < e1x2)) || ((e2x1 < e1x1) && (e1x1 < e2x2))
    let y = parseInt($e1.css('--y'), 10) === parseInt($e2.css('--y'), 10)
    return !!(x || y)
  }
  
  const collidesAll = ($people, $person, j) => {
    for (let i = 0; i < j; i++) {
      if (collides($person, $people.eq(i))) {
        return true
      }
    }
    return false
  }
  
  const swarm = () => {
    $graphs.each(function(i) {
      let $graph = $(this)
      let $people = $($graph.find('.graph-dd').get().reverse())
      $people.each(function(j) {
        let $person = $(this)
        let n = 1
        if (0 === j) {
          $person.css('--y', 1)
        } else {
          do {
            $person.css('--y', n++)
          } while (collidesAll($people, $person, j))
          $graph.css('--yMax', n)
        }
      })
    })
  }
  
  setup()
  swarm()
  
})

.graph {
  margin: 2rem;
  padding: calc(calc(var(--yMax, 0) * 1.1em) + 1rem) 1rem 1rem;
  border: 1px solid black;
  overflow: hidden;
}

.graph-dl {
  position: relative;
  display: flex;
  margin: 0;
  justify-content: space-between;
}
.graph-dl::before {
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  top: calc(50% - 0.5px);
  left: 0;
  right: 0;
  background: gray;
  z-index: -1;
}

.graph-dt {
  background: black;
  width: 1px;
  height: 1em;
  border: 0.5em solid white;
  margin: 0 -0.5em;
}
.graph-dt span {
  display: none;
}

.graph-dd {
  position: absolute;
  display: block;
  top: 0.5em;
  margin: 0 0 0 calc(-0.5ex - 1px);
  left: calc(var(--percent) * 1%);
  white-space: nowrap;
  transform: translateY(calc(var(--y, 0) * -1.1em));
  transition: transform 0.3s;
}
.graph-dd::before {
  content: "";
  display: inline-block;
  background: blue;
  width: 1ex;
  height: 1ex;
  vertical-align: baseline;
  border-radius: 100%;
  margin-right: 0.2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<figure>
  <dl>
    <dt><span>0</span></dt>
    <dd>Zaccaria Osmant</dd>
    <dt><span>10</span></dt>
    <dd>Nelli Dunge</dd>
    <dd>Ethelind Evers</dd>
    <dd>Juliet Francis</dd>
    <dt><span>20</span></dt>
    <dt><span>30</span></dt>
    <dt><span>40</span></dt>
    <dd>Myles Burdoun</dd>
    <dt><span>50</span></dt>
    <dd>Gregory Beade</dd>
    <dt><span>60</span></dt>
    <dd>Trenna Vigne</dd>
    <dd>Dulcia Koubu</dd>
    <dt><span>70</span></dt>
    <dd>Amberly Wrightham</dd>
    <dd>Barney Rawstorn</dd>
    <dt><span>80</span></dt>
    <dt><span>90</span></dt>
    <dd>Nealson Helstrip</dd>
    <dd>Asa Langwade</dd>
    <dd>Malvin Imlaw</dd>
    <dd>Joanie Clooney</dd>
    <dt><span>100</span></dt>
    <dd>Kristo Biskupski</dd>
  </dl>
</figure>
<figure>
  <dl>
    <dt><span>0</span></dt>
    <dt><span>10</span></dt>
    <dt><span>20</span></dt>
    <dt><span>30</span></dt>
    <dt><span>40</span></dt>
    <dd>Nelli Dunge</dd>
    <dd>Myles Burdoun</dd>
    <dt><span>50</span></dt>
    <dd>Zaccaria Osmant</dd>
    <dt><span>60</span></dt>
    <dd>Trenna Vigne</dd>
    <dd>Dulcia Koubu</dd>
    <dd>Ethelind Evers</dd>
    <dt><span>70</span></dt>
    <dd>Amberly Wrightham</dd>
    <dd>Barney Rawstorn</dd>
    <dd>Kristo Biskupski</dd>
    <dd>Joanie Clooney</dd>
    <dd>Juliet Francis</dd>
    <dd>Gregory Beade</dd>
    <dd>Malvin Imlaw</dd>
    <dt><span>80</span></dt>
    <dd>Asa Langwade</dd>
    <dt><span>90</span></dt>
    <dd>Nealson Helstrip</dd>
    <dt><span>100</span></dt>
  </dl>
</figure>