A race visualization for the streaks

Question

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

Luca · Accepted Answer

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

Marc Köhlbrugge · Answer

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

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

Daniel Reina · Answer

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

Marc Köhlbrugge · Answer

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.

```graphql
{
  users(orderBy: {streak: desc}) {
    username
    streak
    best_streak
    url
  }
}
```

Daniel Reina · Answer

Here's the first iteration https://www.dgrcode.com/wip-streak-race

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.

Daniel Reina · Answer

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 💪

Marc Köhlbrugge · Answer

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.

Daniel Reina · Answer

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!

Go to Homepage	`g` `h`
Go to Done Todos	`g` `d`
Go to Questions	`g` `q`
Compose a New Todo	`n`
Go to Search	`/`
Show this dialog	`?`

A race visualization for the streaks

Keyboard Shortcuts