4.7 KiB
4.7 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7178d8c242eddfaeb5bd13 | Visualize Data with a Scatterplot Graph | true | 3 | 使用散点图可视化数据 |
Description
id="title"
的title元素。 用户故事#2:我可以看到一个x轴,其对应的id="x-axis"
。 用户故事#3:我可以看到一个y轴,它具有相应的id="y-axis"
。 用户故事#4:我可以看到点,每个点都有一个dot
,表示正在绘制的数据。 用户故事#5:每个点应具有包含其对应的x和y值的属性data-xvalue
和data-yvalue
。 用户故事#6:每个点的data-xvalue
和data-yvalue
应该在实际数据的范围内,并且应该是正确的数据格式。对于data-xvalue
,可以接受整数(全年)或Date对象进行测试评估。对于data-yvalue
(分钟),请使用Date对象。 用户故事#7: data-xvalue
及其对应的点应与x轴上的对应点/值对齐。 用户故事#8: data-yvalue
及其对应的点应与y轴上的对应点/值对齐。 用户故事#9:我可以在y轴上看到多个刻度标签,其中%M:%S
时间格式。 用户故事#10:我可以在x轴上看到显示年份的多个刻度标签。 用户故事#11:我可以看到x轴标签的范围在实际的x轴数据范围内。 用户故事#12:我可以看到y轴标签的范围在实际y轴数据的范围内。 用户故事#13:我可以看到包含id="legend"
描述性文本的id="legend"
。 用户故事#14:我可以将鼠标悬停在一个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#15:我的工具提示应该有一个data-year
属性,该属性对应于活动区域的data-xvalue
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.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
tests: []
Challenge Seed
Solution
// solution required