4.1 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7178d8c242eddfaeb5bd13 | Visualisiere Daten mit einem Scatterplot-Diagramm (Streudiagramm) | 3 | 301467 | visualize-data-with-a-scatterplot-graph |
--description--
Objective: Build an app that is functionally similar to this: https://scatterplot-graph.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.
Sie können HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Für die Tests müssen die Achsen mit Hilfe der D3-Achseneigenschaft erzeugt werden, die automatisch Markierungen entlang der Achse erzeugt. Diese Häkchen sind für das Bestehen der D3-Tests erforderlich, da ihre Position zur Bestimmung der Ausrichtung der grafisch dargestellten Elemente verwendet wird. Informationen zum Generieren von Achsen finden Sie unter https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. Erforderliche (nicht-virtuelle) DOM-Elemente werden zum Zeitpunkt jedes Tests abgefragt. Wenn Sie ein Frontend-Framework verwenden (z. B. Vue), sind die Testergebnisse für dynamische Inhalte möglicherweise ungenau. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.
User Story #1: Ich kann ein Titelelement sehen, das einen entsprechenden id="title" hat.
User Story #2: Ich kann eine x-Achse sehen, die eine entsprechende id="x-axis" hat.
User Story #3: Ich kann eine entsprechende y-Achse sehen, die eine entsprechende id="y-axis" hat.
User Story #4: Ich kann Punkte sehen, die jeweils eine Klasse von dot haben, die die zu zeichnenden Daten darstellen.
User Story #5: Jeder Punkt sollte die Eigenschaften data-xvalue und data-yvalue haben, die die entsprechenden x und y-Werte beinhalten.
User Story #6: Die data-xvalue und data-yvalue eines jeden Punktes sollte im Bereich der tatsächlichen Daten und im richtigen Datenformat liegen. Für data-xvalue, sind ganze Zahlen (ganzes Jahr) oder Date-Objekte für die Testauswertung akzeptabel. Für data-yvalue (Minuten), verwende Date-Objekte.
User Story #7: Die data-xvalue und der zugehörige Punkt sollte mit dem entsprechenden Punkt/Wert auf der x-Achse übereinstimmen.
User Story #8: Die data-yvalue und der entsprechende Punkt sollte mit dem entsprechenden Punkt/Wert auf der y-Achse übereinstimmen.
User Story #9: Auf der y-Achse sehe ich mehrere Markierungen mit dem Zeitformat %M:%S.
User Story #10: Ich sehe mehrere Markierungen auf der x-Achse, die das Jahr anzeigen.
User Story #11: Ich kann sehen, dass der Bereich der x-Achsenbeschriftungen innerhalb des Bereichs der tatsächlichen x-Achsen-Daten liegt.
User Story #12: Ich kann sehen, dass der Bereich der y-Achsenbeschriftungen innerhalb des Bereichs der tatsächlichen y-Achsen-Daten liegt.
User Story #13: Ich kann eine Legende mit beschreibendem Text sehen, die id="legend" beinhaltet.
User Story #14: Wenn ich mit der Maus über einen Bereich fahre, wird ein Tooltip mit einem entsprechenden id="tooltip" angezeigt, der weitere Informationen über den Bereich enthält.
User Story #15: Mein Tooltip sollte eine data-year-Eigenschaft haben, die der data-xvalue des aktiven Bereichs entspricht.
Hier ist der Datensatz, den du benötigst, um dieses Projekt abzuschließen: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.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