This is my implementation of Free Code Camp's Visualize Data with a Choropleth Map project.
Built an app that is functionally similar to this. Fulfill the below user stories. Give it your own personal style. You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library.
Datasets provided by freeCodeCamp US Education Data and US Country Data.
User stories:
- User Story #1: My choropleth should have a title with a corresponding
id="title". - User Story #2: My choropleth should have a description element with a corresponding
id="description". - 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-fipsanddata-educationproperties 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
id="legend". - 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-educationproperty that corresponds to thedata-educationof the active area.
Web browser: Google Chrome (recommended)