---
id: 587d7fa6367417b2b2512bbf
title: Visualize Data with a Choropleth Map
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: 使用等值线图可视化数据
---
## Description
目标:构建一个功能类似于此的CodePen.io应用程序: https : //codepen.io/freeCodeCamp/full/EZKqza 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML,JavaScript,CSS和基于D3 svg的可视化库。在每次测试时查询必需(非虚拟)DOM元素。如果您使用前端框架(例如Vue),则测试结果可能对动态内容不准确。我们希望最终能够容纳它们,但D3项目目前不支持这些框架。 用户故事#1:我的等值应该有一个带有相应id="title"
。 用户故事#2:我的等值应该有一个带有相应id="description"
的描述元素。 用户故事#3:我的等值应该有具有代表数据的相应class="county"
。 用户故事#4:县应该至少使用4种不同的填充颜色。 用户故事#5:我的县应该拥有包含相应的fips和教育价值的data-fips
和data-education
属性。 用户故事#6:我的等值应该为每个提供的数据点设置一个县。 用户故事#7:县应具有与样本数据匹配的数据fips和数据教育值。 用户故事#8:我的等值应该有一个带有相应id="legend"
。 用户故事#9:图例应至少使用4种不同的填充颜色。 用户故事#10:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#11:我的工具提示应该具有与活动区域的data-education
相对应的data-education
属性。以下是完成此项目所需的数据集:
- 美国教育数据:
https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json
: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json
- 美国县数据:
https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json
: https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json
您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完成后,将URL提交给您的工作通过所有测试的项目。如果卡住,请记住使用Read-Search-Ask方法。
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```