Fist Visualization in P5
To visualize the data, our group choose the P5 language in javascript, which is totally a new software for all of us. Before using the P5, we used python to process the data set, and Tableau to further explore the structure of the data, respectively.
1. Code on finding longitude-latitude coordinates
Firstly, what need to be mentioned here is the initial data set we used not includes latitude and longitude information. In order to visualize the map, we try to get the longitude-latitude coordinates for a (very long) list of cities by using Python and a free API. Therefore, we finally made some efforts to create two extra columns.
To set this up, we followed the tutorial given on the website: https://amaral.northwestern.edu/blog/getting-long-lat-list-cities.
To get API key from this website: https://opencagedata.com/
2. Map based on JavaScript library Leaflet
To construct ‘ The First Try’ by using P5, we made use of Mappa, P5.js and Leaflet. The picture below is the first look of our map. We can see that the demand of data science jobs are aggregated in the west coast, south, and the north-east respectively. Besides, the size of the ellipse is determined by the average salary, the bigger size corresponds to the higher salary.
3. Implement the hover effect
In order to draw the interactive map powered by leaflet, it is necessary to include a hover effect in the design, which can be seen below. We kept redrawing the ellipses, not only redrawing it when the map changes. And also we considered to redraw a bigger ellipse with the red colour, and show the information text when the position of mouse has been detected in the neighbourhood.
Despite we have achieved our first step, we still ran into some difficulties on how to further code what we want by using javascript.
4. Further plan
We plan to display the number of job vacancies for each state on the map using different colors. Also, we are planing to explore the sector with the highest demand for data scientists in each state, thereby giving job seekers a clearly direction, like figure below which drawed in Tableau. So, we need to further explore P5 in order to visualize our thoughts.
Besides, we are considering maybe we can use the arc() function in p5.js to draw the arc on map to make our visualization more richer, etc..
Thanks for your time!
Any suggestion is welcome, especially some useful P5 libraries…
