A race visualization for the streaks

I see the strikes at the right hand side of the site, but there is a massive gap between the few at the top and the rest. It's hard to see how much longer the longest streak are.

I was thinking it would be fun to see people's avatars in a race-like visualization. The top streak is at 100% width, and the rest are proportional to that one.

I'd be happy to play around with it if there's an API to get the streaks might have some data you could play with. You can just scrape it super easily since there’s only the leaderboard in there:)

Agree, cool concept. cc @marc

Nice! We have a similar leaderboard for being helpful in the posts section: (right hand side)

There's an API ( ) but we don't have a good way to fetch the top users by streaks and there's too many users to fetch all of them.

But I guess you can use the homepage streak leaderboard as a starting list and then each day check their streak to update.

I'll look into the API and see what I can find. Worst case I could scrap as @lvca suggested!

I'll see if I can find some time to have fun with this visualization!

FWIW, being available as a separate page is actually a bug 😅

The homepage streak leaderboard is loaded through an iframe-like method where it fetches that URL. But that URL isn't supposed to be access directly so it might not continue to work.

You might also run into Cloudflare's anti-bot measures when trying to scrape. So the API is really the best way. If you end building this, I might be able to add some filter/sorting feature to the API so you can fetch the top 100 streaking users.

After playing around with GraphiQL for a bit, it looks like I can only get the streak for a given userID. I can get a bunch of users by accessing the Projects or Todos, and getting the users from them, but I'm guessing that is far from ideal 😅

How hard would it be to expose the Users? That way I could do all the sorting/filtering in Node. Is not like I'd be able to add thousands of users in a visualization, so the top100 would work as well :)

You can now get the top 100 users with the API. Please use a valid API key as I'll probably make it required for this end point.

  users(orderBy: {streak: desc}) {

Nice! Thanks a lot. That was very fast.

So far GraphiQL has complained if I didn't provide an API key, so I have it set on the headers.

I've been playing around with the endpoint and it's working great. Next step is to build the visualization 💪

Here's the first iteration…

It's a prototype where I've added a few sliders to tweak a few things to see what looks better.

Let me know your thoughts. And I can continue iterating or build a final version.