3.0 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa6367417b2b2512bbf | Visualize Data with a Choropleth Map | 3 | 301465 | visualize-data-with-a-choropleth-map |
--description--
Objective: Build an app that is functionally similar to this: https://choropleth-map.freecodecamp.rocks.
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. في حال كُنت تستخدم مكتبة (frontend framework) مثل Vue، فإن نتائج الاختبار ربما تكون غير دقيقة بسبب أنَّ المحتوى ديناميكي. نتمنى أن نتوافق معهم في القريب العاجل، لكن هذه المكتبات غير مدعومة لمشاريع D3 حالياََ.
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-fips and 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 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-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:
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json - US County Data:
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
You can build your project by using this CodePen template and clicking Save to create your own pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Once you're done, submit the URL to your working project with all its tests passing.
--solutions--
// solution required