chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: 棒グラフでデータを可視化する
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標:** <https://codepen.io/freeCodeCamp/full/GrZVaM> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||||
|
||||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
|
||||
|
||||
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`
|
||||
|
||||
プロジェクトを構築するには、<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>こちらの CodePen テンプレート</a>を使用し、`Save` をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: 階級区分図でデータを可視化する
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標:** <https://codepen.io/freeCodeCamp/full/EZKqza> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||||
|
||||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
|
||||
|
||||
HTML、JavaScript、CSS、および D3 の SVG ベースのビジュアライゼーションライブラリを使用できます。 必要な (非仮想) DOM 要素は、各テストの時にクエリされます。 フロントエンドフレームワーク (例えば Vue など) を使用した場合、動的なコンテンツではテスト結果が不正確になる可能性があります。 最終的には対応したいと考えていますが、現在の D3 プロジェクトではこれらのフレームワークはサポートされていません。
|
||||
|
||||
**ユーザーストーリー #1:** 私のコロプレスには、タイトルとそれに対応する `id="title"` が必要です。
|
||||
|
||||
**ユーザーストーリー #2:** 私のコロプレスには、説明要素とそれに対応する `id="description"` が必要です。
|
||||
|
||||
**ユーザーストーリー #3:** 私のコロプレスには、郡と、それに対応してデータを表す `class="county"` が必要です。
|
||||
|
||||
**ユーザーストーリー #4:** 郡の塗りつぶしに使用する色が 4 種類以上必要です。
|
||||
|
||||
**ユーザーストーリー #5:** 私の各郡には、対応する `fips` 値を格納している `data-fips` プロパティと、`education` 値を格納している `data-education` プロパティが必要です。
|
||||
|
||||
**ユーザーストーリー #6:** 私のコロプレスには、提供された各データポイントに対して 1 つの郡が必要です。
|
||||
|
||||
**ユーザーストーリー #7:** 郡には、サンプルデータと一致する `data-fips` 値と `data-education` 値が必要です。
|
||||
|
||||
**ユーザーストーリー #8:** 私のコロプレスには、凡例とそれに対応する `id="legend"` が必要です。
|
||||
|
||||
**ユーザーストーリー #9:** 凡例を塗りつぶすのに使用する 4 種類以上の色が必要です。
|
||||
|
||||
**ユーザーストーリー #10:** ある領域にマウスカーソルを合わせると、その領域の詳細情報を表示するための、対応する `id="tooltip"` を持つツールチップが表示されます。
|
||||
|
||||
**ユーザーストーリー #11:** 私のツールチップには、アクティブな領域の `data-education` に対応する `data-education` プロパティが必要です。
|
||||
|
||||
このプロジェクトを完了するために必要なデータセットはこちらにあります:
|
||||
|
||||
- **米国の教育データ: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **米国の郡データ:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
プロジェクトを構築するには、<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>こちらの CodePen テンプレート</a>を使用し、`Save` をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: ヒートマップでデータを可視化する
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標:** <https://codepen.io/freeCodeCamp/full/JEXgeY> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||||
|
||||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
|
||||
|
||||
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`
|
||||
|
||||
プロジェクトを構築するには、<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>こちらの CodePen テンプレート</a>を使用し、`Save` をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標:** <https://codepen.io/freeCodeCamp/full/bgpXyK> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||||
|
||||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
|
||||
|
||||
HTML、JavaScript、CSS、および D3 の SVG ベースのビジュアライゼーションライブラリを使用できます。 テストでは、軸に沿って自動的にティックを生成する D3 軸プロパティを使用して軸を生成する必要があります。 これらのティックは、グラフ化された要素の配置を決定するために使用されるので、D3 テストに合格するために必要です。 軸の生成については <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> を参照してください。 必要な (非仮想) DOM 要素は、各テストの時にクエリされます。 フロントエンドフレームワーク (例えば Vue など) を使用した場合、動的なコンテンツではテスト結果が不正確になる可能性があります。 最終的には対応したいと考えていますが、現在の D3 プロジェクトではこれらのフレームワークはサポートされていません。
|
||||
|
||||
**ユーザーストーリー #1:** 対応する `id="title"` を持つタイトル要素が表示されています。
|
||||
|
||||
**ユーザーストーリー #2:** 対応する `id="x-axis"` を持つ x 軸が表示されています。
|
||||
|
||||
**ユーザーストーリー #3:** 対応する `id="y-axis"` を持つ y 軸が表示されています。
|
||||
|
||||
**ユーザーストーリー #4:** プロットされるデータを表すドット (それぞれが `dot` クラスを持つ) が表示されています。
|
||||
|
||||
**ユーザーストーリー #5:** 各ドットには、対応する `x` を格納している`data-xvalue` プロパティと、対応する `y` の値を格納している `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"` を持つ説明テキストが含まれている凡例が表示されています。
|
||||
|
||||
**ユーザーストーリー #14:** ある領域にマウスカーソルを合わせると、その領域の詳細情報を表示するための、対応する `id="tooltip"` を持つツールチップが表示されます。
|
||||
|
||||
**ユーザーストーリー #15:** 私のツールチップには、アクティブな領域の `data-xvalue` に対応する `data-year` プロパティが必要です。
|
||||
|
||||
このプロジェクトを完了するために必要なデータセットはこちらにあります: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
プロジェクトを構築するには、<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>こちらの CodePen テンプレート</a>を使用し、`Save` をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: ツリーマップ図でデータを可視化する
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標:** <https://codepen.io/freeCodeCamp/full/KaNGNR> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||||
|
||||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 あなたの独自のスタイルにしましょう。
|
||||
|
||||
HTML、JavaScript、CSS、および D3 の SVG ベースのビジュアライゼーションライブラリを使用できます。 テストでは、軸に沿って自動的にティックを生成する D3 軸プロパティを使用して軸を生成する必要があります。 これらのティックは、グラフ化された要素の配置を決定するために使用されるので、D3 テストに合格するために必要です。 軸の生成については <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> を参照してください。 必要な (非仮想) DOM 要素は、各テストの時にクエリされます。 フロントエンドフレームワーク (例えば Vue など) を使用した場合、動的なコンテンツではテスト結果が不正確になる可能性があります。 最終的には対応したいと考えていますが、現在の D3 プロジェクトではこれらのフレームワークはサポートされていません。
|
||||
|
||||
**ユーザーストーリー #1:** 私のツリーマップには、タイトルとそれに対応する `id="title"` が必要です。
|
||||
|
||||
**ユーザーストーリー #2:** 私のツリーマップには、説明とそれに対応する `id="description"` が必要です。
|
||||
|
||||
**ユーザーストーリー #3:** 私のツリーマップには、`rect` 要素と、それに対応してデータを表す `class="tile"` が必要です。
|
||||
|
||||
**ユーザーストーリー #4:** タイルの塗りつぶしに使用する色が 2 種類以上必要です。
|
||||
|
||||
**ユーザーストーリー #5:** 各タイルには、対応する `name`、`category`、`value` をそれぞれ格納している `data-name` プロパティ、`data-category` プロパティ、および `data-value` プロパティが必要です。
|
||||
|
||||
**ユーザーストーリー #6:** 各タイルの面積は `data-value` の量に対応していなければなりません。タイルの `data-value` が大きいほど面積も大きくなっている必要があります。
|
||||
|
||||
**ユーザーストーリー #7:** 私のツリーマップには、凡例とそれに対応する `id="legend"` が必要です。
|
||||
|
||||
**ユーザーストーリー #8:** 私の凡例には、`rect` 要素とそれに対応する `class="legend-item"` が必要です。
|
||||
|
||||
**ユーザーストーリー #9: 凡例の ** `rect` 要素には、2 種類以上の塗りつぶし色を使用する必要があります。
|
||||
|
||||
**ユーザーストーリー #10:** ある領域にマウスカーソルを合わせると、その領域の詳細情報を表示するための、対応する `id="tooltip"` を持つツールチップが表示されます。
|
||||
|
||||
**ユーザーストーリー #11:** 私のツールチップには、アクティブな領域の `data-value` に対応する `data-value` プロパティが必要です。
|
||||
|
||||
このプロジェクトでは、以下のいずれかのデータセットを使用できます。
|
||||
|
||||
- **キックスタータープレッジ:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **ムービーセールス:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **ビデオゲームセールス:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
プロジェクトを構築するには、<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>こちらの CodePen テンプレート</a>を使用し、`Save` をクリックして独自のペンを作成します。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
完了したら、すべてのテストに合格した作業プロジェクトの URL を送信してください。
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
Reference in New Issue
Block a user