Java Script

D3.js

Für wirklich anspruchsvolle interaktive Grafiken reichen SVG nicht aus. Diese müssen entweder auf dem Server oder im Browser des Anwenders animiert werden. Im Browser wird dabei JavaScript eingesetzt. Zur Erzeugung von Browser-seitigen Grafiken liefert die D3.js-Bibliothek wahrscheinlich die mächtigsten Möglichkeiten Daten zu visualisieren, wobei die Einstiegshürden ziemlich hoch sind. In diesem Abschnitt werden einige Beispiele mit D3.js gezeigt.

Impfdosen

Als erstes Beispiel dient die Entwicklung der Impfstofflieferungen in Deutschland wie sie unter Impfdashboard veröffentlicht wird. Dargestellt sind die Lieferungen der verschiedenen Hersteller in Abhängigkeit des Lieferdatums. Darunter ist ein Schieberegler abgebildet, mit dem der betrachtete Zeitbereich eingegrenzt werden kann. Für diesen wird die Bibliothek d3-simple-slider benutzt.

Impfdosen als Summe

Hier sind dieselben Daten benutzt worden, um die Summe der gelieferten Dosen zu einem bestimmten Datum zu zeigen. Dabei werden die Dosen der verschiedenen Hersteller aufeinander dargestellt, sodass die gesamte Liefermenge bis zu dem jeweiligen Datum abgelesen werden kann.

Kinder

Muss hier noch was stehen?

Kinder als Summe

Und hier auch?

Weitere

Mathe-Karteikarten

In der ersten Klasse sollten wir unserer Tochter Karteikarten basteln, mit denen die Kinder Addition im Zahlenraum bis 10 lernen. Da habe ich es mir nicht nehmen lassen, das in HTML und mit ein wenig JavaScript umzusetzen. Die rote Zahl z in der Mitte soll das Ergebnis aus x + y sein. Wobei y die Zahl unten rechts ist und die Kinder die Zahl x berechnen sollen. Die Auflösung erfolgt nach dem Umdrehen der Karteikarte, bzw. nach dem Drücken des Knopfes Lösung. Mit Neu kann eine neue Aufgabe angefordert werden. Die Aufgaben werden mit einem Zufallszahlengenerator erzeugt. Die Aufgabe ist auch als Fullscreen verfügbar und eignet sich am besten für mobile Geräte.