---
id: bd7188d8c242eddfaeb5bd13
title: Datenvisualisierung mit einer Heatmap
challengeType: 3
forumTopicId: 301466
dashedName: visualize-data-with-a-heat-map
---

# --description--

**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a> aufweist.

Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.

Du kannst HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Wenn du ein Frontend-Framework verwendest (z. B. Vue), sind die Testergebnisse für dynamische Inhalte möglicherweise ungenau. Wir hoffen, dass wir diese irgendwann berücksichtigen können, aber derzeit werden diese Frameworks nicht für D3-Projekte unterstützt.

**User Story #1:** Meine Heatmap sollte einen entsprechenden Titel mit einer entsprechenden `id="title"` haben.

**User Story #2:** Meine Heatmap sollte eine Beschreibung mit einer entsprechenden `id="description"` haben.

**User Story #3:** Meine Heatmap sollte eine x-Achse mit einer entsprechenden `id="x-axis"` haben.

**User Story #4:** Meine Heatmap sollte eine y-Achse mit einer entsprechenden `id="y-axis"` haben.

**User Story #5:** Meine Heatmap sollte `rect` Elemente mit einer `class="cell"` haben, die die Daten repräsentieren.

**User Story #6:** Es sollten mindestens 4 verschiedene Füllfarben für die Zellen verwendet werden.

**User Story #7:** Jede Zelle wird die Eigenschaften `data-month`, `data-year`, `data-temp`, die die entsprechenden `month`, `year`, und `temperature`-Werte enthalten.

**User Story #8:** Die `data-month`, `data-year` jeder Zelle sollten sich im Bereich der Daten befinden.

**User Story #9:** Meine Heatmap sollte Zellen haben, die mit dem entsprechenden Monat auf der y-Achse übereinstimmen.

**User Story #10:** Meine Heatmap sollte Zellen haben, die mit dem entsprechenden Jahr auf der x-Achse übereinstimmen.

**User Story #11:** Meine Heatmap sollte mehrere Tick-Labels auf der y-Achse mit dem vollen Monatsnamen haben.

**User Story #12:** Meine Heatmap sollte mehrere Tick-Labels auf der x-Achse mit den Jahren zwischen 1754 und 2015 haben.

**User Story #13:** Meine Heatmap sollte eine Legende mit der entsprechenden `id="legend"` haben.

**User Story #14:** Meine Legende sollte `rect` Elemente beinhalten.

**User Story #15:** Die `rect`-Elemente in der Legende sollten mindestens 4 verschiedene Füllfarben beinhalten.

**User Story #16:** Ich kann mit meiner Maus über einen Bereich fahren und einen Tooltip mit einer entsprechenden `id="tooltip"` sehen, welche mir mehr Informationen über den Bereich anzeigt.

**User Story #17:** Mein Tooltip sollte eine `data-year`-Eigenschaft haben, die dem `data-year` des aktiven Bereichs entspricht.

Hier ist der Datensatz, den du benötigst, um dieses Projekt abzuschließen: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`

Du kannst dein Projekt aufbauen, indem du <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">diese CodePen-Vorlage</a> verwendest und auf `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Sobald du fertig bist, übermittle die URL an dein Arbeitsprojekt, wenn alle Tests bestanden sind.

# --solutions--

```js
// solution required
```