4.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7168d8c242eddfaeb5bd13 | 棒グラフでデータを可視化する | 3 | 301464 | visualize-data-with-a-bar-chart |
--description--
目標: https://codepen.io/freeCodeCamp/full/GrZVaM と同様の機能を持つ CodePen.io アプリを構築します。
以下のユーザーストーリーを達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
HTML、JavaScript、CSS、および D3 の SVG ベースのビジュアライゼーションライブラリを使用できます。 テストでは、軸に沿って自動的に目盛り (tick) を生成する D3 軸プロパティを使用して軸を生成する必要があります。 これらの目盛りは、グラフ化された要素の配置を決定するために使用されるので、D3 テストに合格するために必要です。 軸の生成については、https://github.com/d3/d3/blob/master/API.md#axes-d3-axis を参照してください。 必要な (非仮想) DOM 要素は、各テストの時にクエリされます。 フロントエンドフレームワーク (例えば Vue など) を使用した場合、動的なコンテンツではテスト結果が不正確になる可能性があります。 最終的には対応したいと考えていますが、現在の D3 プロジェクトではこれらのフレームワークはサポートされていません。
ユーザーストーリー #1: 私のチャートには、タイトルとそれに対応する id="title" が必要です。
ユーザーストーリー #2: 私のチャートには、g 要素の x 軸とそれに対応する id="x-axis" が必要です。
ユーザーストーリー #3: 私のチャートには、g 要素の y 軸とそれに対応する id="y-axis" が必要です。
ユーザー ストーリー#4: 両軸には、複数の目盛りラベルと、それぞれに対応する class="tick" が含まれている必要があります。
ユーザーストーリー #5: 私のチャートには、各データポイントに対して、rect 要素と、それに対応してデータを表示する class="bar" が必要です。
ユーザーストーリー #6: 各バーには、date 値を格納している data-date プロパティと、GDP 値を格納している data-gdp プロパティが必要です。
ユーザーストーリー #7: バー要素の data-date プロパティは、提供されたデータの順序と一致する必要があります。
ユーザーストーリー #8: バー要素の data-gdp プロパティは、提供されたデータの順序と一致する必要があります。
ユーザーストーリー #9: 各バーの要素の高さは、そのデータに対応する GDP を正確に表す必要があります。
ユーザーストーリー #10: data-date 属性とそれに対応するバー要素は、x 軸上の対応する値と一致している必要があります。
ユーザーストーリー #11: data-gdp 属性とそれに対応する bar 要素は、y 軸上の対応する値と一致している必要があります。
ユーザーストーリー #12: ある領域にマウスカーソルを合わせると、その領域の詳細情報を表示するための、対応する id="tooltip" を持つツールチップが表示されます。
ユーザーストーリー #13: 私のツールチップには、アクティブな領域の data-date に対応する data-date プロパティが必要です。
このプロジェクトを完了するために必要なデータセットはこちらにあります: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
プロジェクトを構築するには、こちらの CodePen テンプレートを使用し、Save をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます:https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
--solutions--
// solution required