4.9 KiB
4.9 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7168d8c242eddfaeb5bd13 | Visualize Data with a Bar Chart | true | 3 | Visualice datos con un gráfico de barras |
Description
id="title"
correspondiente id="title"
. Historia de usuario n. ° 2: Mi gráfico debe tener un eje x del elemento g
con un id="x-axis"
correspondiente id="x-axis"
. Historia de usuario n. ° 3: Mi gráfico debe tener un eje g
elemento y con su correspondiente id="y-axis"
. Historia de usuario n. ° 4: Ambos ejes deben contener varias etiquetas de tilde, cada una con la class="tick"
correspondiente class="tick"
. Historia de usuario n. ° 5: Mi gráfico debe tener un elemento rect
para cada punto de datos con una class="bar"
correspondiente class="bar"
muestra los datos. Historia de usuario n. ° 6: Cada barra debe tener las propiedades data-date
y data-gdp
contienen la fecha y los valores de GDP. Historia de usuario n. ° 7: Las propiedades de data-date
los elementos de la barra deben coincidir con el orden de los datos proporcionados. Historia de usuario n. ° 8: Las propiedades data-gdp
elementos de la barra deben coincidir con el orden de los datos proporcionados. Historia de usuario n. ° 9: la altura de cada elemento de barra debe representar con precisión el PIB correspondiente de los datos. Historia de usuario n. ° 10: el atributo data-date
y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje x. Historia de usuario # 11: El atributo data-gdp
y su elemento de barra correspondiente deben alinearse con el valor correspondiente en el eje y. Historia de usuario n. ° 12: puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente id="tooltip"
que muestra más información sobre el área. Historia de usuario n. ° 13: Mi información sobre herramientas debe tener una propiedad de data-date
que corresponda a la data-date
de data-date
del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Puede compilar su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. 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 lectura-búsqueda-pregunta si te atascas. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required