Wildfire graphic embedded

This page shows the visualisation in the two aspect ratios that actually come up: landscape within the body of an article, and portrait for narrow columns or mobile views. The code to copy sits below each one.

What you see is a selection: several fires for which Copernicus has published a mapping with at least two acquisitions. More of Europe is burning than that. To narrow the selection further for your own article, use the configuration in the full application.

The timeline below the area figure is proportional to real time: the triangle on the left marks the reported outbreak, the hatched section the interval until the first satellite acquisition, and every vertical mark one acquisition. That makes it legible at a glance when the fire started, how long it was mapped and how densely. Playback speed follows the real intervals too — a jump across two days takes longer than one across a single day.

Landscape 960 × 540 · for the body width of an article

The regular case. At this width the fire list, the size comparison and the time readout sit side by side without overlapping. Where the height is not enough for the list, it scrolls.

<iframe src="https://apps.datenfreunde.com/index-en.html#gironde/bordeaux"
        width="960" height="540" style="border:0" loading="lazy"
        title="Wildfires in France and Spain"></iframe>

Flat and wide 600 × 450 · the classic info box

Below 500 pixels of height two select fields take the place of the two lists, and the secondary figures move behind a disclosure. That is deliberate: at this height the lists showed one entry each, and the map — the actual content — was left with almost no room. The selection stays complete, it is only folded up.

<iframe src="https://apps.datenfreunde.com/index-en.html#gironde/bordeaux"
        width="600" height="450" style="border:0" loading="lazy"
        title="Wildfires in France and Spain"></iframe>

Portrait 400 × 720 · for narrow columns and mobile views

Below 720 pixels of width the selection blocks narrow and the state readout shares the bottom edge with the play button. The size comparison stays usable, but the map gets noticeably less room — the format works for a single fire opened via anchor, and is tight for switching between all fires.

<iframe src="https://apps.datenfreunde.com/index-en.html#central-spain/madrid"
        width="400" height="720" style="border:0" loading="lazy"
        title="Wildfires in France and Spain"></iframe>

Setting an anchor open a specific fire directly

Without an anchor the graphic opens with the first fire in the list, together with the city closest to it — the size comparison is what this graphic is for, so it is in the picture from the start. An anchor opens exactly what fits the article: another fire, another city, or with /none no comparison at all.

List is generated from the data.

The example on the left uses #central-spain/madrid, which is why the outline of Madrid already sits over the burnt area on load.

Narrowing the selection show only the fires your article is about

By default the graphic shows every mapped fire. For an article that is only about France, that is too many. Two routes are available, and what separates them is not convenience but durability.

?nur=gironde,artana names the fires individually and thereby fixes the embed to the state of the day: what the reader sees will not change later. That is the right route for a dated article.

?gruppe=frankreich points at a curated set. If another French fire is added, it appears in this embed too, with no change to the embed code. That suits a running topic page rather than an article describing one particular state of affairs.

<iframe src="https://apps.datenfreunde.com/index-en.html?gruppe=frankreich"
        width="960" height="540" style="border:0" loading="lazy"
        title="Wildfires in France"></iframe>

Available groups: generated from the configuration. An unknown group name is passed over — the graphic then shows all fires rather than an empty map. Either route combines with the anchor: ?gruppe=frankreich#biscarrosse. If you would rather click than type, use configure the embed.

Fluid width follows the container, height via aspect ratio

If you would rather not set fixed pixel dimensions, embed the graphic via an aspect ratio. It then fills the available width and keeps its proportion, which is usually the more convenient route inside a content management system.

<div style="aspect-ratio: 16/9; max-width: 960px; min-height: 480px;">
  <iframe src="https://apps.datenfreunde.com/index-en.html#artana"
          style="width:100%;height:100%;border:0" loading="lazy"
          title="Wildfires in France and Spain"></iframe>
</div>

Notes on embedding. Inside a frame the header is hidden automatically so the graphic does not collide with the navigation of the embedding page. The German version is at /index-de.html. The graphic embeds no analytics and sets no cookies of its own; the map tiles do come from Esri, which therefore learns the IP address of the request — whether that requires consent is for the embedding page to decide. The layout is tested down to 420 × 380 pixels; below that it is not checked. To show only some of the fires, configure the embed — the page is in German, the generated code is not.

What changes with the frame size. Two thresholds, and they are not close together. Below 500 pixels of height two select fields take the place of the two lists. Below 440 pixels of height or 460 pixels of width the figure panel also becomes compact: area and date share one line, the timeline sits below them, and the secondary figures move behind a disclosure. Both affect more embeds than one would think — a fluid 16:9 frame drops below 500 pixels of height at roughly 890 pixels of width, so in any ordinary article column. If you embed via an aspect ratio, give the frame a min-height of 480 pixels.

The preselected comparison. For every fire the closest of the five cities is preselected and shown on opening — marked in the list by a blue square, with a line above it that explains what the square means. To start without a comparison, append /none to the anchor: #gironde/none. For a different city, name it: #gironde/berlin.