---
id: 587d7fa6367417b2b2512bbf
title: Visualisiere Daten mit einer Choroplethenkarte (Flächenkartogramm)
challengeType: 3
forumTopicId: 301465
dashedName: visualize-data-with-a-choropleth-map
---

# --description--

**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/EZKqza</a> 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 (nicht-virtuelle) DOM-Elemente werden zum Zeitpunkt jedes 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 <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">diese CodePen-Vorlage</a> 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--

```js
// solution required
```