frontend + d3
Published
Edited
Jan 5, 2021
class FakeUserCreator {
constructor() {
this.abbrMap = {};
return this;
}
createUser(maxSize) {
const name = faker.internet.userName();
let abbr = name.slice(0, 2).toUpperCase();
this.abbrMap[abbr] = (this.abbrMap[abbr] || 0) + 1;
if (this.abbrMap[abbr] > 1) abbr = `${abbr}${this.abbrMap[abbr]}`;
const win = parseInt(Math.random() * maxSize, 10);
const lose = maxSize - win;
const icon = `${faker.image.imageUrl(150, 150, 'abstract')}?${abbr}`;
return {
win,
lose,
abbr,
name,
icon
};
}
}
createFakeUsers = maxSize => {
const creator = new FakeUserCreator();
return Array.from({ length: maxSize })
.map((u, i) => creator.createUser(maxSize))
.sort((a, b) => (a.win - a.lose > b.win - b.lose ? -1 : 1))
.map((u, i) => ({ ...u, rank: i + 1 }));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
