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.