3.2 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa6367417b2b2512bbf | Visualisiere Daten mit einer Choroplethenkarte (Flächenkartogramm) | 3 | 301465 | visualize-data-with-a-choropleth-map |
--description--
Aufgabe: Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://choropleth-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 Visualisierungs-Bibliothek verwenden. 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 sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.
User Story #1: Meine Choroplethkarte sollte einen Titel mit einer entsprechenden id="title" haben.
User Story #2: Meine Choroplethkarte sollte eine Beschreibung mit einer entsprechenden id="description" haben.
User Story #3: Meine Choroplethkarte sollte Bezirke mit einer class="county" haben, die die Daten repräsentieren.
User Story #4: Es sollten mindestens 4 verschiedene Füllfarben für die Bezirke verwendet werden.
User Story #5: Meine Bezirke sollten jeweils data-fips und data-education-Eigenschaften haben, die ihre entsprechenden fips und education-Werte beinhalten.
User Story #6: Meine Choroplethkarte sollte einen Bezirk für jeden gegebenen Datenpunkt haben.
User Story #7: Die Bezirke sollten data-fips und data-education Werte haben, die mit den Beispieldaten übereinstimmen.
User Story #8: Meine Choroplethkarte sollte eine Legende mit entsprechender id="legend" haben.
User Story #9: Es sollten mindestens 4 verschiedene Füllfarben für die Legende verwendet werden.
User Story #10: Ich kann mit meiner Maus über einen Bereich fahren und einen Tooltip mit einer entsprechenden id="tooltip" sehen, der mir mehr Informationen über den Bereich anzeigt.
User Story #11: Mein Tooltip sollte eine data-education-Eigenschaft haben, die der data-education des aktiven Bereichs entspricht.
Hier sind die Datensätze, die du für dieses Projekt benötigst:
- US-Bildungsdaten:
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json - US Bezirksdaten:
https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.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 einer beliebigen Umgebung auszuführen: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Sobald du fertig bist, übermittle die URL zu deinem Arbeitsprojekt, wenn alle Tests bestanden sind.
--solutions--
// solution required