164
Codeforces Rating-Based Heatmap is a browser extension (Chrome + Firefox supported) that enhances the Codeforces profile page with a powerful, rating-driven heatmap visualization — designed to reflect not just how often you solve problems, but how hard those problems were.
The default Codeforces heatmap tracks the number of problems solved per day, but it treats all problems equally. Solving a Div3 A (easy) or a Div1 D (very hard) appears the same — leading to misleading impressions of effort or growth.
This extension solves that by assigning color intensity based on the highest-rated problem solved each day. It provides a true reflection of effort, learning trajectory, and streak quality.
🎨 Rating-Based Heatmap:
Each day is colored based on the hardest problem solved — higher difficulty = deeper color. Understand effort at a glance.
🖱️ Hover Tooltips:
Hovering over any day shows:
List of problems solved
Problems rating
Direct links
Duplicate problems marked separately (solved earlier)
📆 Year Selector:
Switch between years to analyze long-term growth, past contest phases, or break periods.
⚪ Duplicate Problem Detection:
If a problem is solved more than once (e.g., for practice or review), it appears in gray, helping you distinguish revisits from fresh attempts.
🕵️ Analyze Other Profiles Too:
Want to see how a top coder climbed the ranks?
Visit their Codeforces profile, and this extension will instantly show their problem-solving patterns over time.
Motivates Consistency: You see how strong your streaks are, not just how long.
Promotes Smart Practice: Focus on the quality of problems solved, not just quantity.
Stalk Your Friends' Progress: Curious about how your friends are training? Check their Rating-Based Heatmap from their profile to understand the dedication behind their progress.
Install from Chrome Web Store or Firefox Add-ons.
Visit any Codeforces profile (e.g., https://codeforces.com/profile/your_username)
Scroll down — the rating-map appears below the default heatmap on the page!
Hover over a day to view solved problems and ratings.
JavaScript (Vanilla)
D3.js for rendering SVG heatmaps
CSS (minimal custom styling)
Codeforces Public API
Special thanks to the Codeforces community for feedback and suggestions — many small features were born directly from user insights.
Built with