4.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7188d8c242eddfaeb5bd13 | ヒートマップでデータを可視化する | 3 | 301466 | visualize-data-with-a-heat-map |
--description--
目標: https://codepen.io/freeCodeCamp/full/JEXgeY と同様の機能を持つ CodePen.io アプリを構築します。
以下のユーザーストーリーを達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
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: 各セルには、month、 year、および temperature の値をそれぞれ格納している data-month プロパティ、data-year プロパティ、 data-temp プロパティがあります。
ユーザーストーリー #8: 各セルの data-month と data-year はデータの範囲内に収める必要があります。
ユーザーストーリー #9: 私のヒートマップには、y 軸上で対応する月と一致しているセルが必要です。
ユーザーストーリー #10: 私のヒートマップには、x 軸上で対応する年と一致しているセルが必要です。
ユーザーストーリー#11: 私のヒートマップには、完全な月名が記された複数のティックラベルが y 軸上に必要です。
ユーザーストーリー #12: 私のヒートマップには、1754 年から 2015 年までの年が記された複数のティックラベルが x 軸上に必要です。
ユーザーストーリー #13: 私のヒートマップには、凡例とそれに対応する id="legend" が必要です。
ユーザーストーリー #14: 私の凡例には rect 要素を含める必要があります。
**ユーザーストーリー #15: 凡例の ** rect 要素には、4 種類以上の塗りつぶし色を使用する必要があります。
ユーザーストーリー #16: ある領域にマウスカーソルを合わせると、その領域の詳細情報を表示するための、対応する id="tooltip" を持つツールチップが表示されます。
ユーザーストーリー #17: 私のツールチップには、アクティブな領域の data-year に対応する data-year プロパティが必要です。
このプロジェクトを完了するために必要なデータセットはこちらにあります: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
プロジェクトを構築するには、こちらの CodePen テンプレートを使用し、Save をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます:https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
--solutions--
// solution required