58 lines
4.2 KiB
Markdown
58 lines
4.2 KiB
Markdown
|
---
|
||
|
|
id: 587d7fa6367417b2b2512bbf
|
||
|
|
title: Visualize Data with a Choropleth Map
|
||
|
|
localeTitle: Visualice datos con un mapa de coropletas
|
||
|
|
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/EZKqza' target='_blank'>https://codepen.io/freeCodeCamp/full/EZKqza</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. 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 coropleta debe tener un título con una <code>id="title"</code> correspondiente <code>id="title"</code> .
|
||
|
|
<strong>Historia de usuario n. ° 2:</strong> Mi choropleth debe tener un elemento de descripción con un <code>id="description"</code> .
|
||
|
|
<strong>Historia de usuario # 3:</strong> Mi coropleta debe tener condados con una <code>class="county"</code> correspondiente <code>class="county"</code> que representa los datos.
|
||
|
|
<strong>Historia de usuario n. ° 4:</strong> Debe haber al menos 4 colores de relleno diferentes utilizados para los condados.
|
||
|
|
<strong>Historia de usuario n. ° 5:</strong> Mis condados deben tener cada uno <code>data-fips</code> y propiedades de <code>data-education</code> contengan sus fips y valores de educación correspondientes.
|
||
|
|
<strong>Historia de usuario n. ° 6:</strong> Mi coropleta debe tener un condado para cada punto de datos proporcionado.
|
||
|
|
<strong>Historia de usuario n. ° 7:</strong> Los condados deben tener datos de fips y valores de educación de datos que coincidan con los datos de muestra.
|
||
|
|
<strong>Historia de usuario n. ° 8:</strong> Mi choropleth debería tener una leyenda con su correspondiente <code>id="legend"</code> .
|
||
|
|
<strong>Historia de usuario n. ° 9:</strong> Debe haber al menos 4 colores de relleno diferentes utilizados para la leyenda.
|
||
|
|
<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 # 11:</strong> Mi información sobre herramientas debe tener una propiedad de <code>data-education</code> que corresponda a la <code>data-education</code> de <code>data-education</code> del área activa.
|
||
|
|
Aquí están los conjuntos de datos que necesitará para completar este proyecto: <br><ul><li> <strong>Datos de educación de los Estados Unidos:</strong> <code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json</code> </li><li> <strong>Datos del condado de EE. UU .:</strong> <code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.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>
|