Map Screenshot Final

The CUNY Student Population Fall 1990-2021 - d3.js Point Map is an animated point map that shows the student population of all 25 City University of New York (CUNY) colleges and transitions through the years from 1990 through 2021 counting up at a rate of about one year every one and a half seconds. It includes a Play/Pause button for the animation, as well as an animation Reset button to start the animation over at 1990, and filters for year and college that can be used while the animation is either playing or paused. You can zoom in or out on the map by scrolling your mouse wheel over any part of the map or by pinching/spreading two fingers on your track pad. You can also click and drag the map to center different map areas in the viewing window. By hovering over any of the circles on the map a tooltip will appear with the student population data details related to that circle.

Map Screenshot Tooltip

This map was completed as a final project for DATA73200-Interactive Data Visualization, a core course at the CUNY Graduate Center in the Data Analysis and Visualization Master’s Degree Program. The topic, however, was inspired by a request made last year by the CUNY Chancellor to CUNY’s Office of Applied Research, Evaluation, and Data Analytics (OAREDA) where I work in CUNY’s Central Office. The chancellor wanted geographic demographics for the CUNY student population during the COVID-19 pandemic and we found that we were unable to give him complete information due to lots of messy or missing data in our database. As a result, I was inspired to take on the task of cleaning up the data that became the primary dataset for this project.

Data Sources, Documentation, References

The main data set is a csv table of geographic data related to the entire CUNY student population from 1990 to 2021 that was extracted via SQL from the OAREDA database. The database table was developed by matching up valid zip codes from the students’ home or mailing address in CUNYfirst or a historic address lookup table in the OAREDA database (whichever had a valid 5 digit zip code first, in that order) with a zip code lookup table that was downloaded from an online source. Records missing zip code values were then analyzed by city and state to see if the general geographic location could be filled in without a zip code. It has one record per student, college, and term combination, so students who attend more than one CUNY institution in the same term are duplicated at the CUNY-wide level (although I have plans to deduplicate the CUNY-wide data in the future).

The complete dataset was over 4 GB in size so further filtering and cleaning was needed to prepare the data for mapping. First, the full list of variables (below) was narrowed down to include only the ones marked in bold italics:

  1. TERM_ENROLLED_DATE,
  2. YEAR_ENROLLED,
  3. SEMESTER_ENROLLED_CODE,
  4. SEMESTER_ENROLLED_DESC,
  5. COLLEGE_ID,
  6. COLLEGE_CF_INSTITUTION,
  7. CITY_HOME,
  8. STATE_HOME,
  9. POSTAL_HOME,
  10. COUNTRY_HOME,
  11. CITY_MAIL,
  12. STATE_MAIL,
  13. POSTAL_MAIL,
  14. COUNTRY_MAIL,
  15. CITY_ADD_DIM,
  16. STATE_ADD_DIM,
  17. POSTAL_ADD_DIM,
  18. CITY,
  19. STATE_ABBR,
  20. ZIP5,
  21. ZIPCODE_CITY_DESC,
  22. ZIPCODE_CITY,
  23. ZIPCODE_COUNTY,
  24. ZIPCODE_COUNTY_CODE,
  25. ZIPCODE_COUNTY_DESC,
  26. ZIPCODE_STATE_CODE,
  27. ZIPCODE_STATE_DESC,
  28. NYC_NEIGHBORHOOD,
  29. COUNTRY_CODE,
  30. COUNTRY_DESC,
  31. LATITUDE,
  32. LONGITUDE

Next, the data was grouped by all remaining fields and aggregated, and then filtered to include only the Fall semesters and only students who live in the 5 boroughs of NYC (Manhattan, Staten Island, Bronx, Queens, and Brooklyn) or in Westchester, Putnam, Rockland, Nassau, or Suffolk county in New York, or in Bergen, Hudson, Essex, or Union county in New Jersey to reduce the file size and restrict the map region. While working with the data it became apparent that some additional data cleaning could reduce the quantity of missing data points even further and so the following changes were made that will be incorporated into the OAREDA production database in the near future:

An additional a geojson data set for mapping the NYC area by zip code boundaries was downloaded from opendatasoft and then converted to the WGS84 coordinate reference system using QGIS.

Design Process

The CUNY Brand Voice Guidelines document was used to determine much of the styling for the map, particularly the colors and font. CUNY’s preferred font, Trade Gothic Next, was not available so I chose their alternate font, Arial, and the blue and orange are secondary colors that are both darker shades of the two primary CUNY colors. I chose complimentary colors to make the points really ‘pop’ against the dark background but toned down the brightness by using some opacity so that it wouldn’t be too hard on the eyes.

I chose to use d3.js for coding rather than another mapping tool like leaflet because I wanted full control over the visual aesthetic of the background map itself, and because I have future plans to use the same geojson file to make an additional choropleth map.

Extra care and attention was paid to the CSS styling to try to ensure that the visual emphasis was on the map and the title and not on interactive elements like dropdown menus, and to try to give the map a professionally produced look and feel so that it might be able to be presented to CUNY upper management.

Compare this screenshot of a late draft to the screenshot of the finished map above:

Map Screenshot Draft

In this draft, the contrast of the white buttons on the blue background takes too much visual attention away from the main focus, which should be the map. In addition to centering the title text and menu options, in the final version, the buttons and dropdowns were styled so that they almost blend into the background while at the same time still being immediately noticeable.

A lot of attention was also paid to ensuring that the map is responsive and reacts to resizing the window or viewing on different screen sizes, however it is not yet designed to be viewed on anything smaller than a large tablet. When viewed on a laptop screen the animation buttons and filters drop below the scrolling instructions as a group.

Map Screenshot Small Screen