4.3 KiB
4.3 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7188d8c242eddfaeb5bd13 | Visualize Data with a Heat Map | true | 3 | 使用热图可视化数据 |
Description
id="title"
。 用户故事#2:我的热图应该有一个相应的id="description"
。 用户故事#3:我的热图应该有一个x轴,对应的id="x-axis"
。 用户故事#4:我的热图应该有一个y轴,对应的id="y-axis"
。 用户故事#5:我的热图应该有一个rect
元素,其中class="cell"
代表数据。 用户故事#6:细胞应至少使用4种不同的填充颜色。 用户故事#7:每个单元格将包含属性data-month
, data-year
, data-temp
其中包含相应的月,年和温度值。 用户故事#8:每个单元格的data-month
, data-year
应在数据范围内。 用户故事#9:我的热图应该具有与y轴上相应月份对齐的单元格。 用户故事#10:我的热图应该具有与x轴上相应年份对齐的单元格。 用户故事#11:我的热图在y轴上应该有多个刻度标签,并带有完整的月份名称。 用户故事#12:我的热图应该在x轴上有多个刻度标签,年份在1754到2015之间。 用户故事#13:我的热图应该有一个带有相应id="legend"
。 用户故事#14:我的图例应该包含rect
元素。 用户故事#15:图例中的rect
元素应使用至少4种不同的填充颜色。 用户故事#16:我可以将鼠标悬停在某个区域上,并查看带有相应id="tooltip"
的工具提示,该id="tooltip"
会显示有关该区域的更多信息。 用户故事#16:我的工具提示应该有一个data-year
属性,该属性对应于活动区域的data-year
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.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