3.6 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7188d8c242eddfaeb5bd13 | Datenvisualisierung mit einer Heatmap | 3 | 301466 | visualize-data-with-a-heat-map |
--description--
Aufgabe: Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://heat-map.freecodecamp.rocks 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 diese CodePen-Vorlage 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--
// solution required