Interactive College Rank Visualizer & Live Search & Autocomplete

[mohanish28]

The current frontend provides useful data tables and filters, but user experience can be significantly enhanced by introducing two key features:

1)Interactive College Rank Visualizer

  Replace static cutoff/prediction tables with a dynamic visualization.

   A “college ladder” chart (or interactive graph) where hovering over nodes shows seat acceptance trends.

   Allows users to visually compare clusters, branches, and ranks with ease.

2. Live Search & Autocomplete

    Enable search suggestions for colleges, branches, and categories while typing.
   
    Fetch suggestions using debounced API calls to minimize backend load.
   
    Helps guide users toward valid input values, improving speed and accuracy.
   

• Why It Matters

    Improves UX by making insights more visual and interactive rather than relying on static data.
  
    Smart autocomplete reduces friction, improves accessibility, and prevents invalid queries.
  
    Together, these features make the College Explorer more engaging, actionable, and user-friendly.
  

• Proposed Solution

     Implement an interactive visualization library (e.g., D3.js, Recharts, or Chart.js advanced modes) for rank and cutoff comparisons.
  
     Add a debounced search input connected to backend APIs, returning suggestions for colleges/branches.
  
     Provide fallback UI (loading states, error handling) for poor network conditions.
  

• Acceptance Criteria

✅ Hoverable graph/chart showing cluster-wise rank placements with tooltips.

✅ Live search suggestions appear within 200ms after typing.

✅ Debounce (≥300ms) to reduce API spam.

✅ Works seamlessly on mobile and desktop (responsive).

✅ Accessible with keyboard navigation and ARIA roles.

Labels: enhancement, UX, usability, level-3

[Ayu-Rawat]

@mohanish28
Thanks for the detailed proposal. The visualization idea is interesting, but for now we want to keep the existing table UI as it is. However, I fully agree that autocomplete would be a valuable addition. Let’s scope this issue specifically to implementing live search with debounced API calls and proper accessibility support.

[mohanish28]

@Ayu-Rawat can you go through pr

[Ayu-Rawat]

@mohanish28 I will after 29 september