Alternatives for ranking animations

时间:2019-01-07 13:21:44

标签: jquery animation statistics frontend

This isn't a question regarding "better" alternatives, but more up-to-date/maintained alternatives.

I want to implement a live-updated ranking animation for a songlist voting system. Now I am not much of a front-ender but several people have done what I am looking for in the past, the one that mostly does what I want is this one: Codepen

 <script>
var app;
window.addEventListener('DOMContentLoaded', function () {
  app = new RankingApp('#ranking').start();
});

// {{{ !Demo
var timer1, timer2,
    CHARS = [
      'lorem ipsum'
    ];

function stop() {
  clearInterval(timer1);
  clearInterval(timer2);
}

function rand (min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randElm(array) {
  return array[rand(0, array.length - 1)];
}

function createRandomItem() {
  var i = 0, iz = 0,
      userName = '',
      item = new RankingItem();

  item.userId = rand(1, 0xFFFF);
  for (i = 0, iz = rand(4, 12); i < iz; ++i) {
    userName += randElm(CHARS);
  }
  item.userName = userName;
  item.score = rand(0, 99);
  return item;
}

setTimeout(function () {
  var i = 0, iz = 0;

  for (i = 0, iz = rand(4, 8); i < iz; ++i) {
    app.ranking.insert(
      createRandomItem(),
      rand(1, app.ranking.items.length + 1)
    );
  }
  timer1 = setInterval(function () {
    if (!app.ranking.items.length) { return; }
    app.ranking.move(
      randElm(app.ranking.items),
      rand(1, app.ranking.items.length)
    );
    randElm(app.ranking.items).score = rand(0, 99);
  }, 1009);
  timer2 = setInterval(function () {
    app.ranking.move(
      randElm(app.ranking.items),
      rand(1, app.ranking.items.length)
    ).move(
      randElm(app.ranking.items),
      rand(1, app.ranking.items.length)
    );
    randElm(app.ranking.items).score = rand(0, 99);
    randElm(app.ranking.items).score = rand(0, 99);
    if (app.ranking.items.length <= 1 || app.ranking.items.length <= 99 && rand(0, 1)) {
      app.ranking.insert(
        createRandomItem(),
        rand(1, app.ranking.items.length)
      );
    }
    if (app.ranking.items.length >= 100 ||  app.ranking.items.length >= 2 && rand(0, 1)) {
      app.ranking.remove(randElm(app.ranking.items));
    }
  }, 3001);
}, 500);
// }}} !Demo

Yet it is rather old code and at some point starts showing buggy behaviour. Other rare alternatives I find through search engines are also dated 2011/2012. Since I am hoping to run this app for more years to come, I'd rather want something more recent or updated preferrably with a newer version of for example jQuery.

I've looked at D3 charts but none of them seem to do the ranking like the example above. Any alternatives would be greatly appreciated.

0 个答案:

没有答案