CFLens
CFLens: See beyond the Code
CFLens is a comprehensive data visualization tool designed to analyze and visualize various aspects of the competitive programming platform Codeforces. This project leverages the Codeforces API and other online sources to provide insightful visualizations that help users understand trends performance metrics and problem distributions on Codeforces.
🚀 Demo
🧐 Features
Here’re some of the project’s best features:
- Race Bar Chart: Displays the ratings of top coders over time with dynamic visualization showing top 10 coders and interactive elements.
- Donut Chart: Shows the distribution of problems across different tags on Codeforces with options to view all tags or only the top 10 tags and interactive tooltips.
- Choropleth Map: Visualizes the rating statistics of users from different countries displaying average and maximum ratings by country with interactive map elements and detailed views of top organizations.
- Line Chart: Compares the ratings of two users over time with user input to select users interactive elements for exact rating display and legends for differentiation.
- Radar Chart: Shows the time distribution of solves in a contest with user input for contest ID and usernames displaying time spent on each problem as a percentage and interactive features.
- Bump Chart: Displays the relative ratings of friends in a contest showing data for 9 users tracking changes at 15-minute intervals and including interactive elements.
- Heatmap: Visualizes the daily submission data of a user showing the number of submissions per day on a calendar with interactive elements displaying submission details and a legend for color mapping.
- Funnel Chart: Shows submission statistics of a contest displaying the number of users who solved 1 2 3 etc. problems with interactive elements and a color gradient.
- Radial Bar Chart: Displays the submission language data of a user showing the number of submissions made in each programming language breaking down submissions by verdicts and including interactive elements and a legend.
🛠️ Installation Steps:
1. Install the dependencies for the React app.
npm install
2. Start the react app.
npm start
💻 Built with
Technologies used in the project:
- React JS
- D3 JS
- Python
- HTML
- JS