freeCodeCamp/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.spanish.md

id, title, localeTitle, isRequired, challengeType

id	title	localeTitle	isRequired	challengeType
bd7178d8c242eddfaeb5bd13	Visualize Data with a Scatterplot Graph	Visualice datos con un gráfico de dispersión	true	3

Description

Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/bgpXyK . Cumplir con las siguientes historias de usuario 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 https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . 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. Historia de usuario n. ° 1: Puedo ver un elemento de título que tiene un id="title" . Historia de usuario n. ° 2: Puedo ver un eje x que tiene un id="x-axis" correspondiente id="x-axis" . Historia de usuario n. ° 3: Puedo ver un eje y que tiene un id="y-axis" correspondiente id="y-axis" . Historia de usuario # 4: Puedo ver puntos, cada uno con una clase de dot , que representan los datos que se están graficando. Historia del usuario n. ° 5: Cada punto debe tener las propiedades data-xvalue y data-yvalue contienen sus valores x e y correspondientes. Historia de usuario n. ° 6: El valor de data-xvalue y el valor de 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 enteros (años completos) o los objetos Date son aceptables para la evaluación de la prueba. Para data-yvalue (minutos), use objetos Date. Historia de usuario n. ° 7: el valor data-xvalue y su punto correspondiente deben alinearse con el punto / valor correspondiente en el eje x. Historia de usuario n. ° 8: El valor y el valor de los data-yvalue y su punto correspondiente deben alinearse con el punto / valor correspondiente en el eje y. Historia de usuario n. ° 9: Puedo ver varias etiquetas de tic en el eje y con el formato de hora %M:%S Historia de usuario # 10: Puedo ver varias etiquetas de tick en el eje x que muestran el año. Historia de usuario n. ° 11: Puedo ver que el rango de las etiquetas del eje x está dentro del rango de los datos reales del eje x. 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. Historia del usuario n. ° 13: Puedo ver una leyenda que contiene texto descriptivo que tiene id="legend" . Historia de usuario n. ° 14: 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. ° 15: Mi información sobre herramientas debe tener una propiedad de data-year que se corresponda con el valor de data-xvalue del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json Puede construir su proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en cualquier 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 sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required