A US choropleth map with the concentration of PM2.5 of each county from 2000 to 2018.
The data I propose to visualize in my project is from Two Decades of Pollution in US.
The data of concentration of PM2.5 is presented by the shade of color of each county in the US. The deeper the color refers to the higher PM2.5 concentration in that area. And there is a slider on the bottom of the map enabling users to switch the year they want. The slider will shift automatically after the initialization of the website to present the changes of PM2.5 concentration over year.
This rough prototype is implemented by VegaLite API without adding the slider on the bottom. Besides the cholopleth map of Alaska and Hawaii are not actually shown as they are transparent. The final deliverable will be finished by using React & D3. Inspired by Choropleth.
The following tasks and questions will drive the visualization and interaction decisions for this project:
- Which areas of US has the relatively high concentration of PM2.5 in each year? What about the areas with the relatively low concentration?
- What are the tendencies of PM2.5 in each county US over time?
- Is there a correlation between the year and the PM2.5 concentration?
So far I'm not sure how to realize the animation by d3 as well as how to load a portion of data in a single time frame because the data source contains all of the 18 years of the PM2.5 concentration value which needs to be presented year by year.
| task | estimated delivery week |
|---|---|
| deal with the "NA"s in the csv file | before week 7 |
| draw the wireframe of the USA with county | before week 7 |
| fill the wireframe by colors based on a single year of concentration data | before week 8 |
| enable zoom in & zoom out | before week 8 |
| add a slider at the bottom of the map | before week 8 |
| show the concentration of a random year between 2000 and 2018 | before week 9 |
| show the tooltips of each county's concentration | before week 9 |
| enable the changes of the concentration by sliding from 2000 to 2018 | before week 9 |
| finish the final project proposal | before week 10 |
| finish the portfolio video | before week 10 |
The end of each week is assumed on Wednesday.
The final deliverable is completed mainly based on the sketches and prototype except for some minor changes such as shifting the position of the color legend and the slider, reversing the color legend, and so on. Besides, the slider will start to shift only after clicking the 'play' button instead of shifting once the webpage is initialized.
Finished by 10/14
- Filled the area with no data record by grey color.
- Drew a wireframe of the US map with counties.
- Filled the wireframe by the PM2.5 concentration data in 2000.
Finished by 10/21
- Added a slider to let users choose the year of concentration (the change of value after sliding is yet to be done).
- Added a color legend to show a correlation between color and value of concentration.
Finished by 10/28
- Finished the year slider.
- Added transitive animation on color while switching year.
- Added tooltips to show the county, state, and the value of concentration while hovering on each county.
Finished by 11/04
- Added the mesh of the states.
- Added four ticks on the color legend to show the quantile of the concentration.
- Added a play button to enable slider to switch the year all way down to 2018 automatically.
- Highlighted the county border while hovering.
- Assmble zoom in/zoom out
- Performance optimization