58 lines
5.0 KiB
Markdown
58 lines
5.0 KiB
Markdown
---
|
|
id: 587d7fa6367417b2b2512bc0
|
|
title: Visualize Data with a Treemap Diagram
|
|
localeTitle: Visualice datos con un diagrama de treemap
|
|
isRequired: true
|
|
challengeType: 3
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
<strong>Objetivo:</strong> crear una aplicación <a href='https://codepen.io' target='_blank'>CodePen.io</a> que sea funcionalmente similar a esta: <a href='https://codepen.io/freeCodeCamp/full/KaNGNR' target='_blank'>https://codepen.io/freeCodeCamp/full/KaNGNR</a> .
|
|
Cumplir con las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a> y obtener todas las pruebas para pasar. Dale tu propio estilo personal.
|
|
Puede usar HTML, JavaScript, CSS y la biblioteca de visualización basada en svg D3. Las pruebas requieren que se generen ejes utilizando la propiedad del eje D3, que genera automáticamente tics a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3 porque sus posiciones se usan para determinar la alineación de los elementos graficados. Encontrará información sobre la generación de ejes en <a href='https://github.com/d3/d3/blob/master/API.md#axes-d3-axis' target='_blank'>https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Los elementos DOM (no virtuales) requeridos se consultan en el momento de cada prueba. Si usa un marco de frontend (como Vue, por ejemplo), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos acomodarlos eventualmente, pero estos marcos no están actualmente soportados para proyectos D3.
|
|
<strong>Historia de usuario # 1:</strong> Mi mapa del árbol debe tener un título con una <code>id="title"</code> correspondiente <code>id="title"</code> .
|
|
<strong>Historia de usuario n. ° 2:</strong> Mi mapa de árbol debe tener una descripción con una <code>id="description"</code> correspondiente <code>id="description"</code> .
|
|
<strong>Historia de usuario # 3:</strong> Mi mapa del árbol debe tener elementos <code>rect</code> con una <code>class="tile"</code> correspondiente <code>class="tile"</code> que representa los datos.
|
|
<strong>Historia de usuario n. ° 4:</strong> Debe haber al menos 2 colores de relleno diferentes utilizados para los azulejos.
|
|
<strong>Historia de usuario n. ° 5:</strong> Cada mosaico debe tener las propiedades <code>data-name</code> <code>data-category</code> <code>data-value</code> contengan su nombre, categoría y valor correspondientes.
|
|
<strong>Historia de usuario n. ° 6:</strong> El área de cada mosaico debe corresponder a la cantidad del valor de los datos: los mosaicos con un valor de datos más grande deben tener un área más grande.
|
|
<strong>Historia de usuario # 7:</strong> Mi mapa del árbol debe tener una leyenda con el correspondiente <code>id="legend"</code> .
|
|
<strong>Historia de usuario # 8:</strong> Mi leyenda debe tener elementos <code>rect</code> con una <code>class="legend-item"</code> correspondiente <code>class="legend-item"</code> .
|
|
<strong>Historia de usuario # 9:</strong> Los elementos <code>rect</code> en la leyenda deben usar al menos 2 colores de relleno diferentes.
|
|
<strong>Historia de usuario # 10:</strong> puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente <code>id="tooltip"</code> que muestra más información sobre el área.
|
|
<strong>Historia de usuario n. ° 11:</strong> Mi información sobre herramientas debe tener una propiedad de <code>data-value</code> que corresponda al <code>data-value</code> de <code>data-value</code> del área activa.
|
|
Para este proyecto puedes usar cualquiera de los siguientes conjuntos de datos: <br><ul><li> <strong>Compromisos de Kickstarter:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json</code> </li><li> <strong>Ventas de películas:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json</code> </li><li> <strong>Ventas de videojuegos:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json</code> </li></ul>
|
|
Puede construir su proyecto por medio de <a href='https://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>este bolígrafo CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code>
|
|
Una vez que haya terminado, envíe la URL a su Proyecto de trabajo con todas sus pruebas aprobadas.
|
|
Recuerda usar el método de <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>lectura-búsqueda-pregunta</a> si te atascas.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests: []
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|