Waldbrand-Grafik einbetten

Diese Seite zeigt die Visualisierung in den beiden Seitenverhältnissen, die in der Praxis vorkommen: quer im Artikeltext und hoch für schmale Spalten oder mobile Ansichten. Darunter steht jeweils der Code zum Kopieren.

Gezeigt wird eine Auswahl: mehrere Brände, für die Copernicus eine Kartierung mit mindestens zwei Zeitschnitten veröffentlicht hat. Es brennt in Europa an mehr Orten. Wer die Auswahl im eigenen Artikel weiter einschränken will, findet die Konfiguration in der vollständigen Anwendung.

Der Zeitstrahl unter der Flächenangabe ist zeitproportional: Das Dreieck links markiert den gemeldeten Brandausbruch, der schraffierte Abschnitt die Zeit bis zur ersten Satellitenaufnahme, und jeder senkrechte Strich eine Aufnahme. Damit ist auf einen Blick erkennbar, wann der Brand begann, wie lange er kartiert wurde und wie dicht. Auch die Abspielgeschwindigkeit folgt den echten Zeitabständen — ein Sprung über zwei Tage dauert länger als einer über einen.

Querformat 960 × 540 · für die Textbreite eines Artikels

Der Regelfall. Bei dieser Breite stehen Auswahlliste, Größenvergleich und Zeitanzeige nebeneinander, ohne sich zu überlagern. Reicht die Höhe für die Liste nicht aus, lässt sie sich scrollen.

<iframe src="https://apps.datenfreunde.com/#gironde/bordeaux"
        width="960" height="540" style="border:0" loading="lazy"
        title="Waldbrände in Frankreich und Spanien"></iframe>

Flach und quer 600 × 450 · die klassische Infobox

Unter 500 Pixel Höhe treten zwei Auswahlfelder an die Stelle der beiden Listen, und die Nebenangaben rücken hinter einen Aufklapper. Das ist Absicht: bei dieser Höhe zeigten die Listen nur noch je einen Eintrag, und die Karte — der eigentliche Inhalt — bekam kaum Fläche. Die Auswahl bleibt vollständig, sie steht nur zusammengefaltet da.

<iframe src="https://apps.datenfreunde.com/#gironde/bordeaux"
        width="600" height="450" style="border:0" loading="lazy"
        title="Waldbrände in Frankreich und Spanien"></iframe>

Hochformat 400 × 720 · für schmale Spalten und mobile Ansichten

Unter 720 Pixel Breite rücken die Auswahlblöcke schmaler zusammen, und Zustandsanzeige und Abspielknopf teilen sich die untere Kante. Der Größenvergleich bleibt bedienbar, die Karte bekommt aber deutlich weniger Fläche — für einen einzelnen Brand mit gesetztem Anker ist das Format brauchbar, für die Umschaltung zwischen allen Bränden eher eng.

<iframe src="https://apps.datenfreunde.com/#central-spain/madrid"
        width="400" height="720" style="border:0" loading="lazy"
        title="Waldbrände in Frankreich und Spanien"></iframe>

Anker setzen einen bestimmten Brand direkt öffnen

Ohne Anker startet die Grafik mit dem ersten Brand der Liste, und zwar mit der Stadt, die ihm am nächsten liegt — der Größenvergleich ist die Aussage dieser Grafik und steht deshalb von Anfang an im Bild. Mit Anker lässt sich gezielt öffnen, was zum Artikel passt: ein anderer Brand, eine andere Stadt, oder mit /none gar keine.

Liste wird aus den Daten erzeugt.

Das linke Beispiel nutzt #central-spain/madrid — deshalb liegt der Umriss von Madrid schon beim Laden über der Brandfläche.

Auswahl eingrenzen nur die Brände zeigen, um die es im Artikel geht

Die Grafik zeigt standardmäßig alle kartierten Brände. Für einen Artikel, der nur von Frankreich handelt, ist das zu viel. Zwei Wege stehen zur Verfügung, und der Unterschied ist nicht die Bequemlichkeit, sondern die Haltbarkeit.

?nur=gironde,artana nennt die Brände einzeln und hält die Einbettung damit auf dem Stand des Tages: Was der Leser sieht, ändert sich später nicht mehr. Das ist der richtige Weg für einen datierten Artikel.

?gruppe=frankreich verweist auf eine gepflegte Zusammenstellung. Kommt ein weiterer französischer Brand hinzu, erscheint er auch in dieser Einbettung — ohne dass am Einbettungscode etwas geändert werden muss. Das passt für eine Dauerstrecke oder eine Themenseite, nicht für einen Artikel, der einen bestimmten Stand beschreibt.

<iframe src="https://apps.datenfreunde.com/?gruppe=frankreich"
        width="960" height="540" style="border:0" loading="lazy"
        title="Waldbrände in Frankreich"></iframe>

Verfügbare Gruppen: werden aus der Konfiguration erzeugt. Ein unbekannter Gruppenname wird übergangen — die Grafik zeigt dann alle Brände statt einer leeren Karte. Beides lässt sich mit dem Anker kombinieren: ?gruppe=frankreich#biscarrosse. Wer lieber klickt als tippt, nimmt Einbettung einrichten.

Mitwachsend Breite folgt dem Container, Höhe über das Seitenverhältnis

Wer keine festen Pixelmaße setzen will, bindet die Grafik über ein Seitenverhältnis ein. Sie füllt dann die verfügbare Breite und behält die Proportion — das ist in Content-Management-Systemen meist der bequemere Weg.

<div style="aspect-ratio: 16/9; max-width: 960px; min-height: 480px;">
  <iframe src="https://apps.datenfreunde.com/#artana"
          style="width:100%;height:100%;border:0" loading="lazy"
          title="Waldbrände in Frankreich und Spanien"></iframe>
</div>

Hinweise für die Einbettung. Im Rahmen wird die Kopfzeile automatisch ausgeblendet, damit die Grafik nicht mit der Seitennavigation der einbettenden Seite kollidiert. Die englische Fassung liegt unter /index-en.html. Die Grafik bindet selbst keine Zähldienste ein und setzt keine eigenen Cookies; die Kartenkacheln kommen allerdings von Esri, das damit die IP-Adresse des Abrufs erfährt — ob daraus eine Einwilligungspflicht folgt, entscheidet die einbettende Seite. Getestet ist das Layout ab 420 × 380 Pixel; darunter wird es nicht mehr geprüft. Soll die Einbettung nur einen Teil der Brände zeigen, erzeugt Einbettung einrichten den passenden Code.

Was sich mit der Rahmengröße ändert. Zwei Schwellen, und sie liegen nicht beieinander. Unter 500 Pixel Höhe treten zwei Auswahlfelder an die Stelle der beiden Listen. Unter 440 Pixel Höhe oder 460 Pixel Breite wird zusätzlich die Zahlenanzeige kompakt: Fläche und Datum stehen in einer Zeile, der Zeitstrahl darunter, die Nebenangaben hinter einem Aufklapper. Beides betrifft mehr Einbettungen als man denkt — ein mitwachsender 16:9-Rahmen unterschreitet die 500 Pixel Höhe bereits unter etwa 890 Pixel Breite, also in jeder normalen Artikelspalte. Wer den Rahmen über ein Seitenverhältnis einbindet, sollte deshalb eine min-height von 480 Pixel mitgeben.

Die Vorauswahl beim Öffnen. Zu jedem Brand ist die nächstgelegene der fünf Städte vorausgewählt und wird beim Öffnen eingeblendet — in der Liste am blauen Viereck erkennbar, mit einer Zeile darüber, die es erklärt. Wer ohne Vergleich starten will, hängt /none an den Anker: #gironde/none. Wer eine andere Stadt möchte, nennt sie: #gironde/berlin.