chore(i18n,curriculum): update translations (#43493)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualiza datos con un gráfico de barras
|
||||
title: Visualiza datos con una gráfica de barras
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que sea funcionalmente similar a esta: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
|
||||
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
|
||||
**Historia de Usuario #1:** Mi gráfico debe tener un título con su correspondiente `id="title"`.
|
||||
**Historia de usuario #1:** Mi gráfica debe tener un título con su correspondiente `id="title"`.
|
||||
|
||||
**Historia de Usuario #2:** Mi gráfico debe tener un elemento `g` en el eje-x con su correspondiente `id="x-axis"`.
|
||||
**Historia de usuario #2:** Mi gráfica debe tener un elemento `g` en el eje-x con su correspondiente `id="x-axis"`.
|
||||
|
||||
**Historia de Usuario #3:** Mi gráfico debe tener un elemento `g` en el eje-y con su correspondiente `id="y-axis"`.
|
||||
**Historia de usuario #3:** Mi gráfica debe tener un elemento `g` en el eje-y con su correspondiente `id="y-axis"`.
|
||||
|
||||
**Historia de Usuario #4:** Ambos ejes debe contener múltiples etiquetas de marca, cada uno con su correspondiente `class="tick"`.
|
||||
**Historia de usuario #4:** Ambos ejes debe contener múltiples etiquetas de marca, cada uno con su correspondiente `class="tick"`.
|
||||
|
||||
**Historia de Usuario #5:** Mi gráfico debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos.
|
||||
**Historia de usuario #5:** Mi gráfica debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos.
|
||||
|
||||
**Historia de Usuario #6:** Cada barra debe tener la propiedad `data-date` y `data-gdp` conteniendo los valores `date` y `GDP`.
|
||||
**Historia de usuario #6:** Cada barra debe tener la propiedad `data-date` y `data-gdp` conteniendo los valores `date` y `GDP`.
|
||||
|
||||
**Historia de Usuario #7:** Las propiedades `data-date` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
|
||||
**Historia de usuario #7:** Las propiedades `data-date` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
|
||||
|
||||
**Historia de Usuario #8:** Las propiedades `data-gdp` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
|
||||
**Historia de usuario #8:** Las propiedades `data-gdp` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
|
||||
|
||||
**Historia de Usuario #9:** La altura de cada elemento de barra debe representar con exactitud el `GDP` correspondiente a los datos.
|
||||
**Historia de usuario #9:** La altura de cada elemento de barra debe representar con exactitud el `GDP` correspondiente a los datos.
|
||||
|
||||
**Historia de Usuario #10:** El atributo `data-date` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-x.
|
||||
**Historia de usuario #10:** El atributo `data-date` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-x.
|
||||
|
||||
**Historia de Usuario #11:** El atributo `data-gdp` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-y.
|
||||
**Historia de usuario #11:** El atributo `data-gdp` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-y.
|
||||
|
||||
**Historia de Usuario #12:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestra más información acerca del área.
|
||||
**Historia de usuario #12:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
|
||||
|
||||
**Historia de Usuario #13:** Mi descripción debe tener una propiedad `data-date` que corresponda con el `data-date` del área activa.
|
||||
**Historia de usuario #13:** Mi cuadro emergente debe tener una propiedad `data-date` que corresponda con el `data-date` del área activa.
|
||||
|
||||
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
|
||||
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
|
||||
**Historia de Usuario #1:** Mi coroplético debe tener un título con su correspondiente `id="title"`.
|
||||
**Historia de usuario #1:** Mi coroplético debe tener un título con su correspondiente `id="title"`.
|
||||
|
||||
**Historia de Usuario #2:** Mi coroplético debe tener una descripción con su correspondiente `id="description"`.
|
||||
**Historia de usuario #2:** Mi coroplético debe tener una descripción con su correspondiente `id="description"`.
|
||||
|
||||
**Historia de Usuario #3:** Mi coroplético debe tener condados con su correspondiente `class="county"` que represente el dato.
|
||||
**Historia de usuario #3:** Mi coroplético debe tener condados con su correspondiente `class="county"` que represente el dato.
|
||||
|
||||
**Historia de Usuario #4:** Debe haber al menos 4 colores de relleno diferentes para los condados.
|
||||
**Historia de usuario #4:** Debe haber al menos 4 colores de relleno diferentes para los condados.
|
||||
|
||||
**Historia de Usuario #5:** Cada uno de mis condados debe tener las propiedades `data-fips` y `data-education` que contengan sus correspondientes valores de `fips` y `education`.
|
||||
**Historia de usuario #5:** Cada uno de mis condados debe tener las propiedades `data-fips` y `data-education` que contengan sus correspondientes valores de `fips` y `education`.
|
||||
|
||||
**Historia de Usuario #6:** Mi coroplético debe tener un condado por cada uno de los puntos proporcionados.
|
||||
**Historia de usuario #6:** Mi coroplético debe tener un condado por cada uno de los puntos proporcionados.
|
||||
|
||||
**Historia de Usuario #7:** Los condados deben tener los valores de `data-fips` y `data-education` que coincidan con los datos de ejemplo.
|
||||
**Historia de usuario #7:** Los condados deben tener los valores de `data-fips` y `data-education` que coincidan con los datos de ejemplo.
|
||||
|
||||
**Historia de Usuario #8:** Mi coroplético debe tener una leyenda con su correspondiente `id="legend"`.
|
||||
**Historia de usuario #8:** Mi coroplético debe tener una leyenda con su correspondiente `id="legend"`.
|
||||
|
||||
**Historia de Usuario #9:** Debe haber al menos 4 colores de relleno usados para la leyenda.
|
||||
**Historia de usuario #9:** Debe haber al menos 4 colores de relleno usados para la leyenda.
|
||||
|
||||
**Historia de Usuario #10:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestre más información sobre el área.
|
||||
**Historia de usuario #10:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestre más información acerca del área.
|
||||
|
||||
**Historia de Usuario #11:** Mi descripción debe tener una propiedad de `data-education` que corresponda con el `data-education` del área activa.
|
||||
**Historia de usuario #11:** Mi cuadro emergente debe tener una propiedad de `data-education` que corresponda con el `data-education` del área activa.
|
||||
|
||||
Aquí están los conjuntos de datos que necesitarás para completar este proyecto:
|
||||
|
||||
- **Datos de Educación de Estados Unidos: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **Datos de educación de Estados Unidos: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **Datos de condados de Estados Unidos: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'> usando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace de CDN para ejecutar los tests en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que sea funcionalmente similar a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
|
||||
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
|
||||
**Historia de Usuario #1:** Mi mapa de calor debe tener un título con su correspondiente `id="title"`.
|
||||
**Historia de usuario #1:** Mi mapa de calor debe tener un título con su correspondiente `id="title"`.
|
||||
|
||||
**Historia de Usuario #2:** Mi mapa de calor debe tener una descripción con su correspondiente `id="description"`.
|
||||
**Historia de usuario #2:** Mi mapa de calor debe tener una descripción con su correspondiente `id="description"`.
|
||||
|
||||
**Historia de Usuario #3:** Mi mapa de calor debe tener un eje-x con su correspondiente `id="x-axis"`.
|
||||
**Historia de usuario #3:** Mi mapa de calor debe tener un eje-x con su correspondiente `id="x-axis"`.
|
||||
|
||||
**Historia de Usuario #4:** Mi mapa de calor debe tener un eje-y con su correspondiente `id="y-axis"`.
|
||||
**Historia de usuario #4:** Mi mapa de calor debe tener un eje-y con su correspondiente `id="y-axis"`.
|
||||
|
||||
**Historia de Usuario #5:** Mi mapa de calor debe tener elementos `rect` con una `class="cell"` que representen los datos.
|
||||
**Historia de usuario #5:** Mi mapa de calor debe tener elementos `rect` con una `class="cell"` que representen los datos.
|
||||
|
||||
**Historia de Usuario #6:** Debe haber al menos 4 colores de relleno usados para las celdas.
|
||||
**Historia de usuario #6:** Debe haber al menos 4 colores de relleno usados para las celdas.
|
||||
|
||||
**Historia de Usuario #7:** Cada celda tendrá las propiedades de `data-month`, `data-year` y `data-temp` que contengan sus correspondientes valores de `month`, `year`, y `temperature`.
|
||||
**Historia de usuario #7:** Cada celda tendrá las propiedades de `data-month`, `data-year` y `data-temp` que contengan sus correspondientes valores de `month`, `year`, y `temperature`.
|
||||
|
||||
**Historia de Usuario #8:** Los `data-month`, `data-year` de cada celda deben estar dentro del rango de los datos.
|
||||
**Historia de usuario #8:** Los `data-month`, `data-year` de cada celda deben estar dentro del rango de los datos.
|
||||
|
||||
**Historia de Usuario #9:** Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente sobre el eje-y.
|
||||
**Historia de usuario #9:** Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente sobre el eje-y.
|
||||
|
||||
**Historia de Usuario #10:** Mi mapa de calor debe tener celdas que se alineen con el año correspondiente sobre el eje-x.
|
||||
**Historia de usuario #10:** Mi mapa de calor debe tener celdas que se alineen con el año correspondiente sobre el eje-x.
|
||||
|
||||
**Historia de Usuario #11:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-y con los nombres completos de los meses.
|
||||
**Historia de usuario #11:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-y con los nombres completos de los meses.
|
||||
|
||||
**Historia de Usuario #12:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-x con los años entre 1754 y 2015.
|
||||
**Historia de usuario #12:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-x con los años entre 1754 y 2015.
|
||||
|
||||
**Historia de Usuario #13:** Mi mapa de calor debe tener una leyenda con su correspondiente `id="legend"`.
|
||||
**Historia de usuario #13:** Mi mapa de calor debe tener una leyenda con su correspondiente `id="legend"`.
|
||||
|
||||
**Historia de Usuario #14:** Mi leyenda debe contener el elemento `rect`.
|
||||
**Historia de usuario #14:** Mi leyenda debe contener el elemento `rect`.
|
||||
|
||||
**Historia de Usuario #15:** El elemento `rect` de la leyenda debe usar al menos 4 diferentes colores de relleno.
|
||||
**Historia de usuario #15:** El elemento `rect` de la leyenda debe usar al menos 4 diferentes colores de relleno.
|
||||
|
||||
**Historia de Usuario #16:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestra más información acerca del área.
|
||||
**Historia de usuario #16:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
|
||||
|
||||
**Historia de Usuario #17:** Mi descripción debe tener una propiedad `data-year` que corresponda con el `data-year` del área activa.
|
||||
**Historia de usuario #17:** Mi cuadro emergente debe tener una propiedad `data-year` que corresponda con el `data-year` del área activa.
|
||||
|
||||
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: Visualiza datos con una gráfica de diagrama de dispersión
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM requeridos (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**Historia de usuario #1:** Puedo ver un elemento titular que tiene un `id="title"`.
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**Historia de usuario #2:** Puedo ver un eje-x que tiene un correspondiente `id="x-axis"`.
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**Historia de usuario #3:** Puedo ver un eje-y que tiene un correspondiente `id="y-axis"`.
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**Historia de usuario #4:** Puedo ver los puntos, que cada uno tiene una clase `dot`, que representa los datos que están siendo graficados.
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
|
||||
**Historia de usuario #5:** Cada punto debe tener las propiedades `data-xvalue` y `data-yvalue` con sus valores correspondientes `x` y `y`.
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
|
||||
**Historia de usuario #6:** Los atributos `data-xvalue` y `data-yvalue` de cada punto deben estar dentro del rango de los datos reales y en el formato de datos correcto. Para `data-xvalue`, los objetos enteros (años completos) o `Date` son aceptables para la evaluación de la prueba. Para `data-yvalue` (minutos), usa objetos `Date`.
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**Historia de usuario #7:** El atributo `data-xvalue` y su correspondiente punto deben alinearse con el punto/valor correspondiente en el eje-x.
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**Historia de usuario #8:** El atributo `data-yvalue` y su correspondiente punto deben alinearse con el punto/valor correspondiente en el eje-y.
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**Historia de usuario #9:** Puedo ver varias etiquetas de marca en el eje-y con el formato de tiempo `%M:%S`.
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**Historia de usuario #10:** Puedo ver varias etiquetas de marca en el eje-x mostrando el año.
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**Historia de usuario #11:** Puedo ver que el rango de las etiquetas del eje-x está dentro del rango de los datos reales del eje-x.
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**Historia de usuario #12:** Puedo ver que el rango de las etiquetas del eje-y está dentro del rango de los datos reales del eje-y.
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**Historia de usuario #13:** Puedo ver una leyenda con un texto descriptivo con su correspondiente `id="legend"`.
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Historia de usuario #14:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**Historia de usuario #15:** Mi cuadro emergente debe tener una propiedad `data-year` que corresponda con el `data-xvalue` del área activa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: Visualiza datos con un diagrama de mapa de árbol
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM requeridos (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**Historia de usuario #1:** Mi mapa de árbol debe tener un título con su correspondiente `id="title"`.
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**Historia de usuario #2:** Mi mapa de árbol debe tener una descripción con su correspondiente `id="description"`.
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**Historia de usuario #3:** Mi mapa de árbol debe tener elementos `rect` con una `class="tile"` que representen los datos.
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**Historia de usuario #4:** Debe haber al menos 2 colores de relleno diferentes para los baldosas.
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
|
||||
**Historia de usuario #5:** Cada baldosa debe tener las propiedades `data-name`, `data-category`, y`data-value` conteniendo sus correspondientes `name`, `category`, y`value`.
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
|
||||
**Historia de usuario #6:** El área de cada baldosa debe corresponder a la cantidad de `data-value`: las baldosas con un `data-value` mayor deben tener un área más grande.
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**Historia de usuario #7:** Mi mapa de árbol debe tener una leyenda con su correspondiente `id="legend"`.
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**Historia de usuario #8:** Mi leyenda debe tener elementos `rect` con su correspondiente `class="legend-item"`.
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**Historia de usuario #9:** El elemento `rect` de la leyenda debe usar al menos 2 diferentes colores de relleno.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Historia de usuario #10:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**Historia de usuario #11:** Mi cuadro emergente debe tener una propiedad `data-value` que corresponda con el `data-value` del área activa.
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
Para este proyecto puede utilizar cualquiera de los siguientes conjuntos de datos:
|
||||
|
||||
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
- **Compromisos de Kickstarter:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Ventas de películas:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Ventas de videojuegos:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user