New to WIP?

We're a group of makers shipping together. We help each other stay accountable and reach our goals.

Apply for access
Other questions
What's your go to 'in-the-zone' music playlist? 8 answers
Anyone with US LLC for your products? Q about Tax filing Charges 5 answers
Q about WIP, can't change telegram 2 answers
Rails 7/Turbo content_security_policy (CSP) setup? Be the first to reply
Back
Question
Asked

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

Daniel Reina
@dgrcode

👋 Join WIP to participate

Luca
@lvca

WIP.co/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

Reply

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

There's an API ( wip.co/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.

 Reply
Daniel Reina
@dgrcode

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

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

 Reply

FWIW, wip.co/streaks 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.

 Reply
Daniel Reina
@dgrcode

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 :)

 Reply

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}) {
    username
    streak
    best_streak
    url
  }
}
Reply
Daniel Reina
@dgrcode

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 💪

 Reply
Daniel Reina
@dgrcode

Here's the first iteration www.dgrcode.com/wip-streak-ra…

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.

 Reply