Second Visualization

Based on the first visualization implementation, to better visualize the data, our group chose P5, D3 languages, and Leaflet to explore more valuable information.

1.Visualization by using P5

Further format the data

After the first implementation, we find some problems that needed to be solved. Our data set has multiple rows for each city with different information, like company name company rate, and average salary. So that results in we had several points that were overlapped in one position in our first implementation.

To solve this issue, we use R to group the data concerning city and state, then calculate the average value for variable average salary, maximum salary, minimum salary, company rate and count the total number of job positions in each city.

Further rich the visualization on the map

Next step, we use the arc() function in P5.js to draw the nested arc based on the information of each city, the figure is shown in below.

This nested arc can represent much more information than the ellipse. For example, from the picture below for the city Mount Laurel, the color of a small circle in the center represents the average salary; From inner to the outer side, the first arc represents the company rate, the second arc represent the salary from minimum to maximum, and the final outer arc represents the number of job position. We can see for city Philadelphia, the light blue arc in the position around 180° that also indicate the biggest number of the job position is twice than that value, which is true. What’s more, we use the hover effect to zoom in the nested arc and show some texts to make this visualization more clear and more readable.

2.Visualization by using Leaflet

In the second implementation, we tried to visualize the data set on multiple levels using multiple methods. The following is a visualization of the number of job vacancies in each state by using Leaflet. Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

As we can see, there is a marker for the state on the map if there are open positions in the state. Once we click the marker, it will show us a popup with the name of the state and the number of job vacancies. We can also add extra information to the popup, e.g., average salary.

3.Visualization by using D3

In the second visualization implementation, our team wanted to make more useful interactive visualizations, so we also tried the D3 language in JavaScript.

To display the map data, first load GeoJson data, and then use the path generator function to convert GeoJson coordinates into Svg code to generate a visual map. After binding the data to the map, use the path function to make different data areas display different colors.

The shades of the colors in each state indicate the average salary, and moving the mouse to the corresponding state will display the detailed data of the corresponding area.

In order to improve the visualization, we will try to add color legends on this basis to make the visualization richer.

4.Further plan

In the next exploration, we intend to link the existing maps with each city and state. By means of hyperlinks, clicking on a different state or city will show visual charts of the corresponding region.

Meanwhile, we have no intention to use d3.js along with p5.js. These two libraries use different paradigms and ways of rendering, so mixing them without care will create cryptic and low performance code. We will show the visualization results of D3 and P5 separately.

Thanks for your time!

Any suggestion is welcome!