3.8 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7168d8c242eddfaeb5bd13 | Datenvisualisierung mit einem Balkendiagramm | 3 | 301464 | visualize-data-with-a-bar-chart |
--description--
Aufgabe: Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://bar-chart.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 Visualisierungs-Bibliothek verwenden. Zur Erfüllung der Testfälle müssen die Achsen mit der D3-Achseneigenschaft erzeugt werden, welche automatisch Achsenmarkierungen entlang der Achse erstellt. Diese Achsenmarkierungen sind notwendig, um die D3-Tests zu erfüllen, da diese zur Bestimmung der Ausrichtung von grafischen Elementen verwendet werden. Weiter Informationen über die Achsenerstellung findest du hier: https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Falls du ein Frontend-Framework (wie z.B. Vue) verwendest, kann es passieren, dass die Testergebnisse für dynamische Inhalte ungenau sind. 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: Mein Diagramm sollte einen Titel mit einer passenden id="title" haben.
User Story #2: Mein Diagramm sollte eine g-Element X-Achse mit einer passenden id="x-axis" haben.
User Story #2: Mein Diagramm sollte eine g-Element Y-Achse mit einer passenden id="y-axis" haben.
User Story #4: Beide Achsen sollten mehrere Markierungen enthalten, jede mit einer entsprechenden class="tick".
User Story #5: Mein Diagramm sollte ein rect Element für jeden Datenpunkt mit einer entsprechenden class="bar" haben, welche die Daten anzeigt.
User Story #6: Jede .bar sollte die data-date- und data-gdp-Eigenschaften haben, welche die date- und GDP-Werte beinhalten.
User Story #7: Die data-date-Eigenschaften des .bar-Elements sollten mit der Reihenfolge der angegebenen Daten übereinstimmen.
User Story #8: Die data-gdp-Eigenschaften des .bar-Elements sollten mit der Reihenfolge der angegebenen Daten übereinstimmen.
User Story #9: Die Höhe jedes .bar-Elements sollte das entsprechende GDP der Daten exakt darstellen.
User Story #10: Das data-date-Attribut und sein zugehöriges .bar-Element sollten sich mit dem entsprechenden Wert auf der x-Achse ausrichten.
User Story #11: Das data-gdp-Attribut und sein zugehöriges .bar-Element sollten sich mit dem entsprechenden Wert auf der y-Achse ausrichten.
User Story #12: Ich kann mit meiner Maus über einen Bereich fahren und einen Tooltip mit einem entsprechenden id="tooltip" sehen, das mir mehr Informationen über den Bereich anzeigt.
User Story #13: Mein Tooltip sollte eine data-date Eigenschaft haben, die dem data-date des aktiven Bereichs entspricht.
Hier ist der Datensatz, den du benötigst, um dieses Projekt abzuschließen: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Du kannst dein Projekt erstellen, 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