Rating-Based Heatmap: Visualize Real Progress!
Download from Chrome Web Store
Are you tired of the default Codeforces heatmap that merely tracks the number of problems solved without reflecting the actual effort behind each? Wouldn't it be great to see how much hard work you invested each day? Introducing the Codeforces Rating-Based Heatmap Extension — a clearer way to reflect your real progress!
Why Settle for Less?
The default Codeforces heatmap colors days based solely on the quantity of problems solved. It doesn't differentiate between solving easy Div3 problems or tackling complex Div1 challenges. This approach doesn't truly represent the difficulty you faced.
Additionally, some users may focus on solving easy problems just to maintain a streak. While streaks can be motivating, they don't always reflect real progress in problem-solving. True progress isn't just about maintaining streaks or solving easy problems. It's about stepping out of your comfort zone, facing challenges, and pushing your limits. Every tough problem you tackle brings you closer to becoming a stronger problem solver. With the Rating-Based Heatmap, this changes.
Note: The Rating-Based Heatmap will be added directly to your Codeforces profile page at codeforces.com/profile/YourUsername. Just visit your profile to see your progress visualized with a heatmap!
What Makes the Rating-Based Heatmap Special?
Rating-Based Visualization: Each day is highlighted based on the difficulty of hardest problems solved, not just the count. Higher-rated problems result in richer, deeper colors.
Effort Recognition: Clearly see the amount of effort you put into your practice sessions.
Hover for Details: Want to know what you solved on a particular day? Simply hover over any cell to view the exact problems and their ratings. This makes it incredibly easy to spot the days when you tackled the hardest problems.
Stalk Your Friends' Progress Curious about how your friends are training? Check their Rating-Based Heatmap to understand the dedication behind their progress.
Color Mapping
The heatmap colors are based on the highest-rated problem solved on a given day. Here’s the rating-to-color mapping:
| Problem Rating Range | Color |
|---|---|
| 3000+ |  Dark Red |
| 2600-2999 |  Bright Red |
| 2400-2599 |  Light Red |
| 2300-2399 |  Orange |
| 2100-2299 |  Light Orange |
| 1900-2099 |  Purple |
| 1600-1899 |  Light Blue |
| 1400-1599 |  Aqua Green |
| 1200-1399 |  Green |
| 0-1199 |  Gray |
Features at a Glance
Accurate Rating Heatmap: The heatmap color on a given day represents the maximum rating of a problem solved that day.
Quick Insights: Hovering over any day in the heatmap shows a tooltip with all problems solved on that day.
- The tooltip includes:
- Problem Name
- Problem Rating
- Direct Link to the Problem
Enhanced Motivation: Visualize your streaks and get a true sense of accomplishment.
Screenshots
Default Codeforces Heatmap
Rating-Based Heatmap
Rating-Based Heatmap with Hover Details
How to Get Started
Install the Codeforces Rating-Based Heatmap Extension from the Chrome Web Store.
Explore the code on GitHub.
Visit your Codeforces profile.
Watch your true efforts shine through the Rating-Based Heatmap!
Be Among the First to Try It
The Codeforces Rating-Based Heatmap Extension is now live, ready for you to experience a clearer view of your progress. Start using it today and see how your hard work translates into visible results.
True effort deserves true recognition. Experience it with the Codeforces Rating-Based Heatmap Extension!
EDIT:
Thank you all for the unexpected and overwhelming support. This has become my most upvoted blog, and I sincerely appreciate everyone who took the time to try out the extension.
UPDATE:
Now it is published on Firefox as well: Codeforces Rating-Based Heatmap on Firefox
Recent Improvements:
(Now available on Chrome and Firefox)
- Default View: Now displays the past 12 months, just like the Codeforces default heatmap.
- Duplicate Problem Fix: Solving the same problem again will display it as grey color text on hover without influencing the cell's color.
- Border Shadow Fix: Improved the appearance with a corrected border shadow.
I think the heatmap should be displayed for last one year until I make it for a specific year. I hope you will fix it.
Sure, got it! Similar to the codeforces one. I'll include this in the next update.
And another problem is, if I solve a problem which I solved before, it still colours the date. Hope you will make it similar to the codeforces one in this case also.
Great observation! It makes sense to prefer the first solved day since revisiting the same problems usually takes less effort, even though people might do it to try a different approach. While it's rare, I’ll fix this in the next update. Thanks for the feedback!
Wow, this is super cool! Finally, a heatmap that actually shows the effort, not just problem count. Definitely installing this — love the idea!
my coach: why did my li'le guys' heat map all turned gray?
lol
Bad news for self-deception enjoyers... Gotta find another way to fool the brain
What about Firefox?
Sure, I'm planning to add it on both Firefox and Edge soon!
You don't need to add it to Edge I think cuz edge supports all chrome extensions
Oh, that's good to know! Thanks!
Until the extension is added to the Firefox add-ons store, you can just clone the git repo, go to about:debugging#addons, click "Load Temporary Add-on" and navigate to and select the manifest.json file from the repo
Pretty Cool
Great extension, could you make the default view to be past 365 days instead of 2025, like in cf heatmap.
Thanks for the suggestion! I'm working on it, and it'll be added in the next update soon!
Really cool extension
much needed extension, thanks for it
thanks for coming up online after 3 years to upvote my blog
dei, he has one more account where he is LGM.
yaoxi, you must be a chinese people
super useful. nice way to track upsolving.
thanks da
Available for firefox please?
Yes, it is actually published and currently under review. Meanwhile, you can use the code from GitHub, load it unpacked, and update the manifest with the updated_manifest
It is a very good feature.
I just have one request: Can you please turn off shadow around the container of heat-map? Because none of other containers on CF have shadow and it looks unnatural to have one with shadow.
Sure, got it! Will fix that in the next update.
Please make it show past 12 months like the default heatmap does
Sorry for the wait! I've fixed it, and it should be available in about 3 days once it's reviewed and published on Chrome.
Nice!!!
thanks bro
Great Job!
firefox when?
It's already published but still under review. I'll let you know once it's live!
nice extension!!!!
I think it would be helpful if the colour mapping is present under the grid for reference.
That makes sense! Will consider adding it, thanks!
Good extension. I like it!
I tested on my firefox, the heat map works but the duplicated problem fix is still not here.
Anyway, It looks nice overall and I like it.
sorry for that, duplicate fix is still in review!!
This is the real heatmap to track your progress.
Perfect
Great work!!
It's actually gonna motivate me to solve more harder problems as i can actually see my heat map changing color based on my practice.
The text "problem-solving heatmap for {User Name}" i feel is unnecessary and takes away from the clean look of the feature. Love the extension tho!
Strong agree/+1 -- great extension, getting rid of this text is super easy and clearly a net improvement
Just to clarify -- I absolutely love love love this extension
I have been using this from past week and gotta say I love it, thanks a lot for this
Bad heatmap, it calls me out for not practicing hard enough :sob:
Good heatmap, I started practicing harder ever since it dropped :yay:
Cool extension!
nice work !!
Amazing extension man, can see what problems others are doing, what ratings, etc. I own a cf extension as well name Codeforces Lite, consider checking that out for dark theme and code execution directly from codeforces, got over 3000 users :)
The extensino breaks with your colors as they are not available for dark theme separately. Here's a way to customize your extension for my dark theme. If you want to collaborate with me, please make a PR by accessing classes you use for your colors and add colors in my extension. Mail me if you need any help.
Github: https://github.com/MaanasSehgal/Codeforces-Lite Extension: https://chromewebstore.google.com/detail/codeforces-lite-dark-mode/hgcgfmgjkfjmhoebifgmbfipinkkjgco Mail: maanas.sehgal@gmail.com