mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-25 05:03:48 -05:00
62 lines
3.6 KiB
Markdown
62 lines
3.6 KiB
Markdown
---
|
|
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
|
|
```
|