Илья

В предложенном варианте Виктор Л, по крайней мере у меня, есть баг, что в селекте появляются лишние года. Модифицировал код. Кораблик движется по клику как на точку, так и на выбор из выподающего списка, аналогично и текст меняется как при клике на точку, так и на выбор в селекте.

1) Модифицируем селект, чтобы в options value были года.

<select class="main-select " id="select">
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003">2003</option>
  <option value="2004">2004</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
</select>

Модифицируем генгерацию кружков, добавляем к каким годам они относятся в дата-атрибут.

svg.innerHTML += Array(count).fill(0).map((e, i) => {
      let len = seg * (i + 1), p = track.getPointAtLength(len);
      return "<g transform=translate("+[p.x, p.y]+") class"+(i?'':'=active')+">" +
             "  <circle data-len="+len+" r=11 data-year="+(2001+i)+"></circle>" +
             "  <rect rx=5 ry=5 x=-20 y=16 width=40 height=19></rect>" +
             "  <text y=30 id='"+(2001+i)+"'>"+(2001+i)+"</text>"+
             "</g>";
    }).join('');

// Другой код без изменений

// Модифицируем обработчик клика по кружку
circles.forEach(c => c.onclick = e => {
      circles.forEach(c1 => c1.parentNode.classList.toggle('active', c === c1));
      targets.push(+c.dataset.len);
      let root = c.parentElement;
        let text = root.lastChild;
        let circleYear = c.dataset.year; // получаем значение года из дата атрибута кружка, по которому произошёл клик.
      let div = document.getElementById('text');
          div.innerHTML = promoText[text.textContent].text;
        var x = document.getElementById('select');
        x.value = circleYear; // - устанавливаем значение селекта на то, которое совпадает с дата атрибутом данного кружка.
        $(x).niceSelect('update'); // Так как используется библиотека niceSelect, а значение мы поменяли на исходном селекте, то обновляем niceSelect.
        // x.options[x.selectedIndex].text= text.textContent; - код, который создавал, по-моему мнению, баг.
         
    });
    
    //Select
    $(document).ready(function() {
        $('select').niceSelect();

// Добавялем обработчик на изменение селекта, чтобы кораблик двигался, текст менялся. По факту, просто тригерим клик программно по кружку, у которого совпадающий по году дата-атрибут.
        $('#select').on("change", function () {
            $('circle[data-year="' + this.value + '"]').trigger('click');
        });
    });

По клику на метку добавляй data-len в массив и слегка измени логику работы render()