A Harvard College CS50 Project: International Student Data Visualization Website 

For Harvard College CS50’s final project, together with my teammate Rae Gao, I constructed an international student data visualization website using HTML/CSS/JS, D3.js, and Leaflet.js. It provides interactive visualizations of international student statistics and related data for US higher education institutions.

The Problem

As international students ourselves, we often find a lack of information on international student-related statistics or information on US higher institutions’ websites - what has been written there was either too general or not addressing the critical needs for international students. Therefore, we were motivated to create a data visualization website that provides important information on topics that we and other international students who either plan to or are studying abroad at US higher education institutions care about, including diversity, safety, school rankings, tuition/financial aid opportunities, and career possibilities in the US.

Target Users

Our project targets international students seeking to attend or currently studying at universities in the US. It aims to provide valuable insights into the number and distribution of international students across fields, their countries of origin, academic levels, trends in OPT and H1B programs, and safety indices and financial aid for schools. This information will also prove useful to universities for reference purposes and academic researchers conducting studies in this area.

The Approach & Technical Decisions

To achieve this, we aimed to incorporate various features such as interactive maps, bar charts, and graphs to display the following data:

• Number of international students by US regions and states
• Number of international students by place of origin
• Number of international students by academic levels (grad, undergrad, non-degree)
• Number of international students by field of study
• Leading US institutions hosting international students
• US colleges/grad schools that offer the most financial aid to international students
• Safety index in top US universities/liberal arts colleges
• Number of OPTs issued Number of H1B applicants Number of H1Bs issued

We used Leaflet to construct our interactive map. Leaflet.js provides a variety of functionalities, including the ability to zoom and pan, and interact with mouse events. It is compatible with multiple data sources, such as GeoJSON, and CSV files, allowing for data visualization on the map, which is the best fit function for our map.

We chose to use the Javascript D3 charting library to create our charts and graphs. There are also other charting libraries like Chart.js, however, since we also want to include interactivity functionality to our charts and graphs, D3.js is a good choice for the following reasons:

• D3.js can provide a high level of flexibility, allowing us to create custom and interactive charts and graphs;
• D3.js can support various chart types, including bar charts, line charts, scatter plots, etc. This also suits our need to include both bar charts and line charts on our data visualization website;
• D3.js uses SVG to create interactive data visualizations using vectors, which means that the charts or graphs can be scaled up or down without becoming pixelated.

Video Presentation

Skills Involved

Computer Programming (HTML/CSS/JS), Data Analysis, Data Visualization, Project Management