College Information Visualization
An interactive dashboard analyzing U.S. college data—admissions, affordability, academic background, and student demographics—through dynamic filters and tooltips. Built using web technologies and Tableau, this project makes it easy to explore trends and surface key insights about higher education institutions.
Tools
JavaScript, HTML, CSS, Tableau
Overview
I created this interactive visualization to explore U.S. college data in a way that feels intuitive and meaningful. The dataset included everything from SAT scores and admission rates to cost, income, and student demographics. I wanted to design a tool that didn’t just show the data—it helped users understand it.
Using a mix of JavaScript, HTML, CSS, and Tableau, I built a visual experience that makes it easy to spot patterns, compare schools, and dive into the details that matter most—whether that’s affordability, diversity, or outcomes after graduation.
Topics covered:
Data Visualization,
Interactive Filtering
Front-End Development
UI/UX for Data
Features &
Interaction Design
The x-axis is customizable, allowing users to explore different aspects of college data such as SAT scores, ACT median, school cost, student population, faculty salary, and average family income. A filtering tool lets users select and compare specific variables, making the visualization interactive and tailored to individual interests.
Exploring Different Dimensions of Data
The visualization allows users to switch the x-axis to compare different aspects of college data. In the example below, the x-axis has been changed from SAT Average to Admission Rate. As a result, the graph dynamically updates to reflect this shift, offering a new perspective on how admission selectivity relates to post-graduate earnings.
Public vs. Private Colleges
Each data point in the graph is visually coded by school type:
Solid circles represent public schools
Outlined circles represent private schools
This distinction is key when analyzing factors like cost, average family income, or student outcomes, which often vary significantly between public and private institutions.
Filtering by Institution Type
To help users focus their exploration, the control bar includes a filter to view either all schools, only public, or only private institutions. This allows for a more targeted analysis based on user interest or research needs.
Filtered View: Public Institutions Only
Here, the user has selected to view only public institutions. The graph responds by removing private colleges, making it easier to focus on trends within the public sector.
Image: Graph filtered to show only public schools
Regional Comparisons
Users can also compare colleges by geographic region. This is particularly helpful when researching options within a specific part of the country.
Zooming In: Southeast Region
In this filtered view, only colleges located in the Southeast region are displayed. This allows users to dive deeper into regional patterns and economic outcomes.
Interactive Tooltips: Quick Stats at a Glance
When hovering over any data point, a tooltip appears showing key details about the selected school. In this example, the user hovers over California Maritime Academy, and the tooltip displays its Admission Rate (x-axis) and Mean Earnings 8 Years After Entry (y-axis), corresponding to the current axis settings.
Clicking for Deeper Insight
Beyond hover, clicking a data point reveals an in-depth profile of the selected university. For instance, when Georgia Tech is clicked, a panel opens with detailed stats like region, control type, median debt, and a pie chart of racial demographics—offering a fuller picture of the school.
More Examples of In-Depth Views
Here, the user selects California Maritime Academy, and the details panel updates accordingly. The x-axis has been changed to ACT Median, so the tooltip and data reflect that change in context.
Flexible Metrics, Dynamic Tooltips
In this example, the axes have been changed again—Median Debt is now on the y-axis. The tooltip automatically updates to show the new metric values, demonstrating how responsive the tool is to different data configurations.
Big Picture + Drill Down
The visualization is designed to support both high-level pattern discovery and deep dives into specific schools.
At a glance, users can spot trends such as:
Which colleges have higher earnings outcomes
SAT or ACT score distributions
Which schools don’t require standardized test scores (e.g. those showing a score of 0)
These outliers can often tell a story—like identifying schools that are test-optional in their admissions.
Cost Trends by School Type
One notable trend the visualization reveals: Public colleges generally have lower costs than private institutions. With the filters and axis controls, users can easily validate these patterns across different schools and regions.
