SVG und JavaScript - Datentabelle und Karten

[Matthias Scharwies]

Guten Abend,

Ein Zwischenergebnis:

• Deutschland_-_Karte_und_Statistik
  • Beispiel:SVG-Landkarten.html

Die Webseite hat eine Datentabelle. Ein Script zieht die Zahlen raus und sortiert sie. Entsprechend wird die externe Grafik mit Klassen eingefärbt.

Zur Karte: Ich hatte sie ja von Wikimedia Commons übernommen und 2016 mit dem SVG-Optimizer verschlimmbessert. Ich habe grad das Original von Wikimedia Commons genommen und hier hochgeladen:

Datei:Deutschland-Karte.svg

Die ist auch nicht ganz perfekt. Wenn man sie groß zoomt, sieht man, dass manche Grenzen nicht aufeinanderliegen. Für den :hover-Effekt mit breiteren strokes müsste man das jeweilige Land nach vorne holen (z-index war mal für SVG2 geplant, wurde aufgegeben) - bei Bayern seht ihr, dass BW drüberliegt.

---

Ursprünglich sah's ja mal so aus, aber alles mit Magic Numbers per Hand kodiert:

Ich würde jetzt das (intern vorhandene) Ranking nutzen, um pro Datensatz einen Balken mit Prozentwert und den Namen des Bundeslands auszuspucken.

Dazu einige Fragen:

• 3 Buttons [2016] [2020] [2024] oder einen input type range?
• Balkendiagramm in (neues) Inline-SVG oder in die Karte (die müsste dann eine andere ViewBox erhalten
  • evtl. andere order: Balkendiagramm: 1; Karte: 2, und die Tabelle auf 3 nach unten
• Hover kann man ja nicht per JS nutzen, um von der Karte aus den Balken des betreffenden Bundeslandes zu highlighten, oder? Aber mit :focus - sollte man das tun?

Herzliche Grüße

Matthias Scharwies