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--
Objective: Build an app that is functionally similar to this: https://heat-map.freecodecamp.rocks.
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 (nicht-virtuelle) DOM-Elemente werden zum Zeitpunkt 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