chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: 用條形圖可視化數據
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/GrZVaM> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 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：** 在圖表裏，每個數據點都應該有一個具有 `class="bar"` 屬性的 `rect` 元素來展示數據。
|
||||
|
||||
**需求 #6：** 每個數據條應該具有值爲 `date` 的 `data-date` 屬性以及值爲 `GDP` 的 `data-gdp` 屬性。
|
||||
|
||||
**需求 #7：** 數據條元素的 `data-date` 屬性應與提供的數據的順序相匹配。
|
||||
|
||||
**需求 #8：** 數據條元素的 `data-gdp` 屬性應與提供的數據的順序相匹配。
|
||||
|
||||
**需求 #9：** 每個數據條元素的高度應準確地表示其數據所對應的 `GDP` 值。
|
||||
|
||||
**需求 #10：** `data-date` 屬性和它對應的數據條元素應與 x 軸上的相應的值對齊。
|
||||
|
||||
**需求 #11：** `data-gdp` 屬性和它對應的數據條元素應與 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--
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/EZKqza> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 等值區域圖包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
**需求 #2：** 等值區域圖包含一個具有 `id="description"` 屬性的描述內容。
|
||||
|
||||
**需求 #3：** 等值區域圖包含一些州縣來展示數據，這些州縣應該具有 `class="county"` 屬性。
|
||||
|
||||
**需求 #4：** 這些州縣至少應該有 4 種不同的填充顏色。
|
||||
|
||||
**需求 #5：** 每個州縣都應該具有 `data-fips` 和 `data-education` 屬性，分別包含相應的值 `fips` 和 `education`。
|
||||
|
||||
**需求 #6：** 在等值區域圖中，每一個提供的數據點都應該有一個對應的州縣。
|
||||
|
||||
**需求 #7：** 各個州縣應該具有與樣本數據匹配的 `data-fips` 和 `data-education` 值。
|
||||
|
||||
**需求 #8：** 等值區域圖包含一個具有 `id="legend"` 屬性的圖例。
|
||||
|
||||
**需求 #9：** 圖例至少應該使用 4 種不同的填充顏色。
|
||||
|
||||
**需求 #10：** 將鼠標懸停在某個區域上時，可以看到具有 `id="tooltip"` 屬性的提示框，它會顯示有關該區域的更多信息。
|
||||
|
||||
**需求 #11：** 提示框應該有 `data-education` 屬性，它對應了當前激活區域的 `data-education` 屬性。
|
||||
|
||||
以下是完成此項目所需的數據集：
|
||||
|
||||
- **US Education Data:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:** `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--
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/JEXgeY> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 熱度圖包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
**需求 #2：** 熱度圖包含一個具有 `id="description"` 屬性的描述內容。
|
||||
|
||||
**需求 #3：** 熱度圖包含一個具有 `id="x-axis"` 屬性的 x 軸。
|
||||
|
||||
**需求 #4：** 熱度圖包含一個具有 `id="y-axis"` 屬性的 y 軸。
|
||||
|
||||
**需求 #5：** 熱度圖包含一些 `rect` 元素來展示數據，他們具有 `class="cell"` 屬性。
|
||||
|
||||
**需求 #6：** 這些單元格元素至少應該有 4 種不同的填充顏色。
|
||||
|
||||
**需求 #7：** 每個單元格都有這些屬性：`data-month`、`data-year`、`data-temp`，具有相應的屬性值 `month`、`year`、`temperature`。
|
||||
|
||||
**需求 #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"` 屬性的提示框，它會顯示有關該區域的更多信息。
|
||||
|
||||
**需求 #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: 用散點圖可視化數據
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/bgpXyK> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 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` 的 class 屬性，它代表了被繪製的數據。
|
||||
|
||||
**需求 #5：** 每個點都應具有 `data-xvalue` 屬性和 `data-yvalue` 屬性，具有相應的屬性值 `x` 和 `y`。
|
||||
|
||||
**需求 #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-year` 屬性，它對應了當前激活區域的 `data-xvalue` 屬性。
|
||||
|
||||
以下是完成此項目所需的數據：`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--
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/KaNGNR> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 這些刻度是通過 D3 測試所必需的，因爲它們的位置是用來確定圖表元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 矩陣樹圖包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
**需求 #2：** 矩陣樹圖包含一個具有 `id="description"` 屬性的描述內容。
|
||||
|
||||
**需求 #3：** 矩陣樹圖包含一些具有 `class="tile"` 屬性的 `rect` 元素來展示數據。
|
||||
|
||||
**需求 #4：** 這些矩形塊元素至少應該有 2 種不同的填充顏色。
|
||||
|
||||
**需求 #5：** 每一個矩形元素應該有 `data-name`、`data-category`、`data-value` 屬性，具有相應的 `name`、`category`、`value` 屬性值。
|
||||
|
||||
**需求 #6：** 每個矩形塊的面積和它的 `data-value` 屬性值相對應：`data-value` 值越大的矩形塊面積越大。
|
||||
|
||||
**需求 #7：** 矩陣樹圖包含一個具有 `id="legend"` 屬性的圖例。
|
||||
|
||||
**需求 #8：** 圖例包含一些具有 `class="legend-item"` 屬性的 `rect` 元素。
|
||||
|
||||
**需求 #9：** 圖例中的這些 `rect` 元素至少應該使用 2 種不同的填充顏色。
|
||||
|
||||
**需求 #10：** 將鼠標懸停在某個區域上時，可以看到具有 `id="tooltip"` 屬性的提示框，它會顯示有關該區域的更多信息。
|
||||
|
||||
**需求 #11：** 提示框應該有 `data-value` 屬性，它對應了當前激活區域的 `data-value` 屬性。
|
||||
|
||||
對於此項目，您可以使用以下任何數據集：
|
||||
|
||||
- **Kickstarter Pledges：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales：** `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