2.6 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fab367417b2b2512bda | Erstelle eine lineare Skala mit D3 | 6 | 301483 | create-a-linear-scale-with-d3 |
--description--
Bei den Balken- und Streu-Diagrammen werden die Daten direkt in das SVG eingezeichnet. Wäre jedoch die Höhe eines Balkens oder eines Datenpunkts größer als die SVG-Höhen- oder Breitenwerte, würde er außerhalb des SVG-Bereichs liegen.
In D3 gibt es Skalen, die bei der Darstellung von Daten helfen. scales sind Funktionen, die dem Programm mitteilen, wie eine Menge von unbearbeiteten Datenpunkten den SVG-Pixeln zugeordnet werden soll.
Nehmen wir beispielsweise an, du hast ein SVG der Größe 100x500 und möchtest das Bruttoinlandsprodukt (BIP) für eine Reihe von Ländern darstellen. Die Zahlen wären im Milliarden- oder Billionen-Dollar-Bereich. Du übergibst D3 einen Skalierungstyp, mit welchem du ihm mitteilst, wie die hohen BIP-Werte in dem 100x500 großen Bereich zu platzieren sind.
Es ist unwahrscheinlich, dass du die Rohdaten so darstellen würdest, wie sie sind. Bevor du mit der Einzeichnung beginnst, legst du die Skala für deinen Datensatz fest, so dass die x- und y-Werte zu deiner SVG-Breite sowie -Höhe passen.
D3 verfügt über verschiedene Skalierungstypen. Möchtest du eine lineare Skalierung (wie sie für quantitative Daten meist verwendet wird), verwendest du die D3-Methode scaleLinear():
const scale = d3.scaleLinear()
Standardmäßig verwendet eine Skala die Identitätsbeziehung. Ein- und Ausgabewerte sind gleich. Wie man das ändern kann, ist Gegenstand einer separaten Aufgabenstellung.
--instructions--
Ändere die scale-Variable so, dass eine lineare Skala entsteht. Setze dann die output-Variable auf die Skala, die mit einem Eingabeargument von 50 aufgerufen wird.
--hints--
Der Text im h2 sollte 50 sein.
assert($('h2').text() == '50');
Dein Code sollte die scaleLinear()-Methode verwenden.
assert(code.match(/\.scaleLinear/g));
Die output-Variable sollte scale mit dem Argument 50 aufrufen.
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
--seed--
--seed-contents--
<body>
<script>
// Add your code below this line
const scale = undefined; // Create the scale here
const output = scale(); // Call scale with an argument here
// Add your code above this line
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
--solutions--
<body>
<script>
const scale = d3.scaleLinear();
const output = scale(50);
d3.select("body")
.append("h2")
.text(output);
</script>
</body>