39 lines
4.9 KiB
Markdown
39 lines
4.9 KiB
Markdown
---
|
|
id: bd7168d8c242eddfaeb5bd13
|
|
title: Visualize Data with a Bar Chart
|
|
isRequired: true
|
|
challengeType: 3
|
|
videoUrl: ''
|
|
localeTitle: Visualice datos con un gráfico de barras
|
|
---
|
|
|
|
## 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/GrZVaM" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVaM</a> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede utilizar 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 n. ° 1:</strong> Mi gráfico debe tener un título con una <code>id="title"</code> correspondiente <code>id="title"</code> . <strong>Historia de usuario n. ° 2:</strong> Mi gráfico debe tener un eje x del elemento <code>g</code> con un <code>id="x-axis"</code> correspondiente <code>id="x-axis"</code> . <strong>Historia de usuario n. ° 3:</strong> Mi gráfico debe tener un eje <code>g</code> elemento y con su correspondiente <code>id="y-axis"</code> . <strong>Historia de usuario n. ° 4:</strong> Ambos ejes deben contener varias etiquetas de tilde, cada una con la <code>class="tick"</code> correspondiente <code>class="tick"</code> . <strong>Historia de usuario n. ° 5:</strong> Mi gráfico debe tener un elemento <code>rect</code> para cada punto de datos con una <code>class="bar"</code> correspondiente <code>class="bar"</code> muestra los datos. <strong>Historia de usuario n. ° 6:</strong> Cada barra debe tener las propiedades <code>data-date</code> y <code>data-gdp</code>, que contienen la fecha y los valores de GDP. <strong>Historia de usuario n. ° 7:</strong> Las propiedades de <code>data-date</code> los elementos de la barra deben coincidir con el orden de los datos proporcionados. <strong>Historia de usuario n. ° 8:</strong> Las propiedades <code>data-gdp</code> elementos de la barra deben coincidir con el orden de los datos proporcionados. <strong>Historia de usuario n. ° 9:</strong> la altura de cada elemento de barra debe representar con precisión el PIB correspondiente de los datos. <strong>Historia de usuario n. ° 10:</strong> el atributo <code>data-date</code> y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje x. <strong>Historia de usuario # 11:</strong> El atributo <code>data-gdp</code> y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje y. <strong>Historia de usuario n. ° 12:</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. ° 13:</strong> Mi información sobre herramientas debe tener una propiedad de <code>data-date</code> que corresponda a la <code>data-date</code> de <code>data-date</code> del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code> Puede compilar 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 el 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 las 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>
|