freeCodeCamp

4.3 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7188d8c242eddfaeb5bd13	Visualize Data with a Heat Map	true	3		使用热图可视化数据

Description

目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/JEXgeY 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS和基于D3 svg的可视化库。在每次测试时查询必需（非虚拟）DOM元素。如果您使用前端框架（例如Vue），则测试结果可能对动态内容不准确。我们希望最终能够容纳它们，但D3项目目前不支持这些框架。 用户故事＃1：我的热图应该有一个标题，对应的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

4.3 KiB Raw Blame History Unescape Escape