Map of Salaries of Fortune 1000 Tech Companies in the United States
Timeline: Nov 2021
Tools: HTML, CSS, d3.js
Role: Designer, Developer
Other Info: Class Project for Data-Driven Web Applications
Objectives of this assignment
- Create an interactive data visualization
- Make use of dynamic elements
- Integrate multiple data sources
The inspiration for this data visualization came from the idea that people may need to relocate for tech industry careers. When job seekers consider a position, they must think about cost of living and salary. The goal of the visualization is to give our audience an idea of the pros and cons of moving to a different city for a particular job.
Functionality
- Zoom and pan of the map
The user can zoom in an out of the map by scrolling and clicking on a state. To zoom out, the user can scroll or click the zoom out button which takes them back to the original view of the map. The user can pan the map by clicking and dragging.
- Tooltip (clicking) that displays companies, average salaries, and cost of living
When the user clicks on a city, it will display the companies with headquarters at that location, average salary at that location, and cost of living in that state.
Reflection
Some potential improvements to this visualization are:
-
More data/better data cleaning. The data provided by the map is rather limiting since it only displays companies with headquarters in those areas even though Fortune 1000 companies have offices in many other cities. The drawback of adding more cities would be that the map gets crowded, making it hard to extract information. It also would have been nice to have the cost of living of the city rather than just the state since cities within the same state can have vastly different costs of living. Some of our data can be cleaned better/researched better. For instance, our map displays Red Hat and IBM separately even though the parent company of Red Hat is IBM
-
Tooltip position. The position of the tooltip can be a bit awkward at times and it sometimes covers up the other cities. However, as we were coding it, we found it difficult to adjust the position of the tooltip dynamically as the user is interacting with the map. If we had more time, we should certainly figure out a way to position the tooltip better.
-
Filtering cities based on salary and cost of living. As mentioned before, overcrowding could be an issue if we decided to add more cities. One way we could combat this is if we allowed users to filter cities based on what salaries were being offered and cost of living.