Codeforces Rating-Based Heatmap Extension

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.

🔍 Why this matters

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.

📈 Key Features

• 🎨 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.

🚀 Why developers love it

• 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.

📌 How to Use

1. Install from Chrome Web Store or Firefox Add-ons.

2. Visit any Codeforces profile (e.g., https://codeforces.com/profile/your_username)

3. Scroll down — the rating-map appears below the default heatmap on the page!

4. Hover over a day to view solved problems and ratings.

🔗 Related Links

• 🔗 Codeforces Blog Announcement

• 💻 GitHub Repository

• 🌐 Chrome Extension

🛠️ Tech Stack

• JavaScript (Vanilla)

• D3.js for rendering SVG heatmaps

• CSS (minimal custom styling)

• Codeforces Public API

🙌 Acknowledgements

Special thanks to the Codeforces community for feedback and suggestions — many small features were born directly from user insights.