feat: audit for data visualization projects (#40612)

* feat: audit for data visualization projects

* feat: translate data visualization curriculum

curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md

@@ -1,6 +1,6 @@
 ---
 id: 587d7fa6367417b2b2512bbf
-title: 用地区分布图可视化数据
+title: 用等值区域图可视化数据
 challengeType: 3
 forumTopicId: 301465
 ---
@@ -11,36 +11,36 @@ forumTopicId: 301465
 
 在满足以下[需求](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 项目目前还不支持它们。
+你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
 
-**需求 #1：** 我的地区分布图应该有一个具有`id="title"`属性的标题。
+**需求 #1：** 等值区域图包含一个具有`id="title"`属性的标题。
 
-**需求 #2：** 我的地区分布图应该有一个具有`id="description"`属性的描述内容。
+**需求 #2：** 等值区域图包含一个具有`id="description"`属性的描述内容。
 
-**需求 #3：** 我的地区分布图应该有一些州县来展示数据，这些州县应该具有`class="county"`属性。
+**需求 #3：** 等值区域图包含一些州县来展示数据，这些州县应该具有`class="county"`属性。
 
 **需求 #4：** 这些州县至少应该有 4 种不同的填充颜色。
 
-**需求 #5：** 我的每个州县都应该具有`data-fips`和`data-education`属性，分别包含他们相应的 fips 值和教育值。
+**需求 #5：** 每个州县都应该具有`data-fips`和`data-education`属性，分别包含他们相应的 fips 值和教育值。
 
-**需求 #6：** 在我的地区分布图中，每一个提供的数据点都应该有一个对应的州县。
+**需求 #6：** 在等值区域图中，每一个提供的数据点都应该有一个对应的州县。
 
 **需求 #7：** 各个州县应该具有与样本数据匹配的 fips 值和教育值。
 
-**需求 #8：** 我的地区分布图应该有一个具有`id="legend"`属性的图例。
+**需求 #8：** 等值区域图包含一个具有`id="legend"`属性的图例。
 
-**需求 #9：** 这些图例至少应该使用 4 种不同的填充颜色。
+**需求 #9：** 图例至少应该使用 4 种不同的填充颜色。
 
-**需求 #10：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
+**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
 
-**需求 #11：** 我的提示框应该有一个`data-education`属性，它对应了当前激活区域的code>data-education属性。
+**需求 #11：** 提示框应该有`data-education`属性，它对应了当前激活区域的`data-education`属性。
 
 以下是完成此项目所需的数据集：  
 
 -   **US Education Data:** `https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json`
 -   **US County Data:** `https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json`
 
-你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
+你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
 
 一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
 

curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md

@@ -11,45 +11,45 @@ forumTopicId: 301466
 
 在满足以下[需求](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 项目目前还不支持它们。
+你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
 
-**需求 #1：** 我的热度图应该有一个具有`id="title"`属性的标题。
+**需求 #1：** 热度图包含一个具有`id="title"`属性的标题。
 
-**需求 #2：** 我的热度图应该有一个具有`id="title"`属性的描述内容。
+**需求 #2：** 热度图包含一个具有`id="description"`属性的描述内容。
 
-**需求 #3：** 我的热度图应该有一个具有`id="x-axis"`属性的 x 轴。
+**需求 #3：** 热度图包含一个具有`id="x-axis"`属性的 x 轴。
 
-**需求 #4：** 我的热度图应该有一个具有`id="y-axis"`属性的 y 轴。
+**需求 #4：** 热度图包含一个具有`id="y-axis"`属性的 y 轴。
 
-**需求 #5：** 我的热度图应该有一些`rect`元素来展示数据，他们具有`class="cell"`属性。
+**需求 #5：** 热度图包含一些`rect`元素来展示数据，他们具有`class="cell"`属性。
 
 **需求 #6：** 这些单元格元素至少应该有 4 种不同的填充颜色。
 
-**需求 #7：** 每个单元格元素都有这些属性`data-month`，`data-year`，`data-temp`，包含了它们相应的月份，年份和温度值。
+**需求 #7：** 每个单元格元素都有这些属性`data-month`，`data-year`，`data-temp`，包含了它们相应的月份、年份和温度值。
 
 **需求 #8：** 每个元素的`data-month`，`data-year`属性应该在数据范围内。
 
-**需求 #9：** 我的热度图应该具有与 y 轴上的相应月份对齐的单元格。
+**需求 #9：** 热度图包含与 y 轴上的相应月份对齐的单元格。
 
-**需求 #10：** 我的热度图应该具有与 x 轴上相应年份对齐的单元格。
+**需求 #10：** 热度图包含与 x 轴上相应年份对齐的单元格。
 
-**需求 #11：** 我的热度图应该在 y 轴上有多个刻度标签，并带有完整的月份名称。
+**需求 #11：** 热度图在 y 轴上有多个刻度标签，并带有完整的月份名称。
 
-**需求 #12：** 我的热度图应该在 x 轴上有多个刻度标签，年份在 1754 到 2015 之间。
+**需求 #12：** 热度图在 x 轴上有多个刻度标签，年份在 1754 到 2015 之间。
 
-**需求 #13：** 我的热度图应该有一个具有`id="legend"`属性的图例。
+**需求 #13：** 热度图包含一个具有`id="legend"`属性的图例。
 
-**需求 #14：** 我的图例应该包含一些`rect`元素。
+**需求 #14：** 图例包含一些`rect`元素。
 
 **需求 #15：** 图例中的这些`rect`元素应该至少使用 4 种不同的填充颜色。
 
-**需求 #16：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
+**需求 #16：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
 
-**需求 #17：** 我的提示框应该有一个`data-year`属性，它对应了当前激活区域的`data-year`属性。
+**需求 #17：** 提示框应该有`data-year`属性，它对应了当前激活区域的`data-year`属性。
 
 以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
 
-你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
+你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
 
 一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
 

curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md

@@ -13,15 +13,15 @@ forumTopicId: 301467
 
 你可以使用 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"`属性的标题元素。
+**需求 #1：** 散点图包含一个具有`id="title"`属性的标题元素。
 
-**需求 #2：** 我能看到一个具有`id="x-axis"`属性的 x 轴。
+**需求 #2：** 散点图包含一个具有`id="x-axis"`属性的 x 轴。
 
-**需求 #3：** 我能看到一个具有`id="y-axis"`属性的 y 轴。
+**需求 #3：** 散点图包含一个具有`id="y-axis"`属性的 y 轴。
 
-**需求 #4：** 我可以看到一些点，每个点都有一个值为`dot`的 class 属性，它代表了被绘制的数据。
+**需求 #4：** 散点图包含一些点，每个点都有一个值为`dot`的 class 属性，它代表了被绘制的数据。
 
-**需求 #5：** 每个点都应具有`data-xvalue`属性和`data-yvalue`属性，其中包含相应的 x 和 y 值。
+**需求 #5：** 每个点都应具有`data-xvalue`属性和`data-yvalue`属性，对应这个点的 x 和 y 值。
 
 **需求 #6：** 每个点的`data-xvalue`属性和`data-yvalue`属性应该在实际数据的范围内，并且数据格式应该正确无误。对于`data-xvalue`属性，可以接受整数（全年）或 Date 对象进行测试评估。对于`data-yvalue`属性（分钟），请使用 Date 对象。
 
@@ -29,25 +29,25 @@ forumTopicId: 301467
 
 **需求 #8：** `data-yvalue`属性和它对应的点应该和 y 轴上的点或值对齐。
 
-**需求 #9：** 我可以在 y 轴上看到多个时间格式为`%M:%S`的刻度标签。
+**需求 #9：** 散点图的 y 轴上有多个时间格式为`%M:%S`的刻度标签。
 
-**需求 #10：** 我可以在 x 轴上看到显示年份的多个刻度标签。
+**需求 #10：** 散点图的 x 轴上有多个显示年份的刻度标签。
 
-**需求 #11：** 我可以看到 x 轴标签的范围在实际 x 轴数据的范围内。
+**需求 #11：** 散点图的 x 轴标签的范围在实际 x 轴数据的范围内。
 
-**需求 #12：** 我可以看到 y 轴标签的范围在实际 y 轴数据的范围内。
+**需求 #12：** 散点图的 y 轴标签的范围在实际 y 轴数据的范围内。
 
-**需求 #13：** 我可以看到一个包含描述性文字的图例，它具有`id="legend"`属性。
+**需求 #13：** 散点图包含一个包含描述性文字的图例，它具有`id="legend"`属性。
 
-**需求 #14：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
+**需求 #14：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
 
-**需求 #15：** 我的提示框应该有一个`data-year`属性，它对应了当前激活区域的`data-xvalue`属性。
+**需求 #15：** 提示框应该有`data-year`属性，它对应了当前激活区域的`data-xvalue`属性。
 
 以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
 
-你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
+你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
 
-一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
+一旦你完成了本项目并且通过所有测试，请提交项目的 URL。
 
 # --hints--
 

curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md

@@ -13,11 +13,11 @@ forumTopicId: 301468
 
 你可以使用 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"`属性的标题。
+**需求 #1：** 矩阵树图包含一个具有`id="title"`属性的标题。
 
-**需求 #2：** 我的矩阵树图应该有一个具有`id="description"`属性的描述内容。
+**需求 #2：** 矩阵树图包含一个具有`id="description"`属性的描述内容。
 
-**需求 #3：** 我的矩阵树图应该有一些具有`class="tile"`属性的`rect`元素来展示数据。
+**需求 #3：** 矩阵树图包含一些具有`class="tile"`属性的`rect`元素来展示数据。
 
 **需求 #4：** 这些矩形块元素至少应该有 2 种不同的填充颜色。
 
@@ -25,15 +25,15 @@ forumTopicId: 301468
 
 **需求 #6：** 每个矩形块的面积和它的 data-value 属性值相对应：data-value 值越大的矩形块面积越大。
 
-**需求 #7：** 我的矩阵树图应该有一个具有`id="legend"`属性的图例。
+**需求 #7：** 矩阵树图包含一个具有`id="legend"`属性的图例。
 
-**需求 #8：** 我的图例应该有一些具有`class="legend-item"`属性的`rect`元素。
+**需求 #8：** 图例包含一些具有`class="legend-item"`属性的`rect`元素。
 
 **需求 #9：** 图例中的这些`rect`元素至少应该使用 2 种不同的填充颜色。
 
-**需求 #10：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
+**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
 
-**需求 #11：** 我的提示框应该有一个`data-value`属性，它对应了当前激活区域的code>data-value属性。
+**需求 #11：** 提示框应该有`data-value`属性，它对应了当前激活区域的`data-value`属性。
 
 对于此项目，您可以使用以下任何数据集：  
 
@@ -41,7 +41,7 @@ forumTopicId: 301468
 -   **Movie Sales：** `https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json`
 -   **Video Game Sales：** `https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json`
 
-你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
+你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
 
 一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
 

curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md

@@ -1,6 +1,6 @@
 ---
 id: 587d7fad367417b2b2512bdf
-title: 添加坐标轴到可视化中
+title: 添加坐标轴到视图中
 challengeType: 6
 forumTopicId: 301472
 ---
@@ -9,17 +9,19 @@ forumTopicId: 301472
 
 另一种改进散点图的方法是添加 x 轴和 y 轴。
 
-D3 有两种方法来渲染 y 轴和 x 轴，分别是 `axisLeft` 和 `axisBottom`。下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子：
+D3 有两种方法来渲染 y 轴和 x 轴，分别是 `axisLeft()` 和 `axisBottom()`。下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子：
 
-`const xAxis = d3.axisBottom(xScale);`
+```js
+const xAxis = d3.axisBottom(xScale);
+```
 
-下一步是在 SVG 画布上渲染 x 轴。为此，你可以使用一个常见的 SVG 组件， `g` 元素，`g` 是英文中组(group)的缩写。
+下一步是在 SVG 画布上渲染 x 轴。为此，你可以使用一个 SVG 组件， `g` 元素，`g` 是英文中组(group)的缩写。
 
 不同于 `rect`、`circle`、`text`，在渲染时，轴只是一条直线。因为它是一个简单的图形，所以可以用 `g` 。
 
-最后一步是使用 `transforms` 属性将轴放置在 SVG 画布的正确位置上。否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。
+最后一步是使用 `transform` 属性将轴放置在 SVG 画布的正确位置上。否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。
 
-SVG 支持多种 `transforms`，但是放置轴需要 `translate`。当它应用在 `g` 元素上时，它根据给出的总量移动整组。下面是一个例子：
+SVG 支持多种 `transform`，但是定位轴需要使用 `translate` 属性。当它应用在 `g` 元素上时，它根据给出的总量移动整组。下面是一个例子：
 
 ```js
 const xAxis = d3.axisBottom(xScale);
@@ -29,21 +31,21 @@ svg.append("g")
    .call(xAxis);
 ```
 
-上部分代码将 x 轴放置在 SVG 画布的底端。然后 x 轴作为参数被传递给 `call` 方法。 除了 `translate` 的参数是 (x,0) 格式的，y 轴也是一样的。因为 `translate` 是上面 `attr` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
+上部分代码将 x 轴放置在 SVG 画布的底端。然后 x 轴作为参数被传递给 `call` 方法。 除了 `translate` 的参数变成 (x,0) ，y 轴的定位也是一样的。因为 `translate` 是 `attr` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
 
 # --instructions--
 
-现在散点图有 x 轴了。用 `axisLeft` 方法在变量 `yAxis` 中创建 y 轴，然后用 `g` 元素渲染 y 轴。确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得 `call()` y 轴。
+现在散点图有 x 轴了。用 `axisLeft` 方法创建 y 轴并赋值给 `yAxis` 变量，然后通过 `g` 元素渲染 y 轴。确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得 `call()` y 轴。
 
 # --hints--
 
-你应该使用参数为 `yScale`的`axisLeft()` 方法。
+你应该使用参数为 `yScale` 的 `axisLeft()` 方法。
 
 ```js
 assert(code.match(/\.axisLeft\(yScale\)/g));
 ```
 
-y 轴的 `g`元素应该有一个`transform` 属性来将 y 轴平移( 60，0 )。
+y 轴的 `g`元素应该有一个`transform` 属性来将 y 轴平移（60，0）。
 
 ```js
 assert(

curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md

@@ -1,13 +1,13 @@
 ---
 id: 587d7fa8367417b2b2512bcd
-title: 为集合中的每个数据点创建一个 Bar
+title: 为集合中的每个数据点创建一个数据条
 challengeType: 6
 forumTopicId: 301482
 ---
 
 # --description--
 
-上个挑战仅仅在 `svg` 中添加了一个矩形来表示一组。接下来你将结合到目前为止所学的关于 `data()`、`enter()`、SVG 图形的知识，为 `dataset` 中的每一个数据点创建并且添加一个矩形。
+上个挑战在 `svg` 中只添加了一个矩形来表示数据条。接下来你将结合到目前为止所学的关于 `data()`、`enter()` 和 SVG 图形的知识，为 `dataset` 中的每一个数据点创建并且添加一个矩形。
 
 之前的挑战展示了如何为 `dataset` 中的每个对象创建并添加一个 `div`：
 
@@ -18,15 +18,15 @@ d3.select("body").selectAll("div")
   .append("div")
 ```
 
-`rect` 元素和 `div` 有一些不同，`rect` 必须添加在 `svg` 元素内，而不能直接添加在 `body` 内。同时，你需要告诉 D3 将 `rect` 放在 `svg` 区域的哪个位置。组的放置会在下一个挑战中讲到。
+操作 `rect` 元素和 `div` 有一些不同，`rect` 必须添加在 `svg` 元素内，而不能直接添加在 `body` 内。同时，你需要告诉 D3 将 `rect` 放在 `svg` 区域的哪个位置。条形的放置会在下一个挑战中讲到。
 
 # --instructions--
 
-用 `data()`、`enter()`、`append()` 方法为 `dataset` 中的每一个对象创建并添加一个 `rect` 。每一组都将直接显示在上一组的上面，将上一组覆盖，这将会在下一个挑战中得到修改。
+用 `data()`、`enter()`、`append()` 方法为 `dataset` 中的每一个对象创建并添加一个 `rect` 。每个数据条都将直接显示在上一个数据条的上面，将上一个数据条覆盖，这将会在下一个挑战中得到修改。
 
 # --hints--
 
-你的文档应该有 9 个 `rect` 元素。
+你的代码应该包含 9 个 `rect` 元素。
 
 ```js
 assert($('rect').length == 9);

curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md

@@ -9,11 +9,11 @@ forumTopicId: 301491
 
 默认情况下，比例尺使用同一关系(identity relationship)，即输入值直接映射为输出值。但是比例尺可以更灵活更有趣。
 
-假设有一个数据集范围为 50 到 480，这是缩放的输入信息，也被称为域(domain)。
+假设有一个数据集范围为 50 到 480，这是缩放比例尺的输入信息，也被称为域(domain)。
 
-你想沿着 10 个单位到 500 个单位的 `x` 轴映射这些点到 SVG 画布上。这是输出信息，也被称为范围(range)。
+你想沿着 `x` 轴将这些点映射到 SVG 画布上，位置介于 10 个单位到 500 个单位之间。这是输出信息，也被称为范围(range)。
 
-`domain()` 和 `range()` 方法设置缩放的值，它们都以至少有两个元素的数组为参数。下面是一个例子：
+`domain()` 和 `range()` 方法设置比例尺的值，它们都接受一个至少有两个元素的数组作为参数。下面是一个例子：
 
 ```js
 // 设置域
@@ -36,7 +36,7 @@ d3.scaleLinear()
 创建一个比例尺，将它的域设置为 `[250, 500]`，范围设置为 `[10, 150]`。
 
 **提示**  
-你可以将 `domain()` 和 `range()` 方法串联在 `scale` 变量后。
+你可以将 `domain()` 和 `range()` 方法链在 `scale` 变量后。
 
 # --hints--
 

curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md

@@ -7,9 +7,9 @@ forumTopicId: 301496
 
 # --description--
 
-D3 的方法 `domain()` 和 `range()` 根据数据设置比例尺的信息。下面有几种更简单的方法。
+D3 的 `domain()` 和 `range()` 方法根据数据设置比例尺的信息。下面有几种更简单的方法。
 
-通常当你设置域的时候，你会想用数据集中的最小值和最大值。尤其是在很大的数据集中，尝试手动的找到这些值可能会出错。
+通常当你设置域的时候，你会想用数据集中的最小值和最大值。试图手动的找到这些值，尤其是在很大的数据集中，可能会出错。
 
 D3 有两个方法——`min()` 和 `max()` 来返回这些值。下面是一个例子：
 
@@ -19,7 +19,7 @@ d3.min(exampleData) // 返回 6
 d3.max(exampleData) // 返回 234
 ```
 
-像在散点图的例子中的 \[x, y] 坐标对一样，数据集有可能嵌套数组。在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。 辛运的是，`min()` 和 `max()` 都可以使用回调函数。 在下面这个例子中，回调函数的参数 `d` 是当前的内数组。回调函数需要从内数组中返回你想比较大小的元素（x 还是 y 值）。下面是一个如何找到二维数组的最大值和最小值的例子：
+像在散点图的例子中的 \[x, y] 坐标对一样，数据集有可能嵌套数组。在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。幸运的是，`min()` 和 `max()` 都可以使用回调函数。 在下面这个例子中，回调函数的参数 `d` 是当前的内部数组。回调函数需要从内部数组中返回你想计算最大/小值的元素（x 还是 y 值）。下面是一个如何找到二维数组的最大值和最小值的例子：
 
 ```js
 const locationData = [[1, 7],[6, 3],[8, 3]];
@@ -30,7 +30,7 @@ const minX = d3.min(locationData, (d) => d[0]);
 
 # --instructions--
 
-在 `positionData` 变量中保存一个三维数组。用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在 `output` 变量中。
+`positionData` 数组中有包含 x、y、z 坐标的子数组。用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在 `output` 变量中。
 
 # --hints--
 

curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md

@@ -7,13 +7,13 @@ forumTopicId: 16807
 
 # --description--
 
-现在你可以从 JSON API 获取数据了，你可以在 HTML 中显示它。
+现在你从 JSON API 获取了数据，可以在 HTML 中显示它们了。
 
-既然 cat photo 对象保存在数组里，你可以使用`forEach`方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
+既然 cat photo 对象都保存在数组里，你可以使用 `forEach` 方法来遍历它们。当你拿到每个对象时，你就可以修改 HTML 元素了。
 
-首先，用`let html = "";`声明一个变量。
+首先，通过 `let html = "";` 声明一个 html 变量。
 
-接着，遍历 JSON，将 HTML 添加到用`strong`标记键名的变量，后面跟着值。当循环结束后渲染它。
+接着，遍历 JSON，将用 `strong` 标签包裹的键名和后面跟着值的 html 元素添加给变量。当循环结束后渲染它。
 
 这是执行此操作的代码：
 
@@ -29,11 +29,11 @@ json.forEach(function(val) {
 });
 ```
 
-**注意：** 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
+**注意：** 在本挑战中，你需要给页面添加新的 HTML 元素，不能依赖 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
 
 # --instructions--
 
-添加一个`forEach`循环 JSON 数据的方法，并创建 HTML 元素以显示它。
+添加一个 `forEach` 循环来遍历 JSON 数据，并创建 HTML 元素以显示它。
 
 以下是一个 JSON 示例：
 
@@ -51,19 +51,19 @@ json.forEach(function(val) {
 
 # --hints--
 
-你的代码应该将数据保存在`html`变量中。
+你的代码应该将数据保存在 `html` 变量中。
 
 ```js
 assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
 ```
 
-你的代码应该使用`forEach`方法来遍历 API 中的 JSON 数据。
+你的代码应该使用 `forEach` 方法来遍历 API 中的 JSON 数据。
 
 ```js
 assert(code.match(/json\.forEach/g));
 ```
 
-你的代码应该将键名包装在`strong`标签中。
+你的代码应该用 `strong` 标签包裹键名。
 
 ```js
 assert(code.match(/<strong>.+<\/strong>/g));

curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md

@@ -7,7 +7,7 @@ forumTopicId: 301504
 
 # --description--
 
-在前面的示例中，你在外部资源获取数据，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
+在前面的示例中，你通过外部资源获取数据。此外，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
 
 JavaScript 的`XMLHttpRequest`方法也用于将数据发布到服务器，这是个例子：
 
@@ -25,27 +25,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
 xhr.send(body);
 ```
 
-你在之前见过其中几种方法。这里`open`方法将请求初始化为对外部资源的给定 URL 的 "POST"，并使用`true`布尔值使其异步。 `setRequestHeader`方法设置HTTP请求标头的值，该标头包含有关发送人和请求的信息。它必须在`open`方法之后调用，但在`send`方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。 接下来，`onreadystatechange`事件侦听器处理请求状态的更改。`readyState`为 4 表示操作完成，`status`200表示操作成功。文档的HTML可以更新。 最后，该`send`方法发送带有`userName`值的请求，该值由用户在`input`字段中给出。
+你之前已经见过这些方法。`open` 方法根据给定的外部资源的 URL 初始化一个 POST 请求，参数 `true` 表示请求是异步执行的。 `setRequestHeader` 方法设置了 HTTP 请求标头的值，该标头包含有关发送人和请求的信息。它必须在 `open` 方法之后、`send` 方法之前调用。它的两个参数表示标头的内容类型和标头数据将被设置成什么值。 接下来，`onreadystatechange` 事件监听器监听请求状态的更改。`readyState` 为 4 表示操作完成，`status` 为 201 表示请求成功，此时文档的 HTML 可以更新了。 最后，`send` 方法发送带有 `body` 值的请求，其中 `userName` 的值由用户在 `input` 字段中输入。
 
 # --instructions--
 
-更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。在这种情况下，你的名字附加 " loves cats"。
+更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，并点击 "Send Message"。你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。修改返回的请求结果，在你的名字前加上 " loves cats"。
 
 # --hints--
 
-你的代码应该创建一个新的`XMLHttpRequest`。
+你的代码应该创建一个新的 `XMLHttpRequest`。
 
 ```js
 assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
 ```
 
-你的代码应该使用该`open`方法初始化到服务器的 'POST' 请求。
+你的代码应该使用 `open` 方法初始化一个发送给服务器的 'POST' 请求。
 
 ```js
 assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
 ```
 
-你的代码应该使用该`setRequestHeader`方法。
+你的代码应该使用 `setRequestHeader` 方法。
 
 ```js
 assert(
@@ -55,13 +55,13 @@ assert(
 );
 ```
 
-你的代码应该有一个`onreadystatechange`设置为函数的事件处理程序。
+你的代码应该有一个 `onreadystatechange` 的事件监听器。
 
 ```js
 assert(code.match(/\.onreadystatechange\s*?=/g));
 ```
 
-你的代码应该使用类获取元素`message`并将其内部HTML更改为`responseText`。
+你的代码应该获取 class 为 `message` 的元素，并将它的 `textContent` 更改为 "`userName` loves cats"。
 
 ```js
 assert(
@@ -71,7 +71,7 @@ assert(
 );
 ```
 
-你的代码应该使用该`send`方法。
+你的代码应该使用 `send` 方法。
 
 ```js
 assert(code.match(/\.send\(\s*?body\s*?\)/g));