freeCodeCamp/curriculum/challenges/spanish/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.spanish.md

---
id: bd7188d8c242eddfaeb5bd13
title: Visualize Data with a Heat Map
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Visualice datos con un mapa de calor
---

## 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/JEXgeY" target="_blank">https://codepen.io/freeCodeCamp/full/JEXgeY</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. 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 mapa de calor debe tener un título con una <code>id=&quot;title&quot;</code> correspondiente <code>id=&quot;title&quot;</code> . <strong>Historia de usuario n. ° 2:</strong> Mi mapa de calor debe tener una descripción con una <code>id=&quot;description&quot;</code> correspondiente <code>id=&quot;description&quot;</code> . <strong>Historia de usuario n. ° 3:</strong> Mi mapa de calor debe tener un eje x con una <code>id=&quot;x-axis&quot;</code> correspondiente <code>id=&quot;x-axis&quot;</code> . <strong>Historia de usuario n. ° 4:</strong> Mi mapa de calor debe tener un eje y con una <code>id=&quot;y-axis&quot;</code> correspondiente <code>id=&quot;y-axis&quot;</code> . <strong>Historia de usuario n. ° 5:</strong> Mi mapa de calor debe tener elementos <code>rect</code> con una <code>class=&quot;cell&quot;</code> que representa los datos. <strong>Historia de usuario n. ° 6:</strong> Debe haber al menos 4 colores de relleno diferentes utilizados para las celdas. <strong>Historia de usuario n. ° 7:</strong> Cada celda tendrá las propiedades <code>data-month</code> , <code>data-year</code> , <code>data-temp</code> contienen sus valores correspondientes de mes, año y temperatura. <strong>Historia de usuario n. ° 8:</strong> El <code>data-month</code> <code>data-year</code> de <code>data-year</code> de cada celda debe estar dentro del rango de los datos. <strong>Historia de usuario n. ° 9:</strong> Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente en el eje y. <strong>Historia de usuario # 10:</strong> Mi mapa de calor debe tener celdas que se alineen con el año correspondiente en el eje x. <strong>Historia de usuario n. ° 11:</strong> Mi mapa de calor debe tener varias etiquetas de tic en el eje y con el nombre completo del mes. <strong>Historia de usuario n. ° 12:</strong> Mi mapa de calor debe tener varias etiquetas de marca en el eje x con los años comprendidos entre 1754 y 2015. <strong>Historia de usuario n. ° 13:</strong> Mi mapa de calor debe tener una leyenda con una <code>id=&quot;legend&quot;</code> correspondiente <code>id=&quot;legend&quot;</code> . <strong>Historia de usuario n. ° 14:</strong> Mi leyenda debe contener elementos <code>rect</code> . <strong>Historia de usuario n. ° 15:</strong> Los elementos <code>rect</code> en la leyenda deben usar al menos 4 colores de relleno diferentes. <strong>Historia de usuario n. ° 16:</strong> puedo pasar el mouse sobre un área y ver una información sobre herramientas con la correspondiente <code>id=&quot;tooltip&quot;</code> que muestra más información sobre el área. <strong>Historia de usuario n. ° 16:</strong> Mi información sobre herramientas debe tener una propiedad de <code>data-year</code> que corresponda con el <code>data-year</code> de <code>data-year</code> del área activa. Aquí está el conjunto de datos que necesitará para completar este proyecto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code> Puede construir su proyecto por medio de <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">este bolígrafo 

## 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>