diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md index 85b07c3f25..2f13ffc8b4 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md @@ -3,6 +3,14 @@ id: 5e6a54a558d3af90110a60a0 title: '導言：爲何編程？' challengeType: 11 videoId: 3muQV-Im3Z0 +bilibiliIds: + aid: 206882253 + bvid: BV1Fh411z7tr + cid: 376314257 +videoLocaleIds: + espanol: 3muQV-Im3Z0 + italian: 3muQV-Im3Z0 + portuguese: 3muQV-Im3Z0 dashedName: introduction-why-program --- diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md index 6528ef07e4..f981577792 100644 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md @@ -3,6 +3,14 @@ id: 5e6a54a558d3af90110a60a0 title: '导言：为何编程？' challengeType: 11 videoId: 3muQV-Im3Z0 +bilibiliIds: + aid: 206882253 + bvid: BV1Fh411z7tr + cid: 376314257 +videoLocaleIds: + espanol: 3muQV-Im3Z0 + italian: 3muQV-Im3Z0 + portuguese: 3muQV-Im3Z0 dashedName: introduction-why-program --- diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md index f8ad572913..bc712ea135 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md @@ -1,6 +1,6 @@ --- id: 587d7fab367417b2b2512bd8 -title: Add Attributes to the Circle Elements +title: Añade atributos a los elementos del círculo challengeType: 6 forumTopicId: 301471 dashedName: add-attributes-to-the-circle-elements @@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements # --description-- -The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly. +El último desafío creó los elementos `circle` para cada punto en el `dataset` y los agregó al lienzo SVG. Pero D3 necesita más información sobre la posición y el tamaño de cada `circle` para mostrarlos correctamente. -A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`. +Un `circle` en SVG tiene tres atributos principales. Los atributos `cx` y `cy` son las coordenadas. Le dicen a D3 donde colocar el *center* de la forma en el lienzo SVG. El radio (`r` atributo) da el tamaño del `circle`. -Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom. +Al igual que la coordenada `rect` `y`, el atributo `cy` para un `circle` se mide desde la parte superior del lienzo SVG, no desde abajo. -All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array. +Los tres atributos pueden usar una función de devolución de llamada para establecer sus valores de forma dinámica. Recuerda que todos los métodos encadenados después de `data(dataset)` se ejecutan una vez por elemento en `dataset`. El parámetro `d` en la función de devolución de llamada se refiere al elemento actual en `dataset`, que es un arreglo para cada punto. Utiliza la notación de corchetes, como `d[0]`, para acceder a los valores de ese arreglo. # --instructions-- -Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles. +Agrega los atributos `cx`, `cy` y `r` a los elementos `circle`. El valor de `cx` debe ser el primer número en el arreglo para cada elemento en `dataset`. El valor de `cy` debe basarse en el segundo número del arreglo, pero asegúrese de mostrar el gráfico del lado derecho hacia arriba y no invertido. El valor de `r` debe ser `5` para todos los círculos. # --hints-- -Your code should have 10 `circle` elements. +Tu código debe tener 10 elementos `circle`. ```js assert($('circle').length == 10); ``` -The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`. +El primer elemento `circle` debe tener un `cx` con valor de `34`, un `cy` con valor de `422` y un `r` con valor de `5`. ```js assert( @@ -38,7 +38,7 @@ assert( ); ``` -The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`. +El segundo elemento `circle` debe tener un `cx` con valor de `109`, un `cy` con valor de `220` y un `r` con valor de `5`. ```js assert( @@ -48,7 +48,7 @@ assert( ); ``` -The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`. +El tercer elemento `circle` debe tener un `cx` con valor de `310`, un `cy` con valor de `380` y un `r` con valor de `5`. ```js assert( @@ -58,7 +58,7 @@ assert( ); ``` -The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`. +El cuarto elemento `circle` debe tener un `cx` valor de `79`, un `cy` valor de `89` y un `r` valor de `5`. ```js assert( @@ -68,7 +68,7 @@ assert( ); ``` -The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`. +El quinto elemento `circle` debe tener un `cx` valor de `420`, un `cy` valor de `280` y un `r` valor de `5`. ```js assert( @@ -78,7 +78,7 @@ assert( ); ``` -The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`. +El sexto elemento `circle` debe tener un `cx` con valor de `233`, un `cy` con valor de `355` y un `r` con valor de `5`. ```js assert( @@ -88,7 +88,7 @@ assert( ); ``` -The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`. +El séptimo elemento `circle` debe tener un `cx` con valor de `333`, un `cy` con valor de `404` y un `r` con valor de `5`. ```js assert( @@ -98,7 +98,7 @@ assert( ); ``` -The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`. +El octavo elemento `circle` debe tener un `cx` con valor de `222`, un `cy` con valor de `167` y un `r` con valor de `5`. ```js assert( @@ -108,7 +108,7 @@ assert( ); ``` -The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`. +El noveno elemento `circle` debe tener un `cx` con valor de `78`, un `cy` con valor de `180` y un `r` con valor de `5`. ```js assert( @@ -118,7 +118,7 @@ assert( ); ``` -The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`. +El décimo elemento `circle` debe tener un `cx` con valor de `21`, un `cy` con valor de `377` y un `r` con valor de `5`. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md index a1f0bd70dd..82bcebed4b 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md @@ -1,6 +1,6 @@ --- id: 587d7fad367417b2b2512bdf -title: Add Axes to a Visualization +title: Agrega ejes a una visualización challengeType: 6 forumTopicId: 301472 dashedName: add-axes-to-a-visualization @@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization # --description-- -Another way to improve the scatter plot is to add an x-axis and a y-axis. +Otra forma de mejorar el diagrama de dispersión es agregar un eje "x" y un eje "y". -D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges: +D3 tiene dos métodos, `axisLeft()` y `axisBottom()`, para representar el eje "y" y el eje "x", respectivamente. Aquí hay un ejemplo para crear el eje "x" basado en `xScale` en los desafíos anteriores: ```js const xAxis = d3.axisBottom(xScale); ``` -The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example: +El siguiente paso es renderizar el eje en el lienzo SVG. Para hacerlo, puedes utilizar un componente SVG general, el elemento `g`. El `g` significa grupo. A diferencia de `rect`, `circle` y `text`, un eje es solo una línea recta cuando se representa. Debido a que es una forma simple, el uso de `g` funciona. El último paso es aplicar un atributo `transform` para colocar el eje en el lienzo SVG en el lugar correcto. De lo contrario, la línea se representaría a lo largo del borde del lienzo SVG y no sería visible. SVG admite diferentes tipos de `transforms`, pero el posicionamiento de un eje necesita `translate`. Cuando se aplica al elemento `g`, mueve todo el grupo hacia arriba y hacia abajo en las cantidades dadas. He aquí un ejemplo: ```js const xAxis = d3.axisBottom(xScale); @@ -26,21 +26,21 @@ svg.append("g") .call(xAxis); ``` -The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments. +El código anterior coloca el eje "x" en la parte inferior del lienzo SVG. Luego se pasa como argumento al método `call()`. El eje "y" funciona de la misma manera, excepto que el argumento `translate` tiene el formato `(x, 0)`. Debido a que `translate` es una cadena en el método `attr()` anterior, puedes usar la concatenación para incluir valores de variable para sus argumentos. # --instructions-- -The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis. +El diagrama de dispersión ahora tiene un eje x. Crea un eje y en una variable denominada `yAxis` utilizando el método `axisLeft()`. Luego renderiza el eje usando un elemento `g`. Asegúrete de utilizar un atributo `transform` para trasladar el eje por la cantidad de unidades de relleno a la derecha y `0` unidades hacia abajo. Recuerda de `call()` al eje. # --hints-- -Your code should use the `axisLeft()` method with `yScale` passed as the argument. +Tu código debe usar el método `axisLeft()` con `yScale` pasado como argumento. ```js assert(code.match(/\.axisLeft\(yScale\)/g)); ``` -The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`. +El elemento `g` del eje "y" debe tener un atributo `transform` para traducir el eje por `(60, 0)`. ```js assert( @@ -51,7 +51,7 @@ assert( ); ``` -Your code should call the `yAxis`. +Tu código debe llamar al `yAxis`. ```js assert(code.match(/\.call\(\s*yAxis\s*\)/g)); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md index a2911cf178..1031643980 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md @@ -1,6 +1,6 @@ --- id: 587d7fa7367417b2b2512bc8 -title: Add Classes with D3 +title: Agrega clases con D3 challengeType: 6 forumTopicId: 301473 dashedName: add-classes-with-d3 @@ -8,29 +8,29 @@ dashedName: add-classes-with-d3 # --description-- -Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name. +Usar muchos estilos en línea en elementos HTML se vuelve difícil de administrar, incluso para aplicaciones más pequeñas. Es más fácil agregar una clase a los elementos y darle estilo a esa clase una vez usando las reglas CSS. D3 tiene el método `attr()` para agregar cualquier atributo HTML a un elemento, incluido un nombre de clase. -The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection: +El método `attr()` funciona de la misma manera que `style()`. Toma valores separados por comas y puede usar una función de devolución de llamada. A continuación, se muestra un ejemplo para agregar una clase de `container` a una selección: ```js selection.attr("class", "container"); ``` -Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change. +Tenga en cuenta que el parámetro `class` seguirá siendo el mismo siempre que necesite agregar una clase y solo cambiará el parámetro `container`. # --instructions-- -Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements. +Agrega el método `attr()` al código en el editor y coloca una clase de `bar` en los elementos `div`. # --hints-- -Your `div` elements should have a class of `bar`. +Tus elementos `div` deben tener una clase de `bar`. ```js assert($('div').attr('class').trim().split(/\s+/g).includes('bar')); ``` -Your code should use the `attr()` method. +Tu código debe usar el método `attr()`. ```js assert(code.match(/\.attr/g)); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md index ea44782e9c..983ab99338 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md @@ -1,6 +1,6 @@ --- id: 587d7fa6367417b2b2512bc2 -title: Add Document Elements with D3 +title: Agrega elementos de documento con D3 challengeType: 6 forumTopicId: 301474 dashedName: add-document-elements-with-d3 @@ -8,23 +8,23 @@ dashedName: add-document-elements-with-d3 # --description-- -D3 has several methods that let you add and change elements in your document. +D3 tiene varios métodos que te permiten agregar y cambiar elementos en tu documento. -The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example: +El método `select()` selecciona un elemento del documento. Toma un argumento para el nombre del elemento que deseas y devuelve un nodo HTML para el primer elemento del documento que coincide con el nombre. He aquí un ejemplo: ```js const anchor = d3.select("a"); ``` -The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods. +El ejemplo anterior encuentra la primera etiqueta de anclaje en la página y guarda un nodo HTML para ella en la variable `anchor`. Puedes utilizar la selección con otros métodos. La parte `d3` del ejemplo es una referencia al objeto D3, que es la forma de acceder a los métodos D3. -Two other useful methods are `append()` and `text()`. +Otros dos métodos útiles son `append()` y `text()`. -The `append()` method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node. +El método `append()` toma un argumento para el elemento que deseas agregar al documento. Agrega un nodo HTML a un elemento seleccionado y devuelve un identificador a ese nodo. -The `text()` method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method. +El método `text()` establece el texto del nodo seleccionado u obtiene el texto actual. Para establecer el valor, pasa una cadena como argumento dentro del paréntesis del método. -Here's an example that selects an unordered list, appends a list item, and adds text: +Aquí hay un ejemplo que selecciona una lista desordenada, agrega un elemento de lista y agrega texto: ```js d3.select("ul") @@ -32,45 +32,45 @@ d3.select("ul") .text("Very important item"); ``` -D3 allows you to chain several methods together with periods to perform a number of actions in a row. +D3 te permite encadenar varios métodos junto con puntos para realizar una serie de acciones seguidas. # --instructions-- -Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element. +Utiliza el método `select` para seleccionar la etiqueta `body` en el documento. Luego, `append` una etiqueta `h1` y agrega el texto `Learning D3` en el elemento `h1`. # --hints-- -The `body` should have one `h1` element. +El `body` debe tener un elemento `h1`. ```js assert($('body').children('h1').length == 1); ``` -The `h1` element should have the text `Learning D3` in it. +El elemento `h1` debe tener el texto `Learning D3`. ```js assert($('h1').text() == 'Learning D3'); ``` -Your code should access the `d3` object. +Tu código debe acceder al objeto `d3`. ```js assert(code.match(/d3/g)); ``` -Your code should use the `select` method. +Tu código debe utilizar el método `select`. ```js assert(code.match(/\.select/g)); ``` -Your code should use the `append` method. +Tu código debe utilizar el método `append`. ```js assert(code.match(/\.append/g)); ``` -Your code should use the `text` method. +Tu código debe utilizar el método `text`. ```js assert(code.match(/\.text/g)); diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md index 2665d3415f..8ceff9d8cc 100644 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md @@ -3,6 +3,14 @@ id: 5e6a54a558d3af90110a60a0 title: 'Introduzione: perché programmare?' challengeType: 11 videoId: 3muQV-Im3Z0 +bilibiliIds: + aid: 206882253 + bvid: BV1Fh411z7tr + cid: 376314257 +videoLocaleIds: + espanol: 3muQV-Im3Z0 + italian: 3muQV-Im3Z0 + portuguese: 3muQV-Im3Z0 dashedName: introduction-why-program --- diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md index 10dc090bca..e1bce6ee71 100644 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md @@ -3,6 +3,14 @@ id: 5e6a54a558d3af90110a60a0 title: 'Introdução: Por que programar?' challengeType: 11 videoId: 3muQV-Im3Z0 +bilibiliIds: + aid: 206882253 + bvid: BV1Fh411z7tr + cid: 376314257 +videoLocaleIds: + espanol: 3muQV-Im3Z0 + italian: 3muQV-Im3Z0 + portuguese: 3muQV-Im3Z0 dashedName: introduction-why-program ---