Link to project (still in progress): http://ngocdo67.github.io/cwp-map/
My partner’s goal for this project is to create an interactive map of the region, which consists of 37 towns and cities in Connecticut. The map would have five tabs regarding the following information: number of people served, median age, median household income, poverty, and unemployment rate. For each tab, when the users hover the mouse over each town, they would see the key data points in the information window. On the other hand, when they click on each town, the link that leads to the PDF file containing that town’s profile would pop up. The first tab, which shows the number people served, would be the default tab that appears on the organization’s website. This would be the only tab in which all the towns are colored yellow. In the other four tabs, the colors for the towns would be different shades of yellow from light to dark depending on the data of that town. Furthermore, the project should be sustainable, which means that the data should be easy to update and there should be detailed instructions on how to do so.
Steps I have completed:
- Discussed with my community partner to present the available options and understand their preference
- Created multi-tabbed Leaflet map of the region
- Created the map so that users can hover and click on the towns for information
- Created the data file for the first four tabs
- Tried different fill colors for the map
Steps to be done:
- Insert the data of the fifth tab into the map once I receive the data
- Decide on the appropriate fill color for the map
- Calculate the break between ranges of colors for the multi-colored maps
- Minor changes in the information window and reference at the bottom of the map
- Write a detailed instructions on how to update the data
- Create a legend for the map
Nora, I like how you have found a way to label the states because I know you have had trouble with labeling in Google Fusion. I really like how you used the tab template from leaflet to show the different categories and how you also used the hover template from leaflet. The hover option is more user friendly and I like how you also included a link to the pdf file of your data. This will allow the audience to have an alternate way of viewing the visual. In addition, it was very wise of you to make the background transparent and highlight the area of your focus.
Suggestions for Improvements: Add a legend on each tab that shows the range of colors. To experiment with the color for each tab because the tab colors are similar. What has worked for me is to just play around with color options because you have said in class that color brewer wasn’t helpful. If you want something distinguishable, play with dark and light colors of multiple colors. Not just dark yellow and light yellow. Try orange and yellow or orange, yellow and red. Colors that compliment each other but are subtly distinguishable. Also, you can play with the border color to darken it and have the fill color lighter to highlight certain areas. Other than that, I know you are waiting for data for the fifth tab. Best of Luck!
Hey Nora, I really how your map has different variables that the user can select: Median Age, Poverty, Median Income, and etc. Also, when you click on each town, it gives you the town profile based on the tabs. It makes the leaflet more user friendly this way which is very cool.
Suggestions: I notice that the colors are very similar and it can be confusing to the person who is viewing this map. I suggest each tab has its own separate unique color. When it has its own color, make sure each town shows different ranges of that color. For example, the unemployment category, not every town has the same unemployment rate therefore there should a wider ranges of that color based on the given data. Overall, you are close for it to be perfect! Good luck!