From 529d72b242f7154849fbb4ad6e53ea159e019e51 Mon Sep 17 00:00:00 2001
From: camperbot <camperbot@users.noreply.github.com>
Date: Tue, 9 Mar 2021 08:51:59 -0700
Subject: [PATCH] chore(i18n,learn): processed translations (#41424)

* chore(i8n,learn): processed translations

* Update curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
---
 .../add-attributes-to-the-circle-elements.md  | 22 ++++----
 .../add-axes-to-a-visualization.md            |  6 +-
 .../add-classes-with-d3.md                    |  4 +-
 .../add-document-elements-with-d3.md          |  6 +-
 .../add-inline-styling-to-elements.md         |  2 +-
 .../add-labels-to-d3-elements.md              | 21 ++++---
 .../change-styles-based-on-data.md            | 33 ++++++-----
 .../change-the-color-of-an-svg-element.md     | 10 ++--
 .../change-the-presentation-of-a-bar-chart.md | 37 ++++++------
 ...te-a-bar-for-each-data-point-in-the-set.md | 18 +++---
 .../create-a-linear-scale-with-d3.md          | 22 ++++----
 .../create-a-scatterplot-with-svg-circles.md  | 13 ++---
 .../display-shapes-with-svg.md                | 24 ++++----
 ...namically-change-the-height-of-each-bar.md | 34 ++++++-----
 ...ically-set-the-coordinates-for-each-bar.md | 40 ++++++-------
 .../invert-svg-elements.md                    | 35 ++++++------
 .../learn-about-svg-in-d3.md                  | 21 ++++---
 .../select-a-group-of-elements-with-d3.md     | 14 ++---
 .../set-a-domain-and-a-range-on-a-scale.md    | 41 +++++++-------
 .../style-d3-labels.md                        | 10 ++--
 ...te-the-height-of-an-element-dynamically.md | 30 +++++-----
 ...e-a-pre-defined-scale-to-place-elements.md | 56 +++++++++----------
 .../use-dynamic-scales.md                     | 24 ++++----
 ...minimum-and-maximum-values-in-a-dataset.md | 24 ++++----
 .../work-with-data-in-d3.md                   | 24 ++++----
 .../work-with-dynamic-data-in-d3.md           | 32 +++++------
 .../access-the-json-data-from-an-api.md       | 27 ++++-----
 .../change-text-with-click-events.md          | 12 ++--
 .../convert-json-data-to-html.md              | 26 ++++-----
 ...on-data-to-find-a-users-gps-coordinates.md | 24 ++++----
 ...t-json-with-the-javascript-fetch-method.md | 26 ++++-----
 ...th-the-javascript-xmlhttprequest-method.md | 32 +++++------
 ...h-javascript-using-the-onclick-property.md | 12 ++--
 ...th-the-javascript-xmlhttprequest-method.md | 22 ++++----
 ...re-filter-json-to-get-the-data-you-need.md | 12 ++--
 .../render-images-from-data-sources.md        | 14 ++---
 .../use-a-css-class-to-style-an-element.md    |  4 +-
 ...d-new-properties-to-a-javascript-object.md | 18 +++---
 .../add-two-numbers-with-javascript.md        | 20 ++++---
 ...g-a-default-option-in-switch-statements.md | 32 +++++------
 .../appending-variables-to-strings.md         | 15 ++---
 ...ng-the-value-of-one-variable-to-another.md | 14 ++---
 .../assignment-with-a-returned-value.md       | 14 ++---
 .../build-javascript-objects.md               | 28 +++++-----
 .../chaining-if-else-statements.md            | 42 +++++++-------
 .../comment-your-javascript-code.md           |  9 +--
 .../comparison-with-the-equality-operator.md  | 28 +++++-----
 ...mparison-with-the-greater-than-operator.md | 28 +++++-----
 ...g-strings-with-the-plus-equals-operator.md | 18 +++---
 ...te-random-whole-numbers-with-javascript.md | 22 ++++----
 .../basic-javascript/stand-in-line.md         | 20 +++----
 ...pare-scopes-of-the-var-and-let-keywords.md |  4 +-
 .../es6/create-a-javascript-promise.md        |  4 +-
 ...de-effects-using-functional-programming.md | 22 ++++----
 .../implement-map-on-a-prototype.md           | 14 ++---
 55 files changed, 579 insertions(+), 587 deletions(-)

diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
index 04811cecf8..eafe288692 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
@@ -18,7 +18,7 @@ dashedName: add-attributes-to-the-circle-elements
 
 # --instructions--
 
-为 `circle` 元素添加 `cx`、`cy`、`r` 属性。 `cx` 的值应该是 `dataset` 中每个对象的数组的第一个数， `cy` 的值应该根据数组中的第二个值，但是要确保正向显示图表而不是倒转。 所有圆圈的 `r` 的值应该为 5。
+为 `circle` 元素添加 `cx`、`cy`、`r` 属性。 `cx` 的值应该是 `dataset` 中每个对象的数组的第一个数， `cy` 的值应该根据数组中的第二个值，但是要确保正向显示图表而不是倒转。 所有 circle 的 `r` 值应为 `5`。
 
 # --hints--
 
@@ -28,7 +28,7 @@ dashedName: add-attributes-to-the-circle-elements
 assert($('circle').length == 10);
 ```
 
-第一个 `circle` 元素的 `cx` 值应该为 34，`cy` 值应该为 422，`r` 值应该为 5。
+第一个 `circle` 元素的 `cx` 值应为 `34`，`cy` 值应为 `422`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -38,7 +38,7 @@ assert(
 );
 ```
 
-第二个 `circle` 元素的 `cx` 值应该为 109，`cy` 值应该为 220，`r` 值应该为 5。
+第二个 `circle` 元素的 `cx` 值应为 `109`，`cy` 值应为 `220`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -48,7 +48,7 @@ assert(
 );
 ```
 
-第三个 `circle` 元素的 `cx` 值应该为 310，`cy` 值应该为 380，`r` 值应该为 5。
+第三个 `circle` 元素的 `cx` 值应为 `310`，`cy` 值应为 `380`， `r` 值应为 `5`。
 
 ```js
 assert(
@@ -58,7 +58,7 @@ assert(
 );
 ```
 
-第四个 `circle` 元素的 `cx` 值应该为 79，`cy` 值应该为 89，`r` 值应该为 5。
+第四个 `circle` 元素的 `cx` 值应为 `79`，`cy` 值应为 `89`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -68,7 +68,7 @@ assert(
 );
 ```
 
-第五个 `circle` 元素的 `cx` 值应该为 420，`cy` 值应该为 280，`r` 值应该为 5。
+第五个 `circle` 元素的 `cx` 值应为 `420`，`cy` 值应为 `280`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -78,7 +78,7 @@ assert(
 );
 ```
 
-第六个 `circle` 元素的 `cx` 值应该为 233，`cy` 值应该为 355，`r` 值应该为 5。
+第六个 `circle` 元素的 `cx` 值应为 `233`，`cy` 值应为 `355`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -88,7 +88,7 @@ assert(
 );
 ```
 
-第七个 `circle` 元素的 `cx` 值应该为 333，`cy` 值应该为 404，`r` 值应该为 5。
+第七个 `circle` 元素的 `cx` 值应为 `333`，`cy` 值应为 `404`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -98,7 +98,7 @@ assert(
 );
 ```
 
-第八个 `circle` 元素的 `cx` 值应该为 222，`cy` 值应该为 167，`r` 值应该为 5。
+第八个 `circle` 元素的 `cx` 值应为 `222`，`cy` 值应为 `167`， `r` 值应为 `5`。
 
 ```js
 assert(
@@ -108,7 +108,7 @@ assert(
 );
 ```
 
-第九个 `circle` 元素的 `cx` 值应该为 78，`cy` 值应该为 180，`r` 值应该为 5。
+第九个 `circle` 元素的 `cx` 值应为 `78`，`cy` 值应为 `180`，`r` 值应为 `5`。
 
 ```js
 assert(
@@ -118,7 +118,7 @@ assert(
 );
 ```
 
-第十个 `circle` 元素的 `cx` 值应该为 21，`cy` 值应该为 377，`r` 值应该为 5。
+第十个 `circle` 元素的 `cx` 值应为 `21`，`cy` 值应为 `377`，`r` 值应为 `5`。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
index 7133afee9d..975299aee7 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
@@ -26,11 +26,11 @@ svg.append("g")
    .call(xAxis);
 ```
 
-上部分代码将 x 轴放置在 SVG 画布的底端。 然后 x 轴作为参数被传递给 `call()` 方法。 除了 `translate` 的参数变成 (x, 0) ，y 轴的定位也是一样的。 因为 `translate` 是 `attr()` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
+上部分代码将 x 轴放置在 SVG 画布的底端。 然后 x 轴作为参数被传递给 `call()` 方法。 y 轴的定位也是这样，只是 `translate` 参数的形式是 `(x, 0)`。 因为 `translate` 是 `attr()` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
 
 # --instructions--
 
-现在散点图有 x 轴了。 用 `axisLeft()` 方法创建 y 轴并赋值给 `yAxis` 变量， 然后通过 `g` 元素渲染 y 轴。 确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。 记得对 y 轴调用 `call()` 方法。
+现在散点图有 x 轴了。 用 `axisLeft()` 方法创建 y 轴并赋值给 `yAxis` 变量， 然后通过 `g` 元素渲染 y 轴。 使用 `transform` 属性将 y 轴向右平移（平移的单位等于 paading 的值），向下平移 `0` 个单位。 记得对 y 轴调用 `call()` 方法。
 
 # --hints--
 
@@ -40,7 +40,7 @@ svg.append("g")
 assert(code.match(/\.axisLeft\(yScale\)/g));
 ```
 
-y 轴的 `g` 元素应该有一个 `transform` 属性来将 y 轴平移（60，0）。
+y 轴 `g` 元素应有一个 `transform` 属性，将 y 轴平移 `(60, 0)`。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
index 97a7645519..d550959fd6 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
@@ -10,11 +10,11 @@ dashedName: add-classes-with-d3
 
 即使对小型 app 来说，在 HTML 元素中大量使用内联样式也十分难以管理。 给元素添加类，并使用 CSS 规则给类添加样式会更加方便。 D3 中的 `attr()` 方法可以给元素添加任何 HTML 属性，包括 class 名称。
 
-`attr()` 方法和 `style()` 的使用方法一样。 它使用逗号分隔值，并且可以使用回调函数。 这里是一个给选中元素添加 class 名为 "container" 的例子：
+`attr()` 方法和 `style()` 的使用方法一样。 它使用逗号分隔值，并且可以使用回调函数。 下面是给选中元素添加 `container` class 的例子：
 
 `selection.attr("class", "container");`
 
-请注意，当你需要添加类时，“class" 参数不会发生改变，只有 "container" 参数会发生变化。
+请注意，当你需要添加 class 时，`class` 参数保持不变，只有 `container` 参数会发生变化。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
index eab6c069f7..d598ace676 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
@@ -14,7 +14,7 @@ D3 有多种方法可以用来在文档中增加元素、修改元素。
 
 `const anchor = d3.select("a");`
 
-上面这个例子找到页面上的第一个锚点标签，将它作为一个 HTML 节点保存在变量 `anchor` 中。 你也可以用其他的方法选择页面上的元素。 例子中的 "d3" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。
+上面这个例子找到页面上的第一个锚点标签，将它作为一个 HTML 节点保存在变量 `anchor` 中。 你也可以用其他的方法选择页面上的元素。 示例中的 `d3` 部分是对 D3 对象的引用，通过它访问 D3 方法。
 
 另外两个有用的方法是 `append()` 和 `text()` 。
 
@@ -34,7 +34,7 @@ d3.select("ul")
 
 # --instructions--
 
-使用 `select` 方法选择文档中的 `body` 标签。 然后用 `append` 方法为它添加一个 `h1` 标签，同时在 `h1` 中添加文本 "Learning D3"。
+使用 `select` 方法选择文档中的 `body` 标签。 然后给它 `append` 一个 `h1` 标签，并给 `h1` 元素添加文本 `Learning D3`。
 
 # --hints--
 
@@ -44,7 +44,7 @@ d3.select("ul")
 assert($('body').children('h1').length == 1);
 ```
 
-`h1` 元素应该包含文本 'Learning D3'。
+`h1` 元素应包含文本 `Learning D3`。
 
 ```js
 assert($('h1').text() == 'Learning D3');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
index 6efcdbddba..0163198a82 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
@@ -20,7 +20,7 @@ D3允许你使用 `style()` 方法在动态元素上添加内联 CSS 样式。
 
 # --hints--
 
-`h2` 元素应该有 `font-family` 属性，且值为 verdana。
+`h2` 元素的 `font-family` 应为 `verdana`。
 
 ```js
 assert($('h2').css('font-family') == 'verdana');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
index 482a5d3afa..3f9e20bfaf 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
@@ -18,60 +18,59 @@ D3 给了你很高的权限给图形添加标签。
 
 编辑器中的代码已经将数据绑定到每个新的 `text` 元素。 首先，在 `svg` 中添加 `text` 节点。 然后，添加 `x` 和 `y` 坐标属性， 它们的计算方法应该和 `rect` 中计算方法相同，除了 `text` 的 `y` 值应该使标签比条形图的高 3 个单位。 最后，用 D3 的 `text()` 方法将标签设置为和数据点相等的值。
 
-**提示**  
-关于标签比条形图高，想一想 `text` 的 `y` 值应该比条形图的 `y` 值大 3 还是小 3。
+**注意：** 对于标签比条形图高的情况，应决定 `text` 的 `y` 值应比条形图的 `y` 值大还是小 3 个单位。
 
 # --hints--
 
-第一个 `text` 元素应该有一个值为 12 的标签，并且 `y` 值为 61。
+第一个 `text` 元素应有一个值为 `12` 的标签，且 `y` 值为 `61`。
 
 ```js
 assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
 ```
 
-第二个 `text` 元素应该有一个值为 31 的标签，并且 `y` 值为 4。
+第二个 `text` 元素应有一个值为 `31` 的标签，且 `y` 值为 `4`。
 
 ```js
 assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
 ```
 
-第三个 `text` 元素应该有一个值为 22 的标签，并且 `y` 值为 31。
+第三个 `text` 元素应有一个值为 `22` 的标签，且 `y` 值为 `31`。
 
 ```js
 assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
 ```
 
-第四个 `text` 元素应该有一个值为 17 的标签，并且 `y` 值为 46。
+第四个 `text` 元素应有一个值为 `17` 的标签，且 `y` 值为 `46`。
 
 ```js
 assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
 ```
 
-第五个 `text` 元素应该有一个值为 25 的标签，并且 `y` 值为 22。
+第五个 `text` 元素应有一个值为 `25` 的标签，且 `y` 值为 `22`。
 
 ```js
 assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
 ```
 
-第六个 `text` 元素应该有一个值为 18 的标签，并且 `y` 值为 43。
+第六个 `text` 元素应有一个值为 `18` 的标签，且 `y` 值为 `43`。
 
 ```js
 assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
 ```
 
-第七个 `text` 元素应该有一个值为 29 的标签，并且 `y` 值为 10。
+第七个 `text` 元素应有一个值为 `29` 的标签，且 `y` 值为 `10`。
 
 ```js
 assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
 ```
 
-第八个 `text` 元素应该有一个值为 14 的标签，并且 `y` 值为 55。
+第八个 `text` 元素应有一个值为 `14` 的标签，其 `y` 值为 `55`。
 
 ```js
 assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
 ```
 
-第九个 `text` 元素应该有一个值为 9 的标签，并且 `y` 值为 70。
+第九个 `text` 元素应有一个值为 `9` 的标签，且 `y` 值为 `70`。
 
 ```js
 assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
index 348828f163..e5ce3b05f3 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa7367417b2b2512bc7
-title: Change Styles Based on Data
+title: 根据数据更改样式
 challengeType: 6
 forumTopicId: 301479
 dashedName: change-styles-based-on-data
@@ -8,76 +8,75 @@ dashedName: change-styles-based-on-data
 
 # --description--
 
-D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the `style()` method to change the styling for different elements.
+D3 是关于可视化和展示数据的。 如果你想基于数据来改变元素的样式， 你可以在 `style()` 方法中使用回调函数来修改不同元素的样式。
 
-For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point:
+例如，你想将值小于 20 的数据点设置为蓝色，其余设置为红色。 你可以在 `style()` 方法中使用包含条件逻辑的回调函数。 回调函数以 `d` 作为参数来表示一个数据点：
 
 ```js
 selection.style("color", (d) => {
-  /* Logic that returns the color based on a condition */
+
 });
 ```
 
-The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well.
+`style()` 方法不仅仅可以设置 `color`——它也适用于其他 CSS 属性。
 
 # --instructions--
 
-Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green".
+在编辑器中添加 `style()` 方法，根据条件设置 `h2` 元素的 `color` 属性。 写一个回调函数，如果数据值小于 20，则返回红色（red），否则返回绿色（green）。
 
-**Note**  
-You can use if-else logic, or the ternary operator.
+**注意：** 你可以使用 if-else 逻辑或者三元操作符。
 
 # --hints--
 
-The first `h2` should have a `color` of red.
+第一个 `h2` 的 `color` 应该为 red。
 
 ```js
 assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
 ```
 
-The second `h2` should have a `color` of green.
+第二个 `h2` 的 `color` 应该为 green。
 
 ```js
 assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
 ```
 
-The third `h2` should have a `color` of green.
+第三个 `h2` 的 `color` 应该为 green。
 
 ```js
 assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
 ```
 
-The fourth `h2` should have a `color` of red.
+第四个 `h2` 的 `color` 应该为 red。
 
 ```js
 assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
 ```
 
-The fifth `h2` should have a `color` of green.
+第五个 `h2` 的 `color` 应该为 green。
 
 ```js
 assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
 ```
 
-The sixth `h2` should have a `color` of red.
+第六个 `h2` 的 `color` 应该为 red。
 
 ```js
 assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
 ```
 
-The seventh `h2` should have a `color` of green.
+第七个 `h2` 的 `color` 应该为 green。
 
 ```js
 assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
 ```
 
-The eighth `h2` should have a `color` of red.
+第八个 `h2` 的 `color` 应该为 red。
 
 ```js
 assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
 ```
 
-The ninth `h2` should have a `color` of red.
+第九个 `h2` 的 `color` 应该为 red。
 
 ```js
 assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
index d49e0a571f..60669cab85 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa9367417b2b2512bd1
-title: Change the Color of an SVG Element
+title: 更改 SVG 元素的颜色
 challengeType: 6
 forumTopicId: 301480
 dashedName: change-the-color-of-an-svg-element
@@ -8,17 +8,17 @@ dashedName: change-the-color-of-an-svg-element
 
 # --description--
 
-The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.
+所有条形图的位置都是正确的，但是它们都是一样的黑色。 SVG 可以改变条形图的颜色。
 
-In SVG, a `rect` shape is colored with the `fill` attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.
+在 SVG 中， `rect` 图形用 `fill` 属性着色。 它支持十六进制代码、颜色名称、rgb 值以及更复杂的选项，比如渐变和透明。
 
 # --instructions--
 
-Add an `attr()` method to set the "fill" of all the bars to the color "navy".
+添加 `attr()` 方法，将所有条形图的 `fill` 设置为海军蓝。
 
 # --hints--
 
-The bars should all have a `fill` color of navy.
+所有条形图的 `fill` 颜色都应该是 navy（海军蓝）。
 
 ```js
 assert($('rect').css('fill') == 'rgb(0, 0, 128)');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
index 00ce9fa19f..c3dd4e85fb 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa8367417b2b2512bca
-title: Change the Presentation of a Bar Chart
+title: 更改条形图的显示方式
 challengeType: 6
 forumTopicId: 301481
 dashedName: change-the-presentation-of-a-bar-chart
@@ -8,22 +8,21 @@ dashedName: change-the-presentation-of-a-bar-chart
 
 # --description--
 
-The last challenge created a bar chart, but there are a couple of formatting changes that could improve it:
+上一个挑战创建了一个条形图，可以通过下面的格式调整来美化它：
 
-1) Add space between each bar to visually separate them, which is done by adding a margin to the CSS for the `bar` class
+1) 通过在 CSS 中为 `bar` class 添加 margin 属性，给每一个条形图之间添加空格，把它们分开。
 
-2) Increase the height of the bars to better show the difference in values, which is done by multiplying the value by a number to scale the height
+2) 通过给每个值乘以一个数来缩放高度，增加高度，以更好地显示值的差异。
 
 # --instructions--
 
-First, add a `margin` of 2px to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value 10 times the original data value (plus the "px").
+首先，在 `style` 标签中给 `bar` class 增加值为 `2px` 的 `margin`。 然后，更改 `style()` 方法中的回调函数，使其返回原始数据值的 `10` 倍（加上 `px`）。
 
-**Note**  
-Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
+**注意：**每一个数值点乘以*相同的*常量值，仅仅改变比例。 这就像放大，它不会改变底层数据的含义。
 
 # --hints--
 
-The first `div` should have a `height` of 120 pixels and a `margin` of 2 pixels.
+第一个 `div` 应有一个 `120` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -32,7 +31,7 @@ assert(
 );
 ```
 
-The second `div` should have a `height` of 310 pixels and a `margin` of 2 pixels.
+第二个 `div` 应有一个 `310` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -41,7 +40,7 @@ assert(
 );
 ```
 
-The third `div` should have a `height` of 220 pixels and a `margin` of 2 pixels.
+第三个 `div` 应有一个 `220` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -50,7 +49,7 @@ assert(
 );
 ```
 
-The fourth `div` should have a `height` of 170 pixels and a `margin` of 2 pixels.
+第四个 `div` 应有一个 `170` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -59,7 +58,7 @@ assert(
 );
 ```
 
-The fifth `div` should have a `height` of 250 pixels and a `margin` of 2 pixels.
+第五个 `div` 应有一个 `250` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -68,7 +67,7 @@ assert(
 );
 ```
 
-The sixth `div` should have a `height` of 180 pixels and a `margin` of 2 pixels.
+第六个 `div` 应有一个 `180` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -77,7 +76,7 @@ assert(
 );
 ```
 
-The seventh `div` should have a `height` of 290 pixels and a `margin` of 2 pixels.
+第七个 `div` 应有一个 `290` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -86,7 +85,7 @@ assert(
 );
 ```
 
-The eighth `div` should have a `height` of 140 pixels and a `margin` of 2 pixels.
+第八个 `div` 应有一个 `140` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -95,7 +94,7 @@ assert(
 );
 ```
 
-The ninth `div` should have a `height` of 90 pixels and a `margin` of 2 pixels.
+第九个 `div` 应有一个 `90` 像素的 `height` 和一个 `2` 像素的 `margin`。
 
 ```js
 assert(
@@ -113,10 +112,10 @@ assert(
   .bar {
     width: 25px;
     height: 100px;
-    /* Only change code below this line */
+    /* Add your code below this line */
 
 
-    /* Only change code above this line */
+    /* Add your code above this line */
     display: inline-block;
     background-color: blue;
   }
@@ -130,7 +129,7 @@ assert(
       .enter()
       .append("div")
       .attr("class", "bar")
-      .style("height", (d) => (d + "px"))
+      .style("height", (d) => (d + "px")) // Change this line
   </script>
 </body>
 ```
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md
index 3712daf3f6..afd8707573 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa8367417b2b2512bcd
-title: Create a Bar for Each Data Point in the Set
+title: 为集合中的每个数据点创建一个数据条
 challengeType: 6
 forumTopicId: 301482
 dashedName: create-a-bar-for-each-data-point-in-the-set
@@ -8,9 +8,9 @@ dashedName: create-a-bar-for-each-data-point-in-the-set
 
 # --description--
 
-The last challenge added only one rectangle to the `svg` element to represent a bar. Here, you'll combine what you've learned so far about `data()`, `enter()`, and SVG shapes to create and append a rectangle for each data point in `dataset`.
+上个挑战在 `svg` 中只添加了一个矩形来表示数据条。 接下来你将结合到目前为止所学的关于 `data()`、`enter()` 和 SVG 图形的知识，为 `dataset` 中的每一个数据点创建并且添加一个矩形。
 
-A previous challenge showed the format for how to create and append a `div` for each item in `dataset`:
+之前的挑战展示了如何为 `dataset` 中的每个对象创建并添加一个 `div`：
 
 ```js
 d3.select("body").selectAll("div")
@@ -19,33 +19,33 @@ d3.select("body").selectAll("div")
   .append("div")
 ```
 
-There are a few differences working with `rect` elements instead of `divs`. The `rects` must be appended to an `svg` element, not directly to the `body`. Also, you need to tell D3 where to place each `rect` within the `svg` area. The bar placement will be covered in the next challenge.
+操作 `rect` 元素和 `divs` 有一些不同。 `rects` 必须添加在 `svg` 元素内，而不能直接添加在 `body` 内。 同时，你需要告诉 D3 将 `rect` 放在 `svg` 区域的哪个位置。 条形的放置会在下一个挑战中讲到。
 
 # --instructions--
 
-Use the `data()`, `enter()`, and `append()` methods to create and append a `rect` for each item in `dataset`. The bars should display all on top of each other; this will be fixed in the next challenge.
+用 `data()`、`enter()`、`append()` 方法为 `dataset` 中的每一个对象创建并添加一个 `rect` 。 每个数据条都将直接显示在上一个数据条的上面，这一点将在下一个挑战中实现。
 
 # --hints--
 
-Your document should have 9 `rect` elements.
+应该包含 9 个 `rect` 元素。
 
 ```js
 assert($('rect').length == 9);
 ```
 
-Your code should use the `data()` method.
+应该使用 `data()` 方法。
 
 ```js
 assert(code.match(/\.data/g));
 ```
 
-Your code should use the `enter()` method.
+应该使用 `enter()` 方法。
 
 ```js
 assert(code.match(/\.enter/g));
 ```
 
-Your code should use the `append()` method.
+应该使用 `append()` 方法。
 
 ```js
 assert(code.match(/\.append/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
index 3f75bf3e28..b10b8a634d 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fab367417b2b2512bda
-title: Create a Linear Scale with D3
+title: 用 D3 创建线性比例
 challengeType: 6
 forumTopicId: 301483
 dashedName: create-a-linear-scale-with-d3
@@ -8,39 +8,39 @@ dashedName: create-a-linear-scale-with-d3
 
 # --description--
 
-The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.
+条形图和散点图都直接在 SVG 画布上绘制数据。 但是，如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。
 
-In D3, there are scales to help plot data. `Scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
+D3 中，比例尺可帮助布局数据。 `scales` 是函数，它告诉程序如何将一组原始数据点映射到 SVG 画布上。
 
-For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
+例如，假设你有一个 100x500 大小的 SVG 画布，你想为许多国家绘制国内生产总值（GDP）的图表。 这组数据将在十亿美元或万亿美元的范围内。 你给 D3 提供一种缩放方法，告诉它如何将大的 GDP 值放置在 100x500 大小的区域。
 
-It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.
+你不太可能按数据原本的大小来绘制图表。 在绘制之前，将整个数据集缩放，让 `x` 和 `y` 值适合画布的宽高。
 
-D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:
+D3 有几种缩放类型。 对于线性缩放（通常使用于定量数据），使用 D3 的 `scaleLinear()` 方法：
 
 `const scale = d3.scaleLinear()`
 
-By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
+默认情况下，比例尺使用一比一的比例， 输出的值和输入的值相同。 后面的挑战将涉及如何改变默认比例。
 
 # --instructions--
 
-Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of 50.
+改变 `scale` 变量的值，创建线性缩放。 然后将 `output` 变量设置为 scale 函数，调用函数时传入参数 `50`。
 
 # --hints--
 
-The text in the `h2` should be 50.
+`h2` 的文本应为 `50`。
 
 ```js
 assert($('h2').text() == '50');
 ```
 
-Your code should use the `scaleLinear()` method.
+应使用 `scaleLinear()` 方法。
 
 ```js
 assert(code.match(/\.scaleLinear/g));
 ```
 
-The `output` variable should call `scale` with an argument of 50.
+`output` 变量应调用 `scale`，传入参数 `50`。
 
 ```js
 assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
index dea96419de..74362deac5 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fab367417b2b2512bd7
-title: Create a Scatterplot with SVG Circles
+title: 使用 SVG Circles 创建散点图
 challengeType: 6
 forumTopicId: 301484
 dashedName: create-a-scatterplot-with-svg-circles
@@ -8,20 +8,19 @@ dashedName: create-a-scatterplot-with-svg-circles
 
 # --description--
 
-A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the `x` and `y` axes, and are used to position the circle in the visualization.
+散点图是另一种形式的可视化。 它用圆圈来映射数据点，每个数据点有两个值。 这两个值和 `x` 和 `y` 轴相关联，在可视化中用来给圆圈定位。
 
-SVG has a `circle` tag to create the circle shape. It works a lot like the `rect` elements you used for the bar chart.
+SVG 用 `circle` 标签来创建圆形。 它和之前用来构建条形图的 `rect` 非常相像。
 
 # --instructions--
 
-Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas.
+使用 `data()`、`enter()`、`append()` 方法将 `dataset` 和新添加到 SVG 画布上的 `circle` 元素绑定起来。
 
-**Note**  
-The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
+**注意：** 圆形并不可见，因为我们还没有设置它们的属性。 我们会在下一个挑战中设置属性。
 
 # --hints--
 
-Your code should have 10 `circle` elements.
+应该有 10 个 `circle` 元素。
 
 ```js
 assert($('circle').length == 10);
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
index 5e24ba8263..5238ca87a5 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa8367417b2b2512bcc
-title: Display Shapes with SVG
+title: 用 SVG 显示形状
 challengeType: 6
 forumTopicId: 301485
 dashedName: display-shapes-with-svg
@@ -8,47 +8,47 @@ dashedName: display-shapes-with-svg
 
 # --description--
 
-The last challenge created an `svg` element with a given width and height, which was visible because it had a `background-color` applied to it in the `style` tag. The code made space for the given width and height.
+上个挑战用给定的宽和高创建了一个 `svg` 元素，因为在它的 `style` 标签中有 `background-color`，所以它是可见的。 这一段代码为给定的宽和高腾出空间。
 
-The next step is to create a shape to put in the `svg` area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (`<rect>`) SVG shape could create a bar in a bar chart.
+下一步是在 `svg` 区域中创建图形。 SVG 支持多种图形，比如矩形和圆形， 并用它们来显示数据。 例如，在条形图中一个矩形（`<rect>`）SVG 图形可以创建一个组。
 
-When you place a shape into the `svg` area, you can specify where it goes with `x` and `y` coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for `x` push the shape to the right, and positive values for `y` push the shape down from the origin point.
+当把图形放入 `svg` 区域中时，你可以用 `x` 和 `y` 坐标来指定它的位置。 起始点 (0,0) 是在左上角。 `x` 正值将图形右移，`y` 正值将图形从原点下移
 
-To place a shape in the middle of the 500 (width) x 100 (height) `svg` from last challenge, the `x` coordinate would be 250 and the `y` coordinate would be 50.
+若要把一个图形放在上个挑战的 500（宽）x 100（高）的 `svg` 中心，可将 `x` 坐标设置为 250，`y` 坐标设置为 50。
 
-An SVG `rect` has four attributes. There are the `x` and `y` coordinates for where it is placed in the `svg` area. It also has a `height` and `width` to specify the size.
+SVG 的 `rect` 有四个属性。 `x` 和 `y` 坐标指定图形放在 `svg` 区域的位置， `height` 和 `width` 指定图形大小。
 
 # --instructions--
 
-Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of 25 and `height` attribute of 100. Also, give the `rect` `x` and `y` attributes each set to 0.
+用 `append()` 给 `svg` 添加一个 `width` 为 `25`、`height` 为 `100` 的 `rect` 形状。 同时，将 `rect` 的 `x` 和 `y` 都设置为 `0`。
 
 # --hints--
 
-Your document should have 1 `rect` element.
+文档应该有 1 个 `rect` 元素。
 
 ```js
 assert($('rect').length == 1);
 ```
 
-The `rect` element should have a `width` attribute set to 25.
+`rect` 元素的 `width` 应为 `25`。
 
 ```js
 assert($('rect').attr('width') == '25');
 ```
 
-The `rect` element should have a `height` attribute set to 100.
+`rect` 元素的 `height` 应为 `100`。
 
 ```js
 assert($('rect').attr('height') == '100');
 ```
 
-The `rect` element should have an `x` attribute set to 0.
+`rect` 元素的 `x` 值应为 `0`。
 
 ```js
 assert($('rect').attr('x') == '0');
 ```
 
-The `rect` element should have a `y` attribute set to 0.
+`rect` 元素的 `y` 值应为 `0`。
 
 ```js
 assert($('rect').attr('y') == '0');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
index dcf94bee44..85ec1b17e1 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa9367417b2b2512bcf
-title: Dynamically Change the Height of Each Bar
+title: 动态更改每个条形的高度
 challengeType: 6
 forumTopicId: 301486
 dashedName: dynamically-change-the-height-of-each-bar
@@ -8,75 +8,73 @@ dashedName: dynamically-change-the-height-of-each-bar
 
 # --description--
 
-The height of each bar can be set to the value of the data point in the array, similar to how the `x` value was set dynamically.
+和动态设置 `x` 值一样，也可以把每个条形的高度设置成数组中数据点的值。
 
 ```js
 selection.attr("property", (d, i) => {
-  /* 
-  * d is the data point value
-  * i is the index of the data point in the array
-  */
+
 })
 ```
 
+`d` 是数据点值，`i` 是数组中数据点的索引。
+
 # --instructions--
 
-Change the callback function for the `height` attribute to return the data value times 3.
+改变 `height` 属性的回调函数，让它返回数据值乘以 3 的值。
 
-**Note**  
-Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
+**注意：** 记住，把所有数据点乘以相同的常数来对数据进行缩放（就像放大）， 这有利于看清例子中条形数值之间的差异。
 
 # --hints--
 
-The first `rect` should have a `height` of 36.
+第一个 `rect` 的 `height` 应为 `36`。
 
 ```js
 assert($('rect').eq(0).attr('height') == '36');
 ```
 
-The second `rect` should have a `height` of 93.
+第二个 `rect` 的 `height` 应为 `93`。
 
 ```js
 assert($('rect').eq(1).attr('height') == '93');
 ```
 
-The third `rect` should have a `height` of 66.
+第三个 `rect` 的 `height` 应为 `66`。
 
 ```js
 assert($('rect').eq(2).attr('height') == '66');
 ```
 
-The fourth `rect` should have a `height` of 51.
+第四个 `rect` 的 `height` 应为 `51`。
 
 ```js
 assert($('rect').eq(3).attr('height') == '51');
 ```
 
-The fifth `rect` should have a `height` of 75.
+第五个 `rect` 的 `height` 应为 `75`。
 
 ```js
 assert($('rect').eq(4).attr('height') == '75');
 ```
 
-The sixth `rect` should have a `height` of 54.
+第六个 `rect` 的 `height` 应为 `54`。
 
 ```js
 assert($('rect').eq(5).attr('height') == '54');
 ```
 
-The seventh `rect` should have a `height` of 87.
+第七个 `rect` 的 `height` 应为 `87`。
 
 ```js
 assert($('rect').eq(6).attr('height') == '87');
 ```
 
-The eighth `rect` should have a `height` of 42.
+第八个 `rect` 的 `height` 应为 `42`。
 
 ```js
 assert($('rect').eq(7).attr('height') == '42');
 ```
 
-The ninth `rect` should have a `height` of 27.
+第九个 `rect` 的 `height` 应为 `27`。
 
 ```js
 assert($('rect').eq(8).attr('height') == '27');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
index eb0cff2051..1c2c466a97 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa9367417b2b2512bce
-title: Dynamically Set the Coordinates for Each Bar
+title: 动态设置每个 Bar 的坐标
 challengeType: 6
 forumTopicId: 301487
 dashedName: dynamically-set-the-coordinates-for-each-bar
@@ -8,83 +8,79 @@ dashedName: dynamically-set-the-coordinates-for-each-bar
 
 # --description--
 
-The last challenge created and appended a rectangle to the `svg` element for each point in `dataset` to represent a bar. Unfortunately, they were all stacked on top of each other.
+上个挑战在 `svg` 元素中为 `dataset` 的每一个数据点创建并且添加了一个矩形，其中一个矩形表示一组， 但是它们相互重叠。
 
-The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.
+矩形的位置是由 `x` 和 `y` 属性决定的。 它们告诉 D3 在 `svg` 区域的哪个位置开始绘制图形。 上个挑战将它们都设置为 0，因此所有条形都在左上角。
 
-For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the x value should increase.
+对于条形图，所有条形应该处于相同的垂直线上，也就是说所有条形的 `y` 值相同（为 0）， 但是 `x` 值需要随着增添新的条形而变化。 注意 `x` 值越大，图形就越靠近右边。 所以当遍历 `dataset` 中的数组元素时，`x` 的值应该递增。
 
-The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:
+D3 的 `attr()` 方法可接收一个回调函数来动态设置属性。 这个回调函数有两个参数，一个是数据点本身（通常是 `d`），另一个是该数据点在数组中的下标， 这个参数是可选的。 下面是其格式：
 
 ```js
 selection.attr("property", (d, i) => {
-  /* 
-  * d is the data point value
-  * i is the index of the data point in the array
-  */
+
 })
 ```
 
-It's important to note that you do NOT need to write a `for` loop or use `forEach()` to iterate over the items in the data set. Recall that the `data()` method parses the data set, and any method that's chained after `data()` is run once for each item in the data set.
+值得注意的是，你不需要写 `for` 循环或者用 `forEach()` 迭代数据集中的对象。 `data()` 方法会解析数据集，任何链接在 `data()` 后面的方法都会为数据集中的每个对象运行一次。
 
 # --instructions--
 
-Change the `x` attribute callback function so it returns the index times 30.
+改变 `x` 属性的回调函数，让它返回下标乘以 30 的值。
 
-**Note**  
-Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example.
+**注意：**每组的宽为 25，所以每次 `x` 增加 30，可在每组之间留出一些空隙。 在这个例子中任何比 25 大的数也同样适用。
 
 # --hints--
 
-The first `rect` should have an `x` value of 0.
+第一个 `rect` 的 `x` 值应该为 `0`。
 
 ```js
 assert($('rect').eq(0).attr('x') == '0');
 ```
 
-The second `rect` should have an `x` value of 30.
+第二个 `rect` 的 `x` 值应该为 `30`。
 
 ```js
 assert($('rect').eq(1).attr('x') == '30');
 ```
 
-The third `rect` should have an `x` value of 60.
+第三个 `rect` 的 `x` 值应该为 `60`。
 
 ```js
 assert($('rect').eq(2).attr('x') == '60');
 ```
 
-The fourth `rect` should have an `x` value of 90.
+第四个 `rect` 的 `x` 值应该为 `90`。
 
 ```js
 assert($('rect').eq(3).attr('x') == '90');
 ```
 
-The fifth `rect` should have an `x` value of 120.
+第五个 `rect` 的 `x` 值应该为 `120`。
 
 ```js
 assert($('rect').eq(4).attr('x') == '120');
 ```
 
-The sixth `rect` should have an `x` value of 150.
+第六个 `rect` 的 `x` 值应该为 `150`。
 
 ```js
 assert($('rect').eq(5).attr('x') == '150');
 ```
 
-The seventh `rect` should have an `x` value of 180.
+第七个 `rect` 的 `x` 值应该为 `180`。
 
 ```js
 assert($('rect').eq(6).attr('x') == '180');
 ```
 
-The eighth `rect` should have an `x` value of 210.
+第八个 `rect` 的 `x` 值应该为 `210`。
 
 ```js
 assert($('rect').eq(7).attr('x') == '210');
 ```
 
-The ninth `rect` should have an `x` value of 240.
+第九个 `rect` 的 `x` 值应该为 `240`。
 
 ```js
 assert($('rect').eq(8).attr('x') == '240');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
index 794e45b868..2985eb1f2b 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa9367417b2b2512bd0
-title: Invert SVG Elements
+title: 反转 SVG 元素
 challengeType: 6
 forumTopicId: 301488
 dashedName: invert-svg-elements
@@ -8,74 +8,73 @@ dashedName: invert-svg-elements
 
 # --description--
 
-You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates.
+你可能已经注意到了常见的条形图像是把这个翻转或者颠倒过来。 这是因为 SVG 的 (x, y) 坐标有些特别。
 
-In SVG, the origin point for the coordinates is in the upper-left corner. An `x` coordinate of 0 places a shape on the left edge of the SVG area. A `y` coordinate of 0 places a shape on the top edge of the SVG area. Higher `x` values push the rectangle to the right. Higher `y` values push the rectangle down.
+在 SVG 中，坐标轴的原点在左上角。 `x` 坐标为 0 将图形放在 SVG 区域的左边缘， `y` 坐标为 0 将图形放在 SVG 区域的上边缘。 `x` 值增大矩形将向右移动， `y` 值增大矩形将向下移动。
 
-To make the bars right-side-up, you need to change the way the `y` coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.
+为了使条形图向上，需要改变 `y` 坐标计算的方式。 这需要计算条形的高度和 SVG 区域的总高度。
 
-The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the `y` coordinate needs a value of 100. If the data point value were 1, you would start with a `y` coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final `y` coordinate would be 99.
+SVG 区域的高度为 100。 如果在集合中一个数据点的值为 0，那么条形将从 SVG 区域的最底端开始（而不是顶端）。 为此，`y` 坐标的值应为 100。 如果数据点的值为 1，你将从 `y` 坐标为 100 开始来将这个条形设置在底端， 然后需要考虑该条形的高度为 1，所以最终的 `y` 坐标将是 99。
 
-The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars right-side-up.
+`y` 坐标为 `y = heightOfSVG - heightOfBar` 会将条形图向上放置。
 
 # --instructions--
 
-Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`.
+改变 `y` 属性的回调函数，让条形图向上放置。 `height` 的值是 3 倍 `d` 的值。
 
-**Note**  
-In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points.
+**注意：**通常，关系是 `y = h - m * d`，其中 `m` 是缩放数据点的常数。
 
 # --hints--
 
-The first `rect` should have a `y` value of 64.
+第一个 `rect` 的 `y` 值应该为 `64`。
 
 ```js
 assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
 ```
 
-The second `rect` should have a `y` value of 7.
+第二个 `rect` 的 `y` 值应该为 `7`。
 
 ```js
 assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
 ```
 
-The third `rect` should have a `y` value of 34.
+第三个 `rect` 的 `y` 值应该为 `34`。
 
 ```js
 assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
 ```
 
-The fourth `rect` should have a `y` value of 49.
+第四个 `rect` 的 `y` 值应该为 `49`。
 
 ```js
 assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
 ```
 
-The fifth `rect` should have a `y` value of 25.
+第五个 `rect` 的 `y` 值应该为 `25`。
 
 ```js
 assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
 ```
 
-The sixth `rect` should have a `y` value of 46.
+第六个 `rect` 的 `y` 值应该为 `46`。
 
 ```js
 assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
 ```
 
-The seventh `rect` should have a `y` value of 13.
+第七个 `rect` 的 `y` 值应该为 `13`。
 
 ```js
 assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
 ```
 
-The eighth `rect` should have a `y` value of 58.
+第八个 `rect` 的 `y` 值应该为 `58`。
 
 ```js
 assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
 ```
 
-The ninth `rect` should have a `y` value of 73.
+第九个 `rect` 的 `y` 值应该为 `73`。
 
 ```js
 assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
index a989479069..b647e1ffa1 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa8367417b2b2512bcb
-title: Learn About SVG in D3
+title: 了解 D3 中的 SVG
 challengeType: 6
 forumTopicId: 301489
 dashedName: learn-about-svg-in-d3
@@ -8,36 +8,35 @@ dashedName: learn-about-svg-in-d3
 
 # --description--
 
-<dfn>SVG</dfn> stands for <dfn>Scalable Vector Graphics</dfn>.
+<dfn>SVG</dfn> 是 <dfn>Scalable Vector Graphics</dfn> 的缩写。
 
-Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.
+“scalable” 的意思是如果放大或缩小一个对象，它不会像素化。 不管是在小的移动手机屏幕上还是在大的电视显示器上，它都会随着显示系统缩放。
 
-SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML `svg` tag.
+SVG 用于制作常见的几何图形。 由于 D3 将数据映射成可视化表达，它用 SVG 来创建可视化的图形。 网页上的 SVG 图形必须在 HTML 的 `svg` 标签中。
 
-CSS can be scalable when styles use relative units (such as `vh`, `vw`, or percentages), but using SVG is more flexible to build data visualizations.
+当使用相对单位（例如 `vh`、`vw` 或者百分比）时，CSS 是可伸缩的。 但是在实现数据可视化的时候 SVG 更加的灵活。
 
 # --instructions--
 
-Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag.
+用 `append()` 给 `body` 加一个 `svg` 节点。 使用 `attr()` 或 `style()` 方法给它设置一个 `width` 属性和一个 `height` 属性，并分别将它们设置为给定的常量 `w` 和给定的常量 `h`。 你可以在输出中看见它，因为在 `style` 标签中它的 `background-color` 设置为 pink。
 
-**Note**  
-When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
+**注意：**width 和 height `attr()` 没有单位。 它们是用来定义缩放的——但无论怎么缩放，元素的宽高比永远是 5:1 。
 
 # --hints--
 
-Your document should have 1 `svg` element.
+文档应该有 1 个 `svg` 元素。
 
 ```js
 assert($('svg').length == 1);
 ```
 
-The `svg` element should have a `width` attribute set to 500 or styled to have a width of 500px.
+`svg` 元素应有一个 `width` 属性，值为 `500`，或者在样式中 width 值为 `500px`。
 
 ```js
 assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
 ```
 
-The `svg` element should have a `height` attribute set to 100 or styled to have a height of 100px.
+`svg` 元素应有一个 `height` 属性，值为 `100`，或者在样式中 height 值为 `100px`。
 
 ```js
 assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
index d6c9240e9d..672c579c04 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa6367417b2b2512bc3
-title: Select a Group of Elements with D3
+title: 用 D3 选择一组元素
 challengeType: 6
 forumTopicId: 301490
 dashedName: select-a-group-of-elements-with-d3
@@ -8,19 +8,19 @@ dashedName: select-a-group-of-elements-with-d3
 
 # --description--
 
-D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:
+`selectAll()` 方法选择一组元素。 它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。 以下是一个选择文本中所有锚标签的例子：
 
 `const anchors = d3.selectAll("a");`
 
-Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods.
+像 `select()` 方法一样，`selectAll()` 也支持链式调用，你可以在它之后调用其他方法。
 
 # --instructions--
 
-Select all of the `li` tags in the document, and change their text to "list item" by chaining the `.text()` method.
+选择所有的 `li` 标签，通过 `.text()` 方法将它们的文本改为 `list item`。
 
 # --hints--
 
-There should be 3 `li` elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
+页面上应该有 3 个 `li` 元素，每个元素的文本内容应为 `list item`。 大小写和空格必须一致。
 
 ```js
 assert(
@@ -30,13 +30,13 @@ assert(
 );
 ```
 
-Your code should access the `d3` object.
+应该能访问 `d3` 的对象。
 
 ```js
 assert(code.match(/d3/g));
 ```
 
-Your code should use the `selectAll` method.
+应该使用 `selectAll` 方法。
 
 ```js
 assert(code.match(/\.selectAll/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
index 27b93e18b0..cad9a9ddbf 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fac367417b2b2512bdb
-title: Set a Domain and a Range on a Scale
+title: 按比例设置域和范围
 challengeType: 6
 forumTopicId: 301491
 dashedName: set-a-domain-and-a-range-on-a-scale
@@ -8,64 +8,61 @@ dashedName: set-a-domain-and-a-range-on-a-scale
 
 # --description--
 
-By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting.
+默认情况下，比例尺使用一对一关系（identity relationship）， 即输入值直接映射为输出值。 但是比例尺可以更灵活更有趣。
 
-Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the <dfn>domain</dfn>.
+假设有一个数据集范围为 50 到 480， 这是缩放的输入信息，也被称为<dfn>域</dfn>。
 
-You want to map those points along the `x` axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.
+你想沿着 `x` 轴将这些点映射到 SVG 画布上，位置介于 10 个单位到 500 个单位之间。 这是输出信息，也被称为<dfn>范围</dfn>。
 
-The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:
+`domain()` 和 `range()` 方法设置比例尺的值， 它们都接受一个至少有两个元素的数组作为参数。 下面是一个例子：
 
 ```js
-// Set a domain
-// The domain covers the set of input values
 scale.domain([50, 480]);
-// Set a range
-// The range covers the set of output values
 scale.range([10, 500]);
-scale(50) // Returns 10
-scale(480) // Returns 500
-scale(325) // Returns 323.37
-scale(750) // Returns 807.67
+scale(50)
+scale(480)
+scale(325)
+scale(750)
 d3.scaleLinear()
 ```
 
-Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
+按顺序，将在控制台中显示以下值：`10`、`500`、`323.37` 和 `807.67`。
+
+注意，比例尺使用了域和范围之间的线性关系来找出给定数字的输出值。 域中的最小值（50）映射为范围中的最小值（10）。
 
 # --instructions--
 
-Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`.
+创建一个比例尺，将它的域设置为 `[250, 500]`，范围设置为 `[10, 150]`。
 
-**Note**  
-You can chain the `domain()` and `range()` methods onto the `scale` variable.
+**注意：**你可以将 `domain()` 和 `range()` 方法串联在 `scale` 变量后。
 
 # --hints--
 
-Your code should use the `domain()` method.
+应使用 `domain()` 方法。
 
 ```js
 assert(code.match(/\.domain/g));
 ```
 
-The `domain()` of the scale should be set to `[250, 500]`.
+`scale` 的 `domain()` 应为 `[250, 500]`。
 
 ```js
 assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
 ```
 
-Your code should use the `range()` method.
+应使用 `range()` 方法。
 
 ```js
 assert(code.match(/\.range/g));
 ```
 
-The `range()` of the scale should be set to `[10, 150]`.
+`scale` 的 `range()` 应为 `[10, 150]`。
 
 ```js
 assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
 ```
 
-The text in the `h2` should be -102.
+`h2` 的文本应为 `-102`。
 
 ```js
 assert($('h2').text() == '-102');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
index 31dc5162fd..d91713d4bc 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7faa367417b2b2512bd3
-title: Style D3 Labels
+title: 给 D3 标签添加样式
 challengeType: 6
 forumTopicId: 301492
 dashedName: style-d3-labels
@@ -8,21 +8,21 @@ dashedName: style-d3-labels
 
 # --description--
 
-D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as "font-family" or "font-size".
+D3 可以将样式添加到条形标签中。 `fill` 属性为 `text` 节点设置文本颜色， `style()` 方法设置其它样式的 CSS 规则，例如 `font-family` 或 `font-size`。
 
 # --instructions--
 
-Set the `font-size` of the `text` elements to 25px, and the color of the text to red.
+将 `text` 元素的 `font-size` 设置为 `25px`，文本颜色设置为红色（red）。
 
 # --hints--
 
-The labels should all have a `fill` color of red.
+所有标签的 `fill` 颜色应该是 red。
 
 ```js
 assert($('text').css('fill') == 'rgb(255, 0, 0)');
 ```
 
-The labels should all have a `font-size` of 25 pixels.
+所有标签的 `font-size` 应为 `25` 像素。
 
 ```js
 assert($('text').css('font-size') == '25px');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
index 5e7f8c3ff9..f89a044f5c 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa8367417b2b2512bc9
-title: Update the Height of an Element Dynamically
+title: 动态更新元素的高度
 challengeType: 6
 forumTopicId: 301493
 dashedName: update-the-height-of-an-element-dynamically
@@ -8,71 +8,71 @@ dashedName: update-the-height-of-an-element-dynamically
 
 # --description--
 
-The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this:
+之前的挑战包括如何从数组中显示数据和如何添加 CSS 类。 将这些课程的内容结合起来，你就能创建出一个简单的条形图， 只需两步：
 
-1) Create a `div` for each data point in the array
+1) 为每一个数组中的数据点都创建一个 `div`
 
-2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value
+2) 为每个 `div` 动态分配高度值，在 `style()` 方法中使用回调函数将高度值设置为数据大小
 
-Recall the format to set a style using a callback function:
+回想使用回调函数设置样式的格式：
 
 `selection.style("cssProperty", (d) => d)`
 
 # --instructions--
 
-Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string "px" added to it.
+在编辑器中添加 `style()` 方法给每个元素设置 `height` 属性。 使用回调函数返回数据点的值，加上字符串 `px`。
 
 # --hints--
 
-The first `div` should have a `height` of 12 pixels.
+第一个 `div` 的 `height` 值应为 `12` 像素。
 
 ```js
 assert($('div').eq(0)[0].style.height === '12px');
 ```
 
-The second `div` should have a `height` of 31 pixels.
+第二个 `div` 的 `height` 值应为 `31` 像素。
 
 ```js
 assert($('div').eq(1)[0].style.height === '31px');
 ```
 
-The third `div` should have a `height` of 22 pixels.
+第三个 `div` 的 `height` 值应为 `22` 像素。
 
 ```js
 assert($('div').eq(2)[0].style.height === '22px');
 ```
 
-The fourth `div` should have a `height` of 17 pixels.
+第四个 `div` 的 `height` 值应为 `17` 像素。
 
 ```js
 assert($('div').eq(3)[0].style.height === '17px');
 ```
 
-The fifth `div` should have a `height` of 25 pixels.
+第五个 `div` 的 `height` 值应为 `25` 像素。
 
 ```js
 assert($('div').eq(4)[0].style.height === '25px');
 ```
 
-The sixth `div` should have a `height` of 18 pixels.
+第六个 `div` 的 `height` 值应为 `18` 像素。
 
 ```js
 assert($('div').eq(5)[0].style.height === '18px');
 ```
 
-The seventh `div` should have a `height` of 29 pixels.
+第七个 `div` 的 `height` 值应为 `29` 像素。
 
 ```js
 assert($('div').eq(6)[0].style.height === '29px');
 ```
 
-The eighth `div` should have a `height` of 14 pixels.
+第八个 `div` 的 `height` 值应为 `14` 像素。
 
 ```js
 assert($('div').eq(7)[0].style.height === '14px');
 ```
 
-The ninth `div` should have a `height` of 9 pixels.
+第九个 `div` 的 `height` 值应为 `9` 像素。
 
 ```js
 assert($('div').eq(8)[0].style.height === '9px');
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
index 61ffe6a29e..3083fd2306 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fac367417b2b2512bde
-title: Use a Pre-Defined Scale to Place Elements
+title: 使用预定义的比例放置元素
 challengeType: 6
 forumTopicId: 301494
 dashedName: use-a-pre-defined-scale-to-place-elements
@@ -8,32 +8,32 @@ dashedName: use-a-pre-defined-scale-to-place-elements
 
 # --description--
 
-With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
+当比例尺建立好后，是时候重新映射散点图了。 比例尺就像操作函数一样，将 `x` 和 `y` 的原数据值变为适合并可在 SVG 画布上正确渲染的值。 它们使数据在屏幕的布局区域内部。
 
-You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example:
+用比例尺函数为 SVG 图形设置坐标属性值。 这包括 `rect` 或者 `text` 元素的 `x` 和 `y` 属性，或者 `circles` 的 `cx` 和 `cy`。 以下是一个例子：
 
 ```js
 shape
   .attr("x", (d) => xScale(d[0]))
 ```
 
-Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label.
+比例尺设置图形坐标属性来将数据点放置在 SVG 画布上。 当你显示实际数据值时，不用使用比例尺，例如，在提示框或标签中的 `text()` 方法。
 
 # --instructions--
 
-Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of 5 units, too.
+使用 `xScale` 和 `yScale` 将 `circle` 和 `text` 图形放置在 SVG 画布上。 对于 `circles`，使用比例尺设置 `cx` 和 `cy` 属性， 半径为 `5` 个单位。
 
-For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the `xScale`.
+对于 `text` 元素，使用比例尺设置 `x` 和 `y` 属性。 标签应该标注在点的右边， 为此，在将 `x` 数据值传递给 `xScale` 之前，要给它加上 `10` 个单位。
 
 # --hints--
 
-Your code should have 10 `circle` elements.
+应该有 10 个 `circle` 元素。
 
 ```js
 assert($('circle').length == 10);
 ```
 
-The first `circle` element should have a `cx` value of approximately 91 and a `cy` value of approximately 368 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第一个 `circle` 元素的 `cx` 值应该大约为 `91`，`cy` 值应该大约为 `368`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -43,7 +43,7 @@ assert(
 );
 ```
 
-The second `circle` element should have a `cx` value of approximately 159 and a `cy` value of approximately 181 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第二个 `circle` 元素的 `cx` 值应该大约为 `159`，`cy` 值应该大约为 `181`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```
 
-The third `circle` element should have a `cx` value of approximately 340 and a `cy` value of approximately 329 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第三个 `circle` 元素的 `cx` 值应该大约为 `340`，`cy` 值应该大约为 `329`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -63,7 +63,7 @@ assert(
 );
 ```
 
-The fourth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 60 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第四个 `circle` 元素的 `cx` 值应该大约为 `131`，`cy` 值应该大约为 `60`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -73,7 +73,7 @@ assert(
 );
 ```
 
-The fifth `circle` element should have a `cx` value of approximately 440 and a `cy` value of approximately 237 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第五个 `circle` 元素的 `cx` 值应该大约为 `440`，`cy` 值应该大约为 `237`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -83,7 +83,7 @@ assert(
 );
 ```
 
-The sixth `circle` element should have a `cx` value of approximately 271 and a `cy` value of approximately 306 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第六个 `circle` 元素的 `cx` 值应该大约为 `271`，`cy` 值应该大约为 `306`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -93,7 +93,7 @@ assert(
 );
 ```
 
-The seventh `circle` element should have a `cx` value of approximately 361 and a `cy` value of approximately 351 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第七个 `circle` 元素的 `cx` 值应该大约为 `361`，`cy` 值应该大约为 `351`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -103,7 +103,7 @@ assert(
 );
 ```
 
-The eighth `circle` element should have a `cx` value of approximately 261 and a `cy` value of approximately 132 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第八个 `circle` 元素的 `cx` 值应该大约为 `261`，`cy` 值应该大约为 `132`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -113,7 +113,7 @@ assert(
 );
 ```
 
-The ninth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 144 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第九个 `circle` 元素的 `cx` 值应该大约为 `131`，`cy` 值应该大约为 `144`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -123,7 +123,7 @@ assert(
 );
 ```
 
-The tenth `circle` element should have a `cx` value of approximately 79 and a `cy` value of approximately 326 after applying the scales. It should also have an `r` value of 5.
+在使用比例尺后，第十个 `circle` 元素的 `cx` 值应该大约为 `79`，`cy` 值应该大约为 `326`。 它的 `r` 值应为 `5`。
 
 ```js
 assert(
@@ -133,13 +133,13 @@ assert(
 );
 ```
 
-Your code should have 10 `text` elements.
+应该有 10 个 `text` 元素。
 
 ```js
 assert($('text').length == 10);
 ```
 
-The first label should have an `x` value of approximately 100 and a `y` value of approximately 368 after applying the scales.
+在使用比例尺后，第一个标签的 `x` 值应该大约为 `100`，`y` 值应该大约为 `368`。
 
 ```js
 assert(
@@ -148,7 +148,7 @@ assert(
 );
 ```
 
-The second label should have an `x` value of approximately 168 and a `y` value of approximately 181 after applying the scales.
+在使用比例尺后，第二个标签的 `x` 值应该大约为 `168`，`y` 值应该大约为 `181`。
 
 ```js
 assert(
@@ -157,7 +157,7 @@ assert(
 );
 ```
 
-The third label should have an `x` value of approximately 350 and a `y` value of approximately 329 after applying the scales.
+在使用比例尺后，第三个标签的 `x` 值应该大约为 `350`，`y` 值应该大约为 `329`。
 
 ```js
 assert(
@@ -166,7 +166,7 @@ assert(
 );
 ```
 
-The fourth label should have an `x` value of approximately 141 and a `y` value of approximately 60 after applying the scales.
+在使用比例尺后，第四个标签的 `x` 值应该大约为 `141`，`y` 值应该大约为 `60`。
 
 ```js
 assert(
@@ -175,7 +175,7 @@ assert(
 );
 ```
 
-The fifth label should have an `x` value of approximately 449 and a `y` value of approximately 237 after applying the scales.
+在使用比例尺后，第五个标签的 `x` 值应该大约为 `449`，`y` 值应该大约为 `237`。
 
 ```js
 assert(
@@ -184,7 +184,7 @@ assert(
 );
 ```
 
-The sixth label should have an `x` value of approximately 280 and a `y` value of approximately 306 after applying the scales.
+在使用比例尺后，第六个标签的 `x` 值应该大约为 `280`，`y` 值应该大约为 `306`。
 
 ```js
 assert(
@@ -193,7 +193,7 @@ assert(
 );
 ```
 
-The seventh label should have an `x` value of approximately 370 and a `y` value of approximately 351 after applying the scales.
+在使用比例尺后，第七个标签的 `x` 值应该大约为 `370`，`y` 值应该大约为 `351`。
 
 ```js
 assert(
@@ -202,7 +202,7 @@ assert(
 );
 ```
 
-The eighth label should have an `x` value of approximately 270 and a `y` value of approximately 132 after applying the scales.
+在使用比例尺后，第八个标签的 `x` 值应该大约为 `270`，`y` 值应该大约为 `132`。
 
 ```js
 assert(
@@ -211,7 +211,7 @@ assert(
 );
 ```
 
-The ninth label should have an `x` value of approximately 140 and a `y` value of approximately 144 after applying the scales.
+在使用比例尺后，第九个标签的 `x` 值应该大约为 `140`，`y` 值应该大约为 `144`。
 
 ```js
 assert(
@@ -220,7 +220,7 @@ assert(
 );
 ```
 
-The tenth label should have an `x` value of approximately 88 and a `y` value of approximately 326 after applying the scales.
+在使用比例尺后，第十个标签的 `x` 值应该大约为 `88`，`y` 值应该大约为 `326`。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
index 3ec73e8a6d..14422ffbab 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fac367417b2b2512bdd
-title: Use Dynamic Scales
+title: 使用动态比例
 challengeType: 6
 forumTopicId: 301495
 dashedName: use-dynamic-scales
@@ -8,13 +8,13 @@ dashedName: use-dynamic-scales
 
 # --description--
 
-The D3 `min()` and `max()` methods are useful to help set the scale.
+D3 的 `min()` 和 `max()` 方法在设置比例尺时十分有用。
 
-Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.
+对于一个复杂的数据集，首要是设置比例尺，这样可视化才能适合 SVG 容器的宽和高。 所有数据都应布局在 SVG 画布内部，这样它们在页面上才是可见的。
 
-The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization.
+下面这个例子为散点图设置了 x 轴的比例尺。 `domain()` 方法给比例尺传递关于散点图原数据值的信息， `range()` 方法给出在页面上进行可视化的实际空间信息。
 
-In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.
+在这个例子中，domain 是从 0 到数据集中的最大值， 它使用 `max()` 方法和基于数组中 x 值的回调函数。 Range 使用 SVG 画布的宽（`w`），并包含 padding， 这将在散点图和 SVG 画布边缘之间添加空隙。
 
 ```js
 const dataset = [
@@ -32,37 +32,35 @@ const dataset = [
 const w = 500;
 const h = 500;
 
-// Padding between the SVG canvas boundary and the plot
 const padding = 30;
 const xScale = d3.scaleLinear()
   .domain([0, d3.max(dataset, (d) => d[0])])
   .range([padding, w - padding]);
 ```
 
-The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).
+在一开始可能很难理解 padding。 想象 x 轴是一条从 0 到 500 （SVG 画布宽的值）的水平直线。 在 `range()` 方法中包含 padding 使散点图沿着这条直线从 30 （而不是 0）开始，在 470 （而不是 500）结束。
 
 # --instructions--
 
-Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (`h`) and include padding.
+使用 `yScale` 变量创建一个线性的 y 轴比例尺。 domain 应该从 0 开始到数据集中 `y` 的最大值， range 应该使用 SVG 的高（`h`），并包含 padding。
 
-**Note**  
-Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
+**注意：**记得保持绘图在右上角。 当你为 y 坐标设置 range 时，大的值（height 减去 padding）是第一个参数，小的值是第二个参数。
 
 # --hints--
 
-The text in the `h2` should be 30.
+`h2` 的文本应为 `30`。
 
 ```js
 assert(output == 30 && $('h2').text() == '30');
 ```
 
-The `domain()` of yScale should be equivalent to `[0, 411]`.
+yScale 的 `domain()` 应该等于 `[0, 411]`。
 
 ```js
 assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
 ```
 
-The `range()` of yScale should be equivalent to `[470, 30]`.
+yScale 的 `range()` 应该等于 `[470, 30]`。
 
 ```js
 assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
diff --git a/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 b/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
index f30962512e..5978360985 100644
--- a/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
+++ b/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
@@ -1,7 +1,7 @@
 ---
 id: 587d7fac367417b2b2512bdc
 title: >-
-  Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
+  使用 d3.max 和 d3.min 函数在数据集中查找最小值和最大值
 challengeType: 6
 forumTopicId: 301496
 dashedName: >-
@@ -10,40 +10,40 @@ dashedName: >-
 
 # --description--
 
-The D3 methods `domain()` and `range()` set that information for your scale based on the data. There are a couple methods to make that easier.
+D3 的 `domain()` 和 `range()` 方法根据数据设置比例尺的信息。 下面有几种更简单的方法。
 
-Often when you set the domain, you'll want to use the minimum and maximum values within the data set. Trying to find these values manually, especially in a large data set, may cause errors.
+通常当你设置域的时候，你会想用数据集中的最小值和最大值。 试图手动的找到这些值，尤其是在很大的数据集中，可能会出错。
 
-D3 has two methods - `min()` and `max()` to return this information. Here's an example:
+D3 有两个方法——`min()` 和 `max()` 来返回这些值。 下面是一个例子：
 
 ```js
 const exampleData = [34, 234, 73, 90, 6, 52];
-d3.min(exampleData) // Returns 6
-d3.max(exampleData) // Returns 234
+d3.min(exampleData)
+d3.max(exampleData)
 ```
 
-A dataset may have nested arrays, like the \[x, y] coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
+像在散点图的例子中的 `[x, y]` 坐标对一样，数据集有可能嵌套数组。 在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。 幸运的是，`min()` 和 `max()` 都可以使用回调函数。 在下面这个例子中，回调函数的参数 `d` 是当前的内部数组。 回调函数需要从内数组中返回你想比较大小的元素（`x` 值或 `y` 值）。 下面是一个如何找到二维数组的最大值和最小值的例子：
 
 ```js
 const locationData = [[1, 7],[6, 3],[8, 3]];
-// Returns the smallest number out of the first elements
 const minX = d3.min(locationData, (d) => d[0]);
-// minX compared 1, 6, and 8 and is set to 1
 ```
 
+`minX` 的值应为 `1`。
+
 # --instructions--
 
-The `positionData` array holds sub arrays of x, y, and z coordinates. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the `output` variable.
+`positionData` 数组的子数组元素为 x、y 和 z 坐标。 使用 D3 方法从数组中查找 z 坐标（第三个值）的最大值，并将其保存在 `output` 变量中。
 
 # --hints--
 
-The text in the `h2` should be 8.
+`h2` 文本应为 `8`。
 
 ```js
 assert(output == 8 && $('h2').text() == '8');
 ```
 
-Your code should use the `max()` method.
+应使用 `max()` 方法。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
index de8a225c84..fbd261ec0d 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa7367417b2b2512bc4
-title: Work with Data in D3
+title: 使用 D3 中的数据
 challengeType: 6
 forumTopicId: 301497
 dashedName: work-with-data-in-d3
@@ -8,15 +8,15 @@ dashedName: work-with-data-in-d3
 
 # --description--
 
-The D3 library focuses on a data-driven approach. When you have a set of data, you can apply D3 methods to display it on the page. Data comes in many formats, but this challenge uses a simple array of numbers.
+D3 是数据驱动的库。 可以使用 D3 的方法将数组形式的数据显示在页面上。 数据有多种格式，但这个挑战使用了一组简单的数字。
 
-The first step is to make D3 aware of the data. The `data()` method is used on a selection of DOM elements to attach the data to those elements. The data set is passed as an argument to the method.
+第一步是让 D3 知道数据。 `data()` 方法选择连接着数据的 DOM 元素， 数据集作为参数传递给该方法。
 
-A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the `enter()` method for this purpose.
+常见的方法是在文档中为数据集中的每一个数据创建一个元素。 为此，你可以使用 D3 的 `enter()` 方法。
 
-When `enter()` is combined with the `data()` method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.
+当 `enter()` 和 `data()` 方法一起使用时，它把从页面中选择的元素和数据集中的元素作比较。 如果页面中选择的元素较少则创建缺少的元素。
 
-Here is an example that selects a `ul` element and creates a new list item based on the number of entries in the array:
+以下是一个选择 `ul` 元素并根据添加的数组创建新的列表项的例子。
 
 ```html
 <body>
@@ -32,21 +32,21 @@ Here is an example that selects a `ul` element and creates a new list item based
 </body>
 ```
 
-It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text "New item".
+选择不存在的 li 元素似乎有些难以理解。 这段代码告诉 D3 先选择页面上的 `ul` 元素， 再选择所有的列表项，它将返回空。 然后 `data()` 方法接收数组作为参数，并运行三次后面的代码，每次对应数组中的一个对象。 `enter()` 方法发现页面中没有 `li` 元素，但是需要 3 个（每个对应 `dataset` 中的一个数据）。 新的 `li` 元素被追加到 `ul`，文本为 `New item`。
 
 # --instructions--
 
-Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say "New Title". Your code should use the `data()` and `enter()` methods.
+选择 `body` 节点，然后选择所有的 `h2` 元素。 让 D3 为 `dataset` 数组中的每一个对象创建并添加 `h2` 标签。 `h2` 标签的文本为 `New Title`。 你应该使用 `data()` 和 `enter()` 方法。
 
 # --hints--
 
-Your document should have 9 `h2` elements.
+文档应该有 9 个 `h2` 元素。
 
 ```js
 assert($('h2').length == 9);
 ```
 
-The text in the `h2` elements should say "New Title". The capitalization and spacing should match exactly.
+`h2` 元素的文本应为 `New Title`。 大小写和空格必须一致。
 
 ```js
 assert(
@@ -56,13 +56,13 @@ assert(
 );
 ```
 
-Your code should use the `data()` method.
+应该使用 `data()` 方法。
 
 ```js
 assert(code.match(/\.data/g));
 ```
 
-Your code should use the `enter()` method.
+应该使用 `enter()` 方法。
 
 ```js
 assert(code.match(/\.enter/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
index e8c80ac438..1fb35ba8b8 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fa7367417b2b2512bc5
-title: Work with Dynamic Data in D3
+title: 使用 D3 中的动态数据
 challengeType: 6
 forumTopicId: 301498
 dashedName: work-with-dynamic-data-in-d3
@@ -8,73 +8,73 @@ dashedName: work-with-dynamic-data-in-d3
 
 # --description--
 
-The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set.
+最后两个挑战涉及到使用 D3 的 `data()` 和 `enter()` 方法来动态展示数据。 它们以数据集为参数，和 `append()` 方法一起使用，为数据集中的每一个元素对象创建一个 DOM 元素。
 
-In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, "New Title". This is because you have not made use of the data that is bound to each of the `h2` elements.
+在之前的挑战中，你为 `dataset` 数组中的每一个对象创建了一个新的 `h2` 元素，但是它们的文本都是相同的 `New Title`。 这是因为你还没有使用和每个 `h2` 元素关联的数据。
 
-The D3 `text()` method can take a string or a callback function as an argument:
+`text()` 方法以字符串或者回调函数作为参数：
 
 `selection.text((d) => d)`
 
-In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
+上面这个例子中的参数 `d` 指关联数据集的一个对象。
 
-Using the current example as context, the first `h2` element is bound to 12, the second `h2` element is bound to 31, the third `h2` element is bound to 22, and so on.
+以当前例子为例，第一个 `h2` 元素和 12 关联，第二个 `h2` 元素和 31 关联，第三个 `h2` 元素和 22 关联，以此类推。
 
 # --instructions--
 
-Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and "USD". For example, the first heading should be "12 USD".
+修改 `text()` 方法，使每个 `h2` 元素显示 `dataset` 数组中的对应值，加上一个空格和字符串 `USD`。 例如，第一个标题应该为 `12 USD`。
 
 # --hints--
 
-The first `h2` should have the text "12 USD".
+第一个 `h2` 的文本为 `12 USD`。
 
 ```js
 assert($('h2').eq(0).text() == '12 USD');
 ```
 
-The second `h2` should have the text "31 USD".
+第二个 `h2` 的文本为 `31 USD`。
 
 ```js
 assert($('h2').eq(1).text() == '31 USD');
 ```
 
-The third `h2` should have the text "22 USD".
+第三个 `h2` 的文本为 `22 USD`。
 
 ```js
 assert($('h2').eq(2).text() == '22 USD');
 ```
 
-The fourth `h2` should have the text "17 USD".
+第四个 `h2` 的文本为 `17 USD`。
 
 ```js
 assert($('h2').eq(3).text() == '17 USD');
 ```
 
-The fifth `h2` should have the text "25 USD".
+第五个 `h2` 的文本为 `25 USD`。
 
 ```js
 assert($('h2').eq(4).text() == '25 USD');
 ```
 
-The sixth `h2` should have the text "18 USD".
+第六个 `h2` 的文本为 `18 USD`。
 
 ```js
 assert($('h2').eq(5).text() == '18 USD');
 ```
 
-The seventh `h2` should have the text "29 USD".
+第七个 `h2` 的文本为 `29 USD`。
 
 ```js
 assert($('h2').eq(6).text() == '29 USD');
 ```
 
-The eighth `h2` should have the text "14 USD".
+第八个 `h2` 的文本为 `14 USD`。
 
 ```js
 assert($('h2').eq(7).text() == '14 USD');
 ```
 
-The ninth `h2` should have the text "9 USD".
+第九个 `h2` 的文本为 `9 USD`。
 
 ```js
 assert($('h2').eq(8).text() == '9 USD');
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
index 99a331e3ff..3f590981cb 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fae367417b2b2512be4
-title: Access the JSON Data from an API
+title: 访问来自 API 的 JSON 数据
 challengeType: 6
 forumTopicId: 301499
 dashedName: access-the-json-data-from-an-api
@@ -8,36 +8,37 @@ dashedName: access-the-json-data-from-an-api
 
 # --description--
 
-In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.
+在前面的挑战中，你了解了如何从 freeCodeCamp Cat Photo API 获取 JSON 数据。
 
-Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:
+现在，你将进一步观察返回的数据，以更好地了解 JSON 格式。 回忆一下 JavaScript 中的一些符号：
 
-<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>" " -> Double quotes represent a string. They are also used for key names in JSON</blockquote>
+<blockquote>[ ] -> 方括号表示数组<br>{ } -> 大括号表示对象<br>" " -> 双引号表示字符串， 它们还用于表示 JSON 中的键名</blockquote>
 
-Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
+理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。
 
-On the right, click the "Get Message" button to load the freeCodeCamp Cat Photo API JSON into the HTML.
+在右侧，单击 `Get Message` 按钮，将 freeCodeCamp Cat Photo API JSON 加载到 HTML 中。
 
-The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
+在 JSON 数据中的第一个和最后一个字符是中括号`[ ]`， 这意味着返回的数据是一个数组。 JSON 数据中的第二个符号是一个大括号`{`，这意味着是一个对象。 再仔细看，你会发现有三个独立的对象。 这个 JSON 数据是一个包含三个对象的数组，它们各自都包含了 cat photo 的信息。
 
-You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where "id" is a key and 0 is its corresponding value. Similarly, there are keys for "imageLink", "altText", and "codeNames". Each cat photo object has these same keys, but with different values.
+你之前了解了对象包含了用逗号分隔的 "键值对"。 在 Cat Photo 示例中，第一个对象的 `"id":0`，`id` 是键，`0` 是对应的值。 类似地，`imageLink`、`altText` 和 `codeNames` 也有键。 每个 cat photo 对象具有相同的键，但具有不同的值。
 
-Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here "codeNames" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
+在第一个对象中有一个有趣的 "键值对" 它是`"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`。 `codeNames` 是键，它的值是一个包含三个字符串的数组。 对象数组以及数组作为键可以作为值
 
-Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the "altText" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
+记住如何访问数组和对象中的数据。 数组使用括号表示法来访问项目的特定索引， 对象使用括号或点表示法来访问给定属性的值。 这个例子打印第一张 cat photo 的 `altText` 属性——请注意，编辑器中解析的 JSON 数据被保存在名为 `json` 的变量中：
 
 ```js
 console.log(json[0].altText);
-// Prints "A white cat wearing a green helmet shaped melon on its head."
 ```
 
+控制台将显示字符串 `A white cat wearing a green helmet shaped melon on its head.`。
+
 # --instructions--
 
-For the cat with the "id" of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
+对于 `id` 为 2 的 cat，在控制台打印 `codeNames` 数组中的第二个值。 你应该在对象（保存在变量 `json` 中）上使用括号或者点表示法来访问该值。
 
 # --hints--
 
-Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
+应该使用括号和点表示法来读取正确的代码名称，并将 `Loki` 打印到控制台。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
index 3ae5a6fe52..4087993994 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fad367417b2b2512be2
-title: Change Text with click Events
+title: 通过单击事件更改文本
 challengeType: 6
 forumTopicId: 301500
 dashedName: change-text-with-click-events
@@ -8,21 +8,21 @@ dashedName: change-text-with-click-events
 
 # --description--
 
-When the click event happens, you can use JavaScript to update an HTML element.
+当点击事件发生时，你可以使用 JavaScript 更新 HTML 元素。
 
-For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message".
+例如，当用户点击 `Get Message` 按钮时，它将改变 class 为 `message` 的元素的文本为 `Here is the message`。
 
-This works by adding the following code within the click event:
+通过在点击事件内添加以下代码实现：
 
 `document.getElementsByClassName('message')[0].textContent="Here is the message";`
 
 # --instructions--
 
-Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message".
+在 `onclick` 事件处理器中添加代码，改变 `message` 元素内的文本为 `Here is the message`。
 
 # --hints--
 
-Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
+应该使用 `document.getElementsByClassName` 方法来选择 class 为 `message` 的元素，然后将其 `textContent` 改为给定文字。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
index ac56debfac..c0748a6ee8 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fae367417b2b2512be5
-title: Convert JSON Data to HTML
+title: 将 JSON 数据转换为 HTML
 challengeType: 6
 forumTopicId: 16807
 dashedName: convert-json-data-to-html
@@ -8,15 +8,15 @@ dashedName: convert-json-data-to-html
 
 # --description--
 
-Now that you're getting data from a JSON API, you can display it in the HTML.
+现在你从 JSON API 获取了数据，可以在 HTML 中显示它们了。
 
-You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
+既然 cat photo 对象都保存在数组里，你可以使用 `forEach` 方法来遍历它们。 当你拿到每个对象时，你就可以修改 HTML 元素了。
 
-First, declare an html variable with `let html = "";`.
+首先，通过 `let html = "";` 声明一个 html 变量。
 
-Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
+接着，遍历 JSON，将用 `strong` 标签包裹的键名和后面跟着值的 html 元素添加给变量。 当循环结束后渲染它。
 
-Here's the code that does this:
+这是执行此操作的代码：
 
 ```js
 let html = "";
@@ -30,13 +30,13 @@ json.forEach(function(val) {
 });
 ```
 
-**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks.
+**注意：**在本挑战中，你需要给页面添加新的 HTML 元素，所以你不能使用 `textContent` 方法。 你可以用 `innerHTML` 来完成挑战，这个方法使网站容易遭受跨站脚本攻击。
 
 # --instructions--
 
-Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
+添加一个 `forEach` 循环来遍历 JSON 数据，并创建 HTML 元素以显示它。
 
-Here is some example JSON
+下面是示例 JSON：
 
 ```json
 [
@@ -52,19 +52,19 @@ Here is some example JSON
 
 # --hints--
 
-Your code should store the data in the `html` variable
+应该将数据保存在 `html` 变量中。
 
 ```js
-assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
+assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
 ```
 
-Your code should use a `forEach` method to loop over the JSON data from the API.
+应该使用 `forEach` 方法来遍历 API 中的 JSON 数据。
 
 ```js
 assert(code.match(/json\.forEach/g));
 ```
 
-Your code should wrap the key names in `strong` tags.
+应该用 `strong` 标签包裹键名。
 
 ```js
 assert(code.match(/<strong>.+<\/strong>/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
index 45b0abe428..c067136ef4 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7faf367417b2b2512be8
-title: Get Geolocation Data to Find A User's GPS Coordinates
+title: 根据地理位置数据找到用户的 GPS 坐标
 challengeType: 6
 forumTopicId: 18188
 dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
@@ -8,15 +8,15 @@ dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
 
 # --description--
 
-Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
+你还能做一件很酷的事就是访问你用户当前的地理位置。 每个浏览器都有内置的导航器，可以为你提供这些信息。
 
-The navigator will get the user's current longitude and latitude.
+导航器会获取用户当前的经度和纬度。
 
-You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
+您将看到允许或阻止此站点了解您当前位置的提示。 只要代码正确，挑战就可以以任何一种方式完成。
 
-By selecting allow, you will see the text on the output phone change to your latitude and longitude.
+通过选择允许，你将看到输出手机上的文本更改为你的纬度和经度
 
-Here's code that does this:
+这是执行此操作的代码：
 
 ```js
 if (navigator.geolocation){
@@ -26,33 +26,33 @@ if (navigator.geolocation){
 }
 ```
 
-First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML.
+首先，它检查`navigator.geolocation`对象是否存在。 如果是，`getCurrentPosition`则调用该对象上的方法，该方法启动对用户位置的异步请求。 如果请求成功，则运行方法中的回调函数。 此函数`position`使用点表示法访问对象的纬度和经度值，并更新页面。
 
 # --instructions--
 
-Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
+在`script`标记内添加示例代码以检查用户的当前位置并将其插入 HTML
 
 # --hints--
 
-Your code should use `navigator.geolocation` to access the user's current location.
+应该使用 `navigator.geolocation` 访问用户的当前位置。
 
 ```js
 assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
 ```
 
-Your code should use `position.coords.latitude` to display the user's latitudinal location.
+应该使用 `position.coords.latitude` 显示用户的纬度位置。
 
 ```js
 assert(code.match(/position\.coords\.latitude/g));
 ```
 
-Your code should use `position.coords.longitude` to display the user's longitudinal location.
+应该使用 `position.coords.longitude` 显示用户的经度位置。
 
 ```js
 assert(code.match(/position\.coords\.longitude/g));
 ```
 
-You should display the user's position within the `data` div element.
+应该在具有 `id="data"` 的 `div` 元素中显示用户的位置。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
index 776f077ac8..5e72b236aa 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
@@ -1,6 +1,6 @@
 ---
 id: 5ccfad82bb2dc6c965a848e5
-title: Get JSON with the JavaScript fetch method
+title: 使用 JavaScript 的 fetch 方法获取 JSON
 challengeType: 6
 forumTopicId: 301501
 dashedName: get-json-with-the-javascript-fetch-method
@@ -8,9 +8,9 @@ dashedName: get-json-with-the-javascript-fetch-method
 
 # --description--
 
-Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand.
+请求外部数据的另一个方法是使用 JavaScript 的 `fetch()` 方法。 它的作用和 `XMLHttpRequest` 一样，但是它的语法更容易理解。
 
-Here is the code for making a GET request to `/json/cats.json`
+下面是使用 GET 请求 `/json/cats.json` 数据的例子。
 
 ```js
 
@@ -22,29 +22,29 @@ fetch('/json/cats.json')
 
 ```
 
-Take a look at each piece of this code.
+逐行解释一下代码。
 
-The first line is the one that makes the request. So, `fetch(URL)` makes a GET request to the URL specified. The method returns a Promise.
+第一行是发起请求。 `fetch(URL)` 向指定的 URL 发起 `GET` 请求。 这个方法返回一个 Promise。
 
-After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
+当 Promise 返回后，如果请求成功，会执行 `then` 方法，该方法把响应转换为 JSON 格式。
 
-The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
+`then` 方法返回的也是 Promise，会被下一个 `then` 方法捕获。 第二个 `then` 方法传入的参数就是最终的 JSON 对象。
 
-Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
+接着，使用 `document.getElementById()` 选择将要接收数据的元素。 然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码。
 
 # --instructions--
 
-Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
+更新代码，创建并向 freeCodeCamp Cat Photo API 发送 `GET` 请求。 这次使用 `fetch` 方法而不是 `XMLHttpRequest`。
 
 # --hints--
 
-Your code should make a GET request with `fetch`.
+应该使用 `fetch` 发起 `GET` 请求。
 
 ```js
 assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
 ```
 
-Your code should use `then` to convert the response to JSON.
+应该在 `then` 里面将响应转换为 JSON。
 
 ```js
 assert(
@@ -54,13 +54,13 @@ assert(
 );
 ```
 
-Your code should use `then` to handle the data converted to JSON by the other `then`.
+应该使用另一个 `then` 接收 `then` 转换的 JSON。
 
 ```js
 assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g));
 ```
 
-Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
+代码应该选择 id 为 `message` 的元素然后把它的内部 HTML 改成 JSON data 的字符串。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
index 634902febc..5f467093a0 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fae367417b2b2512be3
-title: Get JSON with the JavaScript XMLHttpRequest Method
+title: 使用 XMLHttpRequest 方法获取 JSON
 challengeType: 6
 forumTopicId: 301502
 dashedName: get-json-with-the-javascript-xmlhttprequest-method
@@ -8,19 +8,19 @@ dashedName: get-json-with-the-javascript-xmlhttprequest-method
 
 # --description--
 
-You can also request data from an external source. This is where APIs come into play.
+你还可以从外部来源请求数据。 这就是 API 发挥作用的地方。
 
-Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
+请记住，API（或叫应用程序编程接口）是计算机用来互相通信的工具。 你将学习如何通过 AJAX技术 从 API 获得的数据来更新 HTML。
 
-Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
+大部分 web APIs 以 JSON 格式传输数据。 JSON 是 JavaScript Object Notation 的简写。
 
-JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
+JSON 语法与 JavaScript 对象字面符号非常相似。 JSON 具有对象属性以及其当前值，夹在 `{` 和 `}`之间。
 
-These properties and their values are often referred to as "key-value pairs".
+这些属性及其值通常称为 "键值对"。
 
-However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
+但是，JSON 是由 API 以`bytes` 形式传输的，你的程序以`string`接受它。 它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。 `JSON.parse`方法解析字符串并构造它描述的 JavaScript 对象。
 
-You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
+你可以从 freeCodeCamp 的 Cat Photo API 请求 JSON。 以下是你可以在点击事件中添加的代码：
 
 ```js
 const req = new XMLHttpRequest();
@@ -32,21 +32,21 @@ req.onload = function(){
 };
 ```
 
-Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
+这里介绍每行代码的作用。 JavaScript `XMLHttpRequest` 对象具有许多用于传输数据的属性和方法。 首先，创建一个`XMLHttpRequest`对象实例，并保存在`req`变量里 。 然后，`open` 方法初始化一个请求——这个例子是从 API 请求数据，因此它是一个 `GET` 请求。 第二个参数 `open` 是你要从中请求数据的 API 的 URL。 第三个参数是一个布尔值， `true` 使其成为异步请求。 `send` 方法发送请求。 最后，`onload` 事件处理程序解析返回的数据并应用该 `JSON.stringify` 方法将JavaScript对象转换为字符串， 然后将此字符串作为消息文本插入。
 
 # --instructions--
 
-Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. Then click the "Get Message" button. Your AJAX function will replace the "The message will go here" text with the raw JSON output from the API.
+更新代码，创建并向 freeCodeCamp Cat Photo API 发送 `GET` 请求。 然后单击 `Get Message` 按钮。 AJAX 函数将使用 API​​ 的原始 JSON 输出替换文本 `The message will go here`。
 
 # --hints--
 
-Your code should create a new `XMLHttpRequest`.
+应该创建一个新的 `XMLHttpRequest`。
 
 ```js
 assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
 ```
 
-Your code should use the `open` method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
+应该使用该 `open` 方法初始化对 freeCodeCamp Cat Photo API 的 `GET` 请求。
 
 ```js
 assert(
@@ -56,13 +56,13 @@ assert(
 );
 ```
 
-Your code should use the `send` method to send the request.
+应使用该 `send` 方法发送请求。
 
 ```js
 assert(code.match(/\.send\(\s*\)/g));
 ```
 
-Your code should have an `onload` event handler set to a function.
+应该有一个 `onload` 设置为函数的事件处理程序。
 
 ```js
 assert(
@@ -70,13 +70,13 @@ assert(
 );
 ```
 
-Your code should use the `JSON.parse` method to parse the `responseText`.
+应该使用该 `JSON.parse` 方法来解析 `responseText`。
 
 ```js
 assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
 ```
 
-Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
+应该使用 `message` 获取元素，并将其内部 HTML 转换为 JSON 数据字符串。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
index 5d57a07236..75fd81e4d0 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fad367417b2b2512be1
-title: Handle Click Events with JavaScript using the onclick property
+title: 使用 onclick 属性处理点击事件
 challengeType: 6
 forumTopicId: 301503
 dashedName: handle-click-events-with-javascript-using-the-onclick-property
@@ -8,7 +8,7 @@ dashedName: handle-click-events-with-javascript-using-the-onclick-property
 
 # --description--
 
-You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this:
+你希望代码仅在页面完成加载后执行。 为此，你可将名为`DOMContentLoaded`的 JavaScript 事件附加到文档中。 以下是实现的代码：
 
 ```js
 document.addEventListener('DOMContentLoaded', function() {
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 ```
 
-You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
+你可以在`DOMContentLoaded`函数内部添加事件处理方法。 你可以添加`onclick`事件处理器，当用户点击 id 为`getMessage`的元素时会触发事件。 添加以下代码：
 
 ```js
 document.getElementById('getMessage').onclick = function(){};
@@ -24,17 +24,17 @@ document.getElementById('getMessage').onclick = function(){};
 
 # --instructions--
 
-Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
+在`DOMContentLoaded`函数内为 id 为`getMessage`的元素添加一个 click 事件处理器。
 
 # --hints--
 
-Your code should use the `document.getElementById` method to select the `getMessage` element.
+你的代码应该用`document.getElementById`方法来选择`getMessage`元素。
 
 ```js
 assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
 ```
 
-Your code should add an `onclick` event handler.
+你的代码应该添加`onclick`事件处理器。
 
 ```js
 assert(typeof document.getElementById('getMessage').onclick === 'function');
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
index ef071a15ab..feebb973d5 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7faf367417b2b2512be9
-title: Post Data with the JavaScript XMLHttpRequest Method
+title: 使用 XMLHttpRequest 方法发送数据
 challengeType: 6
 forumTopicId: 301504
 dashedName: post-data-with-the-javascript-xmlhttprequest-method
@@ -8,9 +8,9 @@ dashedName: post-data-with-the-javascript-xmlhttprequest-method
 
 # --description--
 
-In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
+在前面的示例中，你通过外部资源获取数据。 此外，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
 
-JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
+JavaScript 的`XMLHttpRequest`方法也用于将数据发布到服务器。 这是一个示例：
 
 ```js
 const xhr = new XMLHttpRequest();
@@ -26,27 +26,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
 xhr.send(body);
 ```
 
-You've seen several of these methods before. Here the `open` method initializes the request as a "POST" to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of 4 means the operation is complete, and a `status` of 201 means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
+你之前已经见过这些方法。 `open` 方法将对外部资源的给定 URL 的请求初始化为 `POST`，并使用 `true` 布尔值使其变成异步的。 `setRequestHeader` 方法设置了 HTTP 请求标头的值，该标头包含有关发送人和请求的信息。 它必须在 `open` 方法之后、`send` 方法之前调用。 它的两个参数表示标头的内容类型和标头数据将被设置成什么值。 接下来，`onreadystatechange` 事件监听器监听请求状态的更改。 `readyState` 为 `4`，表示操作已完成。`status` 为 `201`，表示请求成功。 文档的 HTML 可以更新。 最后，`send` 方法发送带有 `body` 值的请求，其中 `userName` 的值由用户在 `input` 字段中输入。
 
 # --instructions--
 
-Update the code so it makes a "POST" request to the API endpoint. Then type your name in the input field and click "Send Message". Your AJAX function should replace "Reply from Server will be here." with data from the server. Format the response to display your name appended with " loves cats".
+更新代码，创建并向 API 发送 `POST` 请求。 然后在输入框中输入你的姓名，并点击 `Send Message`。 你的 AJAX 函数会用服务器返回的数据替换 `Reply from Server will be here.`。 修改返回的请求结果，在你的名字后面添加 `loves cats`。
 
 # --hints--
 
-Your code should create a new `XMLHttpRequest`.
+应该创建一个新的 `XMLHttpRequest`。
 
 ```js
 assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
 ```
 
-Your code should use the `open` method to initialize a "POST" request to the server.
+应该使用 `open` 方法初始化一个发送给服务器的 `POST` 请求。
 
 ```js
 assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
 ```
 
-Your code should use the `setRequestHeader` method.
+应该使用 `setRequestHeader` 方法。
 
 ```js
 assert(
@@ -56,13 +56,13 @@ assert(
 );
 ```
 
-Your code should have an `onreadystatechange` event handler set to a function.
+应该有一个 `onreadystatechange` 的事件监听器。
 
 ```js
 assert(code.match(/\.onreadystatechange\s*?=/g));
 ```
 
-Your code should get the element with class `message` and change its `textContent` to "`userName` loves cats"
+应该获取 class 为 `message` 的元素，并将它的 `textContent` 更改为 `userName loves cats`。
 
 ```js
 assert(
@@ -72,7 +72,7 @@ assert(
 );
 ```
 
-Your code should use the `send` method.
+应该使用 `send` 方法。
 
 ```js
 assert(code.match(/\.send\(\s*?body\s*?\)/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
index c8a31451f2..5483b95cf6 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fae367417b2b2512be7
-title: Pre-filter JSON to Get the Data You Need
+title: 预先过滤 JSON 以获得所需的数据
 challengeType: 6
 forumTopicId: 18257
 dashedName: pre-filter-json-to-get-the-data-you-need
@@ -8,11 +8,11 @@ dashedName: pre-filter-json-to-get-the-data-you-need
 
 # --description--
 
-If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
+如果你不希望渲染每张从 freeCodeCamp Cat Photo API 取回的猫照片，你可以在循环先预先过滤 JSON 数据。
 
-Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose "id" key has a value of 1.
+鉴于 JSON 数据存储在数组中，你可以使用 `filter` 方法过滤掉 `id` 键值为 `1` 的 cat。
 
-Here's the code to do this:
+这是执行此操作的代码：
 
 ```js
 json = json.filter(function(val) {
@@ -22,11 +22,11 @@ json = json.filter(function(val) {
 
 # --instructions--
 
-Add code to `filter` the json data to remove the cat with the "id" value of 1.
+添加代码以 `filter` json 数据，删除 `id` 值为 `1` 的 cat。
 
 # --hints--
 
-Your code should use the `filter` method.
+应该使用 `filter` 方法。
 
 ```js
 assert(code.match(/json\.filter/g));
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
index e4a9372d58..cada7e4243 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7fae367417b2b2512be6
-title: Render Images from Data Sources
+title: 渲染数据源的图像
 challengeType: 6
 forumTopicId: 18265
 dashedName: render-images-from-data-sources
@@ -8,27 +8,27 @@ dashedName: render-images-from-data-sources
 
 # --description--
 
-The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
+前几个挑战中表明，JSON 数组中的每个对象都包含一个 `imageLink` 键，其值为猫图像的 URL。
 
-When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
+当你遍历这些对象的时候，你可以使用 `imageLink` 属性在 `img` 元素中显示此图像。
 
-Here's the code that does this:
+这是执行此操作的代码：
 
 `html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
 
 # --instructions--
 
-Add code to use the `imageLink` and `altText` properties in an `img` tag.
+添加代码，在 `img` 标签中使用 `imageLink` 和 `altText` 属性。
 
 # --hints--
 
-You should use the `imageLink` property to display the images.
+应该使用 `imageLink` 属性来显示图像。
 
 ```js
 assert(code.match(/val\.imageLink/g));
 ```
 
-You should use the `altText` for the alt attribute values of the images.
+应该使用 `altText` 作为图片的 `alt` 属性值。
 
 ```js
 assert(code.match(/val\.altText/g));
diff --git a/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
index 9321f17aaa..517ef549c3 100644
--- a/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
+++ b/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
@@ -21,13 +21,13 @@ A continuación te presentamos un ejemplo de cómo declarar una clase CSS:
 </style>
 ```
 
-Puedes ver que hemos creado una clase CSS llamada `blue-text` dentro de la etiqueta `<style>`. Puedes aplicar una clase a un elemento HTML de este modo: `<h2 class="blue-text">CatPhotoApp</h2>` Ten en cuenta que en tu elemento `style` CSS, los nombres de clase comienzan con un punto. En el atributo de clase de tus elementos HTML, el nombre de la clase no lleva punto delante.
+Puedes ver que hemos creado una clase CSS llamada `blue-text` dentro de la etiqueta `<style>`. Puedes aplicar una clase a un elemento HTML de este modo: `<h2 class="blue-text">CatPhotoApp</h2>`. Ten en cuenta que en tu elemento CSS `style`, los nombres de clase comienzan con un punto. En el atributo "class" de tus elementos HTML, el nombre de la clase no lleva punto delante.
 
 # --instructions--
 
 Dentro de tu elemento `style`, cambia el selector `h2` a `.red-text` y actualiza el valor del color de `blue` a `red`.
 
-Asigna al elemento `h2` el atributo `class` con el valor `'red-text'`.
+Asigna a tu elemento `h2` el atributo `class` con un valor de `red-text`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md
index 975b0206be..2ce339bec5 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md
@@ -1,6 +1,6 @@
 ---
 id: 56bbb991ad1ed5201cd392d2
-title: Add New Properties to a JavaScript Object
+title: Añade nuevas propiedades a un objeto de JavaScript
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cQe38UD'
 forumTopicId: 301169
@@ -9,19 +9,19 @@ dashedName: add-new-properties-to-a-javascript-object
 
 # --description--
 
-You can add new properties to existing JavaScript objects the same way you would modify them.
+Puedes añadir nuevas propiedades a los objetos de JavaScript existentes de la misma manera que los modificarías.
 
-Here's how we would add a `"bark"` property to `ourDog`:
+Así es como podríamos agregar una propiedad `bark` a nuestro objeto `ourDog`:
 
 `ourDog.bark = "bow-wow";`
 
-or
+o
 
 `ourDog["bark"] = "bow-wow";`
 
-Now when we evaluate `ourDog.bark`, we'll get his bark, "bow-wow".
+Ahora cuando evaluemos `ourDog.bark`, obtendremos su ladrido, `bow-wow`.
 
-Example:
+Ejemplo:
 
 ```js
 var ourDog = {
@@ -36,17 +36,17 @@ ourDog.bark = "bow-wow";
 
 # --instructions--
 
-Add a `"bark"` property to `myDog` and set it to a dog sound, such as "woof". You may use either dot or bracket notation.
+Añade una propiedad `bark` a `myDog` y establécela a un sonido de perro, como "guau". Puedes usar tanto la notación de puntos como la notación de corchetes.
 
 # --hints--
 
-You should add the property `"bark"` to `myDog`.
+Debes agregar la propiedad `bark` a `myDog`.
 
 ```js
 assert(myDog.bark !== undefined);
 ```
 
-You should not add `"bark"` to the setup section.
+No debes agregar `bark` a la sección de configuración (setup).
 
 ```js
 assert(!/bark[^\n]:/.test(code));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md
index 255cd3a3ed..1673f7abbf 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md
@@ -1,6 +1,6 @@
 ---
 id: cf1111c1c11feddfaeb3bdef
-title: Add Two Numbers with JavaScript
+title: Suma dos números con JavaScript
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cM2KBAG'
 forumTopicId: 16650
@@ -9,31 +9,33 @@ dashedName: add-two-numbers-with-javascript
 
 # --description--
 
-`Number` is a data type in JavaScript which represents numeric data.
+`Number` (número) es un tipo de datos en JavaScript que representa datos numéricos.
 
-Now let's try to add two numbers using JavaScript.
+Ahora intentemos sumar dos números usando JavaScript.
 
-JavaScript uses the `+` symbol as an addition operator when placed between two numbers.
+JavaScript utiliza el símbolo `+` como un operador de adición cuando se coloca entre dos números.
 
-**Example:**
+**Ejemplo:**
 
 ```js
-myVar = 5 + 10; // assigned 15
+myVar = 5 + 10;
 ```
 
+`myVar` ahora tiene el valor `15`.
+
 # --instructions--
 
-Change the `0` so that sum will equal `20`.
+Cambia el `0` para que la suma sea igual a `20`.
 
 # --hints--
 
-`sum` should equal `20`.
+`sum` debe ser igual a `20`.
 
 ```js
 assert(sum === 20);
 ```
 
-You should use the `+` operator.
+Debes usar el operador `+`.
 
 ```js
 assert(/\+/.test(code));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md
index 51b62017b0..dd791bb2e2 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244de
-title: Adding a Default Option in Switch Statements
+title: Agrega una opción predeterminada en las declaraciones switch
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/c3JvVfg'
 forumTopicId: 16653
@@ -9,9 +9,9 @@ dashedName: adding-a-default-option-in-switch-statements
 
 # --description--
 
-In a `switch` statement you may not be able to specify all possible values as `case` statements. Instead, you can add the `default` statement which will be executed if no matching `case` statements are found. Think of it like the final `else` statement in an `if/else` chain.
+En una declaración `switch` puede que no seas capaz de especificar todos los valores posibles como declaraciones de `case` (caso). En su lugar, se puede añadir la declaración `default`, la cual se ejecutará si no se encuentran declaraciones `case`. Piensa en ella como la última sentencia `else` en una cadena `if/else`.
 
-A `default` statement should be the last case.
+Una declaración `default` debe ser el último caso.
 
 ```js
 switch (num) {
@@ -30,57 +30,57 @@ switch (num) {
 
 # --instructions--
 
-Write a switch statement to set `answer` for the following conditions:  
-`"a"` - "apple"  
-`"b"` - "bird"  
-`"c"` - "cat"  
-`default` - "stuff"
+Escribe una declaración switch para establecer `answer` con las siguientes condiciones:  
+`a` - `apple`  
+`b` - `bird`  
+`c` - `cat`  
+`default` - `stuff`
 
 # --hints--
 
-`switchOfStuff("a")` should have a value of "apple"
+`switchOfStuff("a")` debe devolver la cadena `apple`
 
 ```js
 assert(switchOfStuff('a') === 'apple');
 ```
 
-`switchOfStuff("b")` should have a value of "bird"
+`switchOfStuff("b")` debe devolver la cadena `bird`
 
 ```js
 assert(switchOfStuff('b') === 'bird');
 ```
 
-`switchOfStuff("c")` should have a value of "cat"
+`switchOfStuff("c")` debe devolver la cadena `cat`
 
 ```js
 assert(switchOfStuff('c') === 'cat');
 ```
 
-`switchOfStuff("d")` should have a value of "stuff"
+`switchOfStuff("d")` debe devolver la cadena `stuff`
 
 ```js
 assert(switchOfStuff('d') === 'stuff');
 ```
 
-`switchOfStuff(4)` should have a value of "stuff"
+`switchOfStuff(4)` debe devolver la cadena `stuff`
 
 ```js
 assert(switchOfStuff(4) === 'stuff');
 ```
 
-You should not use any `if` or `else` statements
+No debes usar ninguna sentencia `if` o `else`
 
 ```js
 assert(!/else/g.test(code) || !/if/g.test(code));
 ```
 
-You should use a `default` statement
+Debes utilizar una declaración `default`
 
 ```js
 assert(switchOfStuff('string-to-trigger-default-case') === 'stuff');
 ```
 
-You should have at least 3 `break` statements
+Debes tener al menos 3 declaraciones de ruptura (`break`)
 
 ```js
 assert(code.match(/break/g).length > 2);
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md
index be826ab034..b235bc75de 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244ed
-title: Appending Variables to Strings
+title: Agrega variables a cadenas
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cbQmZfa'
 forumTopicId: 16656
@@ -9,30 +9,31 @@ dashedName: appending-variables-to-strings
 
 # --description--
 
-Just as we can build a string over multiple lines out of string <dfn>literals</dfn>, we can also append variables to a string using the plus equals (`+=`) operator.
+Al igual que podemos construir una cadena sobre múltiples líneas a partir de las cadenas <dfn>literales</dfn>, también podemos añadir variables a una cadena usando el operador "más igual" (`+=`).
 
-Example:
+Ejemplo:
 
 ```js
 var anAdjective = "awesome!";
 var ourStr = "freeCodeCamp is ";
 ourStr += anAdjective;
-// ourStr is now "freeCodeCamp is awesome!"
 ```
 
+`ourStr` tendrá el valor de `freeCodeCamp is awesome!`.
+
 # --instructions--
 
-Set `someAdjective` to a string of at least 3 characters and append it to `myStr` using the `+=` operator.
+Establece `someAdjective` a una cadena de al menos 3 caracteres y añádelo a `myStr` usando el operador `+=`.
 
 # --hints--
 
-`someAdjective` should be set to a string at least 3 characters long.
+`someAdjective` debe ser establecido a una cadena de al menos 3 caracteres.
 
 ```js
 assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2);
 ```
 
-You should append `someAdjective` to `myStr` using the `+=` operator.
+Debes añadir `someAdjective` a `myStr` usando el operador `+=`.
 
 ```js
 assert(code.match(/myStr\s*\+=\s*someAdjective\s*/).length > 0);
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
index 2938f087ee..06b548dfb6 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
@@ -1,6 +1,6 @@
 ---
 id: 5ee127a03c3b35dd45426493
-title: Assigning the Value of One Variable to Another
+title: Asigna el valor de una variable a otra variable
 challengeType: 1
 videoUrl: ''
 forumTopicId: 418265
@@ -9,7 +9,7 @@ dashedName: assigning-the-value-of-one-variable-to-another
 
 # --description--
 
-After a value is assigned to a variable using the <dfn>assignment</dfn> operator, you can assign the value of that variable to another variable using the <dfn>assignment</dfn> operator.
+Después de asignar un valor a una variable usando el operador de <dfn>asignación</dfn>, puedes asignar el valor de esa variable a otra variable usando el mismo operador de <dfn>asignación</dfn>.
 
 ```js
 var myVar;
@@ -18,27 +18,27 @@ var myNum;
 myNum = myVar;
 ```
 
-The above declares a `myVar` variable with no value, then assigns it the value `5`. Next, a variable named `myNum` is declared with no value. Then, the contents of `myVar` (which is `5`) is assigned to the variable `myNum`. Now, `myNum` also has the value of `5`.
+Lo anterior declara una variable `myVar` sin valor, y luego le asigna el valor `5`. A continuación, una variable llamada `myNum` es declarada, tambien sin valor. Luego, el contenido de `myVar` (que es `5`) se asigna a la variable `myNum`. Ahora, `myNum` también tiene el valor de `5`.
 
 # --instructions--
 
-Assign the contents of `a` to variable `b`.
+Asigna el contenido de `a` a la variable `b`.
 
 # --hints--
 
-You should not change code above the specified comment.
+No debes cambiar el código por encima del comentario especificado.
 
 ```js
 assert(/var a;/.test(code) && /a = 7;/.test(code) && /var b;/.test(code));
 ```
 
-`b` should have a value of 7.
+`b` debe tener un valor de `7`.
 
 ```js
 assert(typeof b === 'number' && b === 7);
 ```
 
-`a` should be assigned to `b` with `=`.
+`a` debe ser asignado a `b` utilizando `=`.
 
 ```js
 assert(/b\s*=\s*a\s*/g.test(code));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md
index 15a61d6e5d..312aa4183c 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244c3
-title: Assignment with a Returned Value
+title: Asignación con un valor devuelto
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/ce2pEtB'
 forumTopicId: 16658
@@ -9,27 +9,27 @@ dashedName: assignment-with-a-returned-value
 
 # --description--
 
-If you'll recall from our discussion of [Storing Values with the Assignment Operator](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator), everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.
+Si recuerdas de nuestra discusión sobre [almacenar valores con el operador de asignación](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator), todo a la derecha del signo de igualdad se resuelve antes de asignar el valor. Esto significa que podemos tomar el valor devuelto de una función y asignarlo a una variable.
 
-Assume we have pre-defined a function `sum` which adds two numbers together, then:
+Supongamos que hemos predefinido una función `sum` que suma dos números juntos, entonces:
 
 `ourSum = sum(5, 12);`
 
-will call `sum` function, which returns a value of `17` and assigns it to `ourSum` variable.
+llamará a la función `sum`, la cual devuelve un valor de `17` y lo asigna a la variable `ourSum`.
 
 # --instructions--
 
-Call the `processArg` function with an argument of `7` and assign its return value to the variable `processed`.
+Llama a la función `processArg` con un argumento de `7` y asigna su valor devuelto a la variable `processed`.
 
 # --hints--
 
-`processed` should have a value of `2`
+`processed` debe tener un valor de `2`
 
 ```js
 assert(processed === 2);
 ```
 
-You should assign `processArg` to `processed`
+Debes asignar `processArg` a `processed`
 
 ```js
 assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md
index 9289d9ff58..903a089ec7 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md
@@ -1,6 +1,6 @@
 ---
 id: 56bbb991ad1ed5201cd392d0
-title: Build JavaScript Objects
+title: Construye objetos en JavaScript
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cWGkbtd'
 forumTopicId: 16769
@@ -9,13 +9,13 @@ dashedName: build-javascript-objects
 
 # --description--
 
-You may have heard the term `object` before.
+Es posible que hayas escuchado el término objeto (`object`) antes.
 
-Objects are similar to `arrays`, except that instead of using indexes to access and modify their data, you access the data in objects through what are called `properties`.
+Los objetos son similares a los arreglos (`arrays`), excepto que en lugar de usar índices para acceder y modificar sus datos, accedes a los datos en objetos a través de propiedades (`properties`).
 
-Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.
+Los objetos son útiles para almacenar datos de forma estructurada y pueden representar objetos del mundo real, como un gato.
 
-Here's a sample cat object:
+Por ejemplo, aquí hay un objeto de gato:
 
 ```js
 var cat = {
@@ -26,7 +26,7 @@ var cat = {
 };
 ```
 
-In this example, all the properties are stored as strings, such as - `"name"`, `"legs"`, and `"tails"`. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows:
+En este ejemplo, todas las propiedades se almacenan como cadenas, tales como: `name`, `legs` y `tails`. Sin embargo, también puedes utilizar números como propiedades. Incluso puedes omitir las comillas para las propiedades de cadenas de una sola palabra, de la siguiente manera:
 
 ```js
 var anotherObject = {
@@ -36,17 +36,17 @@ var anotherObject = {
 };
 ```
 
-However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.
+Sin embargo, si tu objeto tiene propiedades que no son cadenas, JavaScript las convertirá automáticamente en cadenas.
 
 # --instructions--
 
-Make an object that represents a dog called `myDog` which contains the properties `"name"` (a string), `"legs"`, `"tails"` and `"friends"`.
+Crea un objeto que represente a un perro llamado `myDog` que contenga las propiedades `name` (una cadena), `legs`, `tails` y `friends`.
 
-You can set these object properties to whatever values you want, as long as `"name"` is a string, `"legs"` and `"tails"` are numbers, and `"friends"` is an array.
+Puedes establecer estas propiedades del objeto a los valores que quieras, siempre y cuando `name` sea una cadena, `legs` y `tails` sean números, y `friends` sea un arreglo.
 
 # --hints--
 
-`myDog` should contain the property `name` and it should be a `string`.
+`myDog` debe contener la propiedad `name` y debe ser una cadena (`string`).
 
 ```js
 assert(
@@ -64,7 +64,7 @@ assert(
 );
 ```
 
-`myDog` should contain the property `legs` and it should be a `number`.
+`myDog` debe contener la propiedad `legs` y debe ser un número (`number`).
 
 ```js
 assert(
@@ -82,7 +82,7 @@ assert(
 );
 ```
 
-`myDog` should contain the property `tails` and it should be a `number`.
+`myDog` debe contener la propiedad `tails` y debe ser un número (`number`).
 
 ```js
 assert(
@@ -100,7 +100,7 @@ assert(
 );
 ```
 
-`myDog` should contain the property `friends` and it should be an `array`.
+`myDog` debe contener la propiedad `friends` y debe ser un arreglo (`array`).
 
 ```js
 assert(
@@ -118,7 +118,7 @@ assert(
 );
 ```
 
-`myDog` should only contain all the given properties.
+`myDog` sólo debe contener todas las propiedades dadas.
 
 ```js
 assert(
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md
index f68a2f94db..3b8523ecf7 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244dc
-title: Chaining If Else Statements
+title: Encadena sentencias if else
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/caeJgsw'
 forumTopicId: 16772
@@ -9,7 +9,7 @@ dashedName: chaining-if-else-statements
 
 # --description--
 
-`if/else` statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained `if` / `else if` statements:
+Las sentencias `if/else` pueden ser encadenadas para crear una lógica compleja. Aquí hay <dfn>pseudocódigo</dfn> de múltiples declaraciones `if` / `else if` encadenadas:
 
 ```js
 if (condition1) {
@@ -26,89 +26,89 @@ if (condition1) {
 
 # --instructions--
 
-Write chained `if`/`else if` statements to fulfill the following conditions:
+Escribe sentencias `if` / `else if` encadenadas para cumplir con las siguientes condiciones:
 
-`num < 5` - return "Tiny"  
-`num < 10` - return "Small"  
-`num < 15` - return "Medium"  
-`num < 20` - return "Large"  
-`num >= 20` - return "Huge"
+`num < 5` - devuelve `Tiny`  
+`num < 10` - devuelve `Small`  
+`num < 15` - devuelve `Medium`  
+`num < 20` - devuelve `Large`  
+`num >= 20` - devuelve `Huge`
 
 # --hints--
 
-You should have at least four `else` statements
+Debes tener al menos cuatro sentencias `else`
 
 ```js
 assert(code.match(/else/g).length > 3);
 ```
 
-You should have at least four `if` statements
+Debes tener al menos cuatro sentencias `if`
 
 ```js
 assert(code.match(/if/g).length > 3);
 ```
 
-You should have at least one `return` statement
+Debes tener al menos una sentencia `return`
 
 ```js
 assert(code.match(/return/g).length >= 1);
 ```
 
-`testSize(0)` should return "Tiny"
+`testSize(0)` debe devolver la cadena `Tiny`
 
 ```js
 assert(testSize(0) === 'Tiny');
 ```
 
-`testSize(4)` should return "Tiny"
+`testSize(4)` debe devolver la cadena `Tiny`
 
 ```js
 assert(testSize(4) === 'Tiny');
 ```
 
-`testSize(5)` should return "Small"
+`testSize(5)`debe devolver la cadena `Small`
 
 ```js
 assert(testSize(5) === 'Small');
 ```
 
-`testSize(8)` should return "Small"
+`testSize(8)` debe devolver la cadena `Small`
 
 ```js
 assert(testSize(8) === 'Small');
 ```
 
-`testSize(10)` should return "Medium"
+`testSize(10)` debe devolver la cadena `Medium`
 
 ```js
 assert(testSize(10) === 'Medium');
 ```
 
-`testSize(14)` should return "Medium"
+`testSize(14)` debe devolver la cadena `Medium`
 
 ```js
 assert(testSize(14) === 'Medium');
 ```
 
-`testSize(15)` should return "Large"
+`testSize(15)` debe devolver la cadena `Large`
 
 ```js
 assert(testSize(15) === 'Large');
 ```
 
-`testSize(17)` should return "Large"
+`testSize(17)` debe devolver la cadena `Large`
 
 ```js
 assert(testSize(17) === 'Large');
 ```
 
-`testSize(20)` should return "Huge"
+`testSize(20)` debe devolver la cadena `Huge`
 
 ```js
 assert(testSize(20) === 'Huge');
 ```
 
-`testSize(25)` should return "Huge"
+`testSize(25)` debe devolver la cadena `Huge`
 
 ```js
 assert(testSize(25) === 'Huge');
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
index 8ff657c27c..f9a854d947 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
@@ -13,21 +13,20 @@ Los comentarios son líneas de código que JavaScript ignorará intencionalmente
 
 Hay dos maneras de escribir comentarios en JavaScript:
 
-Usar `//` le dirá a JavaScript que ignore el resto del texto en la línea actual:
+Usar `//` le dirá a JavaScript que ignore el resto del texto en la línea actual. Este es un comentario en línea:
 
 ```js
 // This is an in-line comment.
 ```
 
-Puedes hacer un comentario multi-línea comenzando con `/*` y terminando con `*/`:
+Puedes hacer un comentario multilínea comenzando con `/*` y terminando con `*/`. Este es un comentario multilínea:
 
 ```js
 /* This is a
 multi-line comment */
 ```
 
-**Buena práctica**  
-A medida que escribes código, deberías añadir comentarios regularmente para aclarar el funcionamiento de las partes de tu código. Un buen comentario puede ayudar a comunicar la intención de tu código, tanto para otros *como* para tu yo futuro.
+**Nota: ** A medida que programas, deberías añadir comentarios regularmente para aclarar el funcionamiento de las partes de tu código. Un buen comentario puede ayudar a comunicar la intención de tu código, tanto para otros *como* para tu yo futuro.
 
 # --instructions--
 
@@ -50,7 +49,9 @@ assert(code.match(/(\/\*)([^\/]{5,})(?=\*\/)/gm));
 # --seed--
 
 ## --seed-contents--
+
 ```js
+
 ```
 
 # --solutions--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
index 8fd2086992..e162926ebe 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244d0
-title: Comparison with the Equality Operator
+title: Comparación con el operador de igualdad
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cKyVMAL'
 forumTopicId: 16784
@@ -9,9 +9,9 @@ dashedName: comparison-with-the-equality-operator
 
 # --description--
 
-There are many <dfn>comparison operators</dfn> in JavaScript. All of these operators return a boolean `true` or `false` value.
+Hay muchos <dfn>operadores de comparación</dfn> en JavaScript. Todos estos operadores devuelven un valor booleano `true` o `false`.
 
-The most basic operator is the equality operator `==`. The equality operator compares two values and returns `true` if they're equivalent or `false` if they are not. Note that equality is different from assignment (`=`), which assigns the value on the right of the operator to a variable on the left.
+El operador más básico es el de igualdad `==`. El operador de igualdad compara dos valores y devuelve `true` si son equivalentes o `false` si no lo son. Ten en cuenta que una igualdad es diferente a una asignación (`=`), la cual asigna el valor a la derecha del operador a la variable de la izquierda.
 
 ```js
 function equalityTest(myVal) {
@@ -22,40 +22,42 @@ function equalityTest(myVal) {
 }
 ```
 
-If `myVal` is equal to `10`, the equality operator returns `true`, so the code in the curly braces will execute, and the function will return `"Equal"`. Otherwise, the function will return `"Not Equal"`. In order for JavaScript to compare two different <dfn>data types</dfn> (for example, `numbers` and `strings`), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows:
+Si `myVal` es igual a `10`, el operador de igualdad devuelve `true`, así que el código dentro de los corchetes se ejecutará y la función devolverá `Equal`. De lo contrario, la función devolverá `Not Equal`. Para que JavaScript compare dos <dfn>tipos de datos</dfn> diferentes (por ejemplo, `numbers` y `strings`), tiene que convertir un tipo a otro. Esto se conoce como Coerción de Tipo. Sin embargo, una vez lo hace, puede comparar términos como se ve a continuación:
 
 ```js
-1   ==  1   // true
-1   ==  2   // false
-1   == '1'  // true
-"3" ==  3   // true
+1   ==  1
+1   ==  2
+1   == '1'
+"3" ==  3
 ```
 
+En orden, estas expresiones se evaluarían como `true`, `false`, `true` y `true`.
+
 # --instructions--
 
-Add the equality operator to the indicated line so that the function will return "Equal" when `val` is equivalent to `12`.
+Agrega el operador de igualdad a la línea indicada para que la función devuelva la cadena `Equal` cuando `val` sea equivalente a `12`.
 
 # --hints--
 
-`testEqual(10)` should return "Not Equal"
+`testEqual(10)` debe devolver la cadena `Not Equal`
 
 ```js
 assert(testEqual(10) === 'Not Equal');
 ```
 
-`testEqual(12)` should return "Equal"
+`testEqual(12)` debe devolver la cadena `Equal`
 
 ```js
 assert(testEqual(12) === 'Equal');
 ```
 
-`testEqual("12")` should return "Equal"
+`testEqual("12")` debe devolver la cadena `Equal`
 
 ```js
 assert(testEqual('12') === 'Equal');
 ```
 
-You should use the `==` operator
+Debes usar el operador `==`
 
 ```js
 assert(code.match(/==/g) && !code.match(/===/g));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md
index 5e282249b2..3be6335b3a 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244d4
-title: Comparación con el operador Mayor que
+title: Comparación con el operador "mayor que"
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cp6GbH4'
 forumTopicId: 16786
@@ -16,55 +16,57 @@ Como el operador de igualdad, el operador mayor que convertirá los tipos de dat
 **Ejemplos**
 
 ```js
-5   >  3   // true
-7   > '3'  // true
-2   >  3   // false
-'1' >  9   // false
+5   >  3
+7   > '3'
+2   >  3
+'1' >  9
 ```
 
+En orden, estas expresiones se evaluarían como `true`, `true`, `false` y `false`.
+
 # --instructions--
 
-Agrega el operador mayor que a las líneas indicadas para que las declaraciones de devolución tengan sentido.
+Agrega el operador "mayor que" a las líneas indicadas para que las declaraciones de devolución tengan sentido.
 
 # --hints--
 
-`testGreaterThan(0)` debe devolver "10 or Under"
+`testGreaterThan(0)` debe devolver la cadena `10 or Under`
 
 ```js
 assert(testGreaterThan(0) === '10 or Under');
 ```
 
-`testGreaterThan(10)` debe devolver "10 or Under"
+`testGreaterThan(10)` debe devolver la cadena `10 or Under`
 
 ```js
 assert(testGreaterThan(10) === '10 or Under');
 ```
 
-`testGreaterThan(11)` debe devolver "Over 10"
+`testGreaterThan(11)` debe devolver la cadena `Over 10`
 
 ```js
 assert(testGreaterThan(11) === 'Over 10');
 ```
 
-`testGreaterThan(99)` debe devolver "Over 10"
+`testGreaterThan(99)` debe devolver la cadena `Over 10`
 
 ```js
 assert(testGreaterThan(99) === 'Over 10');
 ```
 
-`testGreaterThan(100)` debe devolver "Over 10"
+`testGreaterThan(100)` debe devolver la cadena `Over 10`
 
 ```js
 assert(testGreaterThan(100) === 'Over 10');
 ```
 
-`testGreaterThan(101)` debe devolver "Over 100"
+`testGreaterThan(101)` debe devolver la cadena `Over 100`
 
 ```js
 assert(testGreaterThan(101) === 'Over 100');
 ```
 
-`testGreaterThan(150)` debe devolver"Over 100"
+`testGreaterThan(150)` debe devolver la cadena `Over 100`
 
 ```js
 assert(testGreaterThan(150) === 'Over 100');
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
index e1bf723545..82b7c9af05 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244b8
-title: Concatenating Strings with the Plus Equals Operator
+title: Concatena cadenas con el operador "más igual"
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cbQmmC4'
 forumTopicId: 16803
@@ -9,32 +9,32 @@ dashedName: concatenating-strings-with-the-plus-equals-operator
 
 # --description--
 
-We can also use the `+=` operator to <dfn>concatenate</dfn> a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.
+También podemos utilizar el operador `+=` para <dfn>concatenar</dfn> una cadena al final de una variable de cadena existente. Esto puede ser muy útil para romper una cadena larga en varias líneas.
 
-**Note**  
-Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.
+**Nota:** Ten cuidado con los espacios. La concatenación no añade espacios entre las cadenas concatenadas, así que tendrás que añadirlos por tu cuenta.
 
-Example:
+Ejemplo:
 
 ```js
 var ourStr = "I come first. ";
 ourStr += "I come second.";
-// ourStr is now "I come first. I come second."
 ```
 
+`ourStr` ahora tiene un valor de la cadena `I come first. I come second.`.
+
 # --instructions--
 
-Build `myStr` over several lines by concatenating these two strings: `"This is the first sentence. "` and `"This is the second sentence."` using the `+=` operator. Use the `+=` operator similar to how it is shown in the editor. Start by assigning the first string to `myStr`, then add on the second string.
+Construye `myStr` en varias líneas concatenando estas dos cadenas: `This is the first sentence.` y `This is the second sentence.` usando el operador `+=`. Utiliza el operador `+=` de forma similar a como se muestra en el editor. Comienza asignando la primera cadena a `myStr`, luego añade la segunda cadena.
 
 # --hints--
 
-`myStr` should have a value of `This is the first sentence. This is the second sentence.`
+`myStr` debe tener una cadena con valor `This is the first sentence. This is the second sentence.`
 
 ```js
 assert(myStr === 'This is the first sentence. This is the second sentence.');
 ```
 
-You should use the `+=` operator to build `myStr`.
+Debes usar el operador `+=` para construir `myStr`.
 
 ```js
 assert(code.match(/myStr\s*\+=\s*(["']).*\1/g));
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index 42f91172df..f71600a49f 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -1,6 +1,6 @@
 ---
 id: cf1111c1c12feddfaeb1bdef
-title: Generate Random Whole Numbers with JavaScript
+title: Genera números enteros aleatorios con JavaScript
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/cRn6bfr'
 forumTopicId: 18186
@@ -9,25 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
 
 # --description--
 
-It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.
+Es genial que podamos generar números decimales aleatorios, pero es incluso más útil si lo usamos para generar números enteros aleatorios.
 
-<ol><li>Use <code>Math.random()</code> to generate a random decimal.</li><li>Multiply that random decimal by <code>20</code>.</li><li>Use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.</li></ol>
+<ol><li>Usa <code>Math.random()</code> para generar un decimal aleatorio.</li><li>Multiplica ese decimal aleatorio por <code>20</code>.</li><li>Utiliza otra función, <code>Math.floor()</code> para redondear el número hacia abajo a su número entero más cercano.</li></ol>
 
-Remember that `Math.random()` can never quite return a `1` and, because we're rounding down, it's impossible to actually get `20`. This technique will give us a whole number between `0` and `19`.
+Recuerda que `Math.random()` nunca devolverá un `1` y porque estamos redondeando hacia abajo, es imposible obtener `20`. Esta técnica nos dará un número entero entre `0` y `19`.
 
-Putting everything together, this is what our code looks like:
+Poniendo todo junto, así es como se ve nuestro código:
 
 `Math.floor(Math.random() * 20);`
 
-We are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` function to round the value down to the nearest whole number.
+Estamos llamando a `Math.random()`, multiplicando el resultado por 20 y pasando el valor a la función `Math.floor()` para redondear el valor hacia abajo al número entero más cercano.
 
 # --instructions--
 
-Use this technique to generate and return a random whole number between `0` and `9`.
+Utiliza esta técnica para generar y devolver un número entero aleatorio entre `0` y `9`.
 
 # --hints--
 
-The result of `randomWholeNum` should be a whole number.
+El resultado de `randomWholeNum` debe ser un número entero.
 
 ```js
 assert(
@@ -39,13 +39,13 @@ assert(
 );
 ```
 
-You should use `Math.random` to generate a random number.
+Debes usar `Math.random` para generar un número aleatorio.
 
 ```js
 assert(code.match(/Math.random/g).length >= 1);
 ```
 
-You should have multiplied the result of `Math.random` by 10 to make it a number that is between zero and nine.
+Debes haber multiplicado el resultado de `Math.random` por 10 para convertirlo en un número entre cero y nueve.
 
 ```js
 assert(
@@ -54,7 +54,7 @@ assert(
 );
 ```
 
-You should use `Math.floor` to remove the decimal part of the number.
+Debes usar `Math.floor` para eliminar la parte decimal del número.
 
 ```js
 assert(code.match(/Math.floor/g).length >= 1);
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md
index 1d882d80d6..f9cd3b33ea 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md
@@ -1,6 +1,6 @@
 ---
 id: 56533eb9ac21ba0edf2244c6
-title: Stand in Line
+title: Permanece en línea
 challengeType: 1
 videoUrl: 'https://scrimba.com/c/ca8Q8tP'
 forumTopicId: 18307
@@ -9,41 +9,41 @@ dashedName: stand-in-line
 
 # --description--
 
-In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the queue and old items are taken off from the front of the queue.
+En Informática una <dfn>cola</dfn> (queue) es una estructura de datos <dfn>abstracta</dfn> donde los elementos se mantienen en orden. Los nuevos elementos se pueden añadir en la parte posterior de la cola y los elementos antiguos se retiran de la parte delantera de la cola.
 
-Write a function `nextInLine` which takes an array (`arr`) and a number (`item`) as arguments.
+Escribe una función `nextInLine` que tome un arreglo (`arr`) y un número (`item`) como argumentos.
 
-Add the number to the end of the array, then remove the first element of the array.
+Agrega el número al final del arreglo, luego elimina el primer elemento del arreglo.
 
-The `nextInLine` function should then return the element that was removed.
+La función `nextInLine` debe entonces devolver el elemento que fue removido.
 
 # --hints--
 
-`nextInLine([], 5)` should return a number.
+`nextInLine([], 5)` debe devolver un número.
 
 ```js
 assert.isNumber(nextInLine([], 5));
 ```
 
-`nextInLine([], 1)` should return `1`
+`nextInLine([], 1)` debe devolver `1`
 
 ```js
 assert(nextInLine([], 1) === 1);
 ```
 
-`nextInLine([2], 1)` should return `2`
+`nextInLine([2], 1)` debe devolver `2`
 
 ```js
 assert(nextInLine([2], 1) === 2);
 ```
 
-`nextInLine([5,6,7,8,9], 1)` should return `5`
+`nextInLine([5,6,7,8,9], 1)` debe devolver `5`
 
 ```js
 assert(nextInLine([5, 6, 7, 8, 9], 1) === 5);
 ```
 
-After `nextInLine(testArr, 10)`, `testArr[4]` should be `10`
+Después de `nextInLine(testArr, 10)`, `testArr[4]` debe ser igual a `10`
 
 ```js
 nextInLine(testArr, 10);
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
index 8b458f0c98..5e6a3581d6 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
@@ -8,9 +8,9 @@ dashedName: compare-scopes-of-the-var-and-let-keywords
 
 # --description--
 
-Cuando tú declaras una variable con la palabra `var`, esta es declarada globalmente o localmente sí es declarada dentro de una función.
+Cuando declaras una variable con la palabra `var`, esta es declarada globalmente o localmente sí es declarada dentro de una función.
 
-La palabra `let` se comporta de forma similar, pero con algunas funciones adicionales. Cuanto tú declaras una variable con la palabra `let` dentro de un bloque, una declaración o expresión. Su alcance está limitado a ese bloque, declaración o expresión.
+La palabra `let` se comporta de forma similar, pero con algunas funciones adicionales. Cuanto declaras una variable con la palabra `let` dentro de un bloque, una declaración o expresión. Su alcance está limitado a ese bloque, declaración o expresión.
 
 Por ejemplo:
 
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md
index 056cdc8850..601262f5fa 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md
@@ -8,7 +8,7 @@ dashedName: create-a-javascript-promise
 
 # --description--
 
-Una promesa en JavaScript es exactamente lo que suena, la usas para hacer una promesa de hacer algo, normalmente de forma asíncrona. Cuando la tarea se complete, cumple su promesa o no la cumple. `Promise` es una función constructora, así que tu necesitas usar la palabra clave `new` para crear una. Toma una función como su argumento, con dos parámetros - `resolve` y `reject`. Estos son métodos utilizados para determinar el resultado de la promesa. La sintaxis se ve así:
+Una promesa en JavaScript es exactamente como suena, se utiliza para hacer una promesa de que harás algo, habitualmente de forma asíncrona. Cuando la tarea se completa, o cumples tu promesa o no la cumples. `Promise` es una función constructora, así que tu necesitas usar la palabra clave `new` para crear una. Recibe una función como su argumento, con dos parámetros: `resolve` y `reject`. Estos métodos se utilizan para determinar el resultado de la promesa. Su sintaxis se ve así:
 
 ```js
 const myPromise = new Promise((resolve, reject) => {
@@ -18,7 +18,7 @@ const myPromise = new Promise((resolve, reject) => {
 
 # --instructions--
 
-Crea una nueva promesa llamada `makeServerRequest`. Pase en una función con `resolve` y `reject` parámetros al constructor.
+Crea una nueva promesa llamada `makeServerRequest`. Pásale una función con parámetros `resolve` y `reject` al constructor.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
index 0f401beeab..69d19937cc 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7b8e367417b2b2512b5e
-title: Avoid Mutations and Side Effects Using Functional Programming
+title: Evita mutaciones y efectos secundarios utilizando programación funcional
 challengeType: 1
 forumTopicId: 301228
 dashedName: avoid-mutations-and-side-effects-using-functional-programming
@@ -8,39 +8,39 @@ dashedName: avoid-mutations-and-side-effects-using-functional-programming
 
 # --description--
 
-If you haven't already figured it out, the issue in the previous challenge was with the `splice` call in the `tabClose()` function. Unfortunately, `splice` changes the original array it is called on, so the second call to it used a modified array, and gave unexpected results.
+Si aún no te has dado cuenta, el problema en el desafío anterior estaba en la llamada `splice` de la función `tabClose()`. Desafortunadamente, `splice` modifica el arreglo original a la que se llama, por lo que la segunda llamada a ella utilizo un arreglo modificado, y dio resultados inesperados.
 
-This is a small example of a much larger pattern - you call a function on a variable, array, or an object, and the function changes the variable or something in the object.
+Este es un pequeño ejemplo de un patrón mucho mayor: se llama a una función en una variable, arreglo o un objeto, y la función modifica la variable o algo en el objeto.
 
-One of the core principles of functional programming is to not change things. Changes lead to bugs. It's easier to prevent bugs knowing that your functions don't change anything, including the function arguments or any global variable.
+Uno de los principios fundamentales de la programación funcional es no cambiar las cosas. Los cambios conducen a errores. Es más fácil evitar errores sabiendo que las funciones no cambian nada, incluyendo los argumentos de la función o cualquier variable global.
 
-The previous example didn't have any complicated operations but the `splice` method changed the original array, and resulted in a bug.
+El ejemplo anterior no tenía operaciones complicadas, pero el método `splice` modificó el arreglo original y dio como resultado en un error.
 
-Recall that in functional programming, changing or altering things is called <dfn>mutation</dfn>, and the outcome is called a <dfn>side effect</dfn>. A function, ideally, should be a <dfn>pure function</dfn>, meaning that it does not cause any side effects.
+Recuerda que en la programación funcional, cambiar o alterar cosas se denomina <dfn>mutación</dfn>, y el resultado es conocido como <dfn>efecto secundario</dfn>. Una función, idealmente, debe ser una <dfn>función pura</dfn>, lo que significa que no provoca ningún efecto secundario.
 
-Let's try to master this discipline and not alter any variable or object in our code.
+Intentemos dominar esta disciplina y no alterar ninguna variable u objeto en nuestro código.
 
 # --instructions--
 
-Fill in the code for the function `incrementer` so it returns the value of the global variable `fixedValue` increased by one.
+Completa el código de la función `incrementer` para que devuelva el valor de la variable global `fixedValue` incrementada en uno.
 
 # --hints--
 
-Your function `incrementer` should not change the value of `fixedValue` (which is `4`).
+Tu función `incrementer` no debe cambiar el valor de `fixedValue` (que es `4`).
 
 ```js
 incrementer();
 assert(fixedValue === 4);
 ```
 
-Your `incrementer` function should return a value that is one larger than the `fixedValue` value.
+La función `incrementer` debe devolver el valor de `fixedValue` más uno.
 
 ```js
 const __newValue = incrementer();
 assert(__newValue === 5);
 ```
 
-Your `incrementer` function should return a value based on the global `fixedValue` variable value.
+La función `incrementer` debe devolver un valor basado en el valor de la variable global `fixedValue`.
 
 ```js
 (function () {
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
index b1098b2b28..a40f53303a 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7b8f367417b2b2512b62
-title: Implement map on a Prototype
+title: Implementa map en un prototipo
 challengeType: 1
 forumTopicId: 301230
 dashedName: implement-map-on-a-prototype
@@ -8,25 +8,25 @@ dashedName: implement-map-on-a-prototype
 
 # --description--
 
-As you have seen from applying `Array.prototype.map()`, or simply `map()` earlier, the `map` method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't.
+Como has visto anteriormente, al aplicar `Array.prototype.map()`, o simplemente `map()`, el método `map` devuelve un arreglo de la misma longitud que el arreglo dentro del que fue llamado. Esto tampoco altera el arreglo original, siempre y cuando su función callback no lo haga.
 
-In other words, `map` is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.
+En otras palabras, `map` es una función pura, y su salida depende únicamente de sus entradas. Además, toma otra función como argumento.
 
-You might learn a lot about the `map` method if you implement your own version of it. It is recommended you use a `for` loop or `Array.prototype.forEach()`.
+Puedes aprender mucho sobre el método `map` si implementas tu propia versión. Se recomienda utilizar un bucle `for` o `Array.prototype.forEach()`.
 
 # --instructions--
 
-Write your own `Array.prototype.myMap()`, which should behave exactly like `Array.prototype.map()`. You should not use the built-in `map` method. The `Array` instance can be accessed in the `myMap` method using `this`.
+Escribe tu propio `Array.prototype.myMap()`, el cual debe comportarse exactamente como `Array.prototype.map()`. No debes utilizar el método incorporado `map`. Se puede acceder a la instancia de `Array` en el método `myMap` usando `this`.
 
 # --hints--
 
-`new_s` should equal `[46, 130, 196, 10]`.
+`new_s` debe ser igual a `[46, 130, 196, 10]`.
 
 ```js
 assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10]));
 ```
 
-Your code should not use the `map` method.
+Tu código no debe utilizar el método `map`.
 
 ```js
 assert(!code.match(/\.?[\s\S]*?map/g));