Data Visualization Projects - Visualize Data with a Choropleth Map
- Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/EZKqza.
- Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
- User Story #1: My choropleth should have a title with a corresponding
- User Story #2: My choropleth should have a description element with a corresponding
- User Story #3: My choropleth should have counties with a corresponding
class="county" that represent the data.
- User Story #4: There should be at least 4 different fill colors used for the counties.
- User Story #5: My counties should each have
data-education properties containing their corresponding fips and education values.
- User Story #6: My choropleth should have a county for each provided data point.
- User Story #7: The counties should have data-fips and data-education values that match the sample data.
- User Story #8: My choropleth should have a legend with a corresponding
- User Story #9: There should be at least 4 different fill colors used for the legend.
- User Story #10: I can mouse over an area and see a tooltip with a corresponding
id="tooltip" which displays more information about the area.
- User Story #11: My tooltip should have a
data-education property that corresponds to the
data-education of the active area.
- Here are the datasets you will need to complete this project:
- US Education Data:
- US County Data:
- You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like:
- Once you're done, submit the URL to your working project with all its tests passing.
- Remember to use the Read-Search-Ask method if you get stuck.