Conflicts in the world 2000-2025

Every dot is an armed conflict event recorded by the Uppsala Conflict Data Program (UCDP): red when at least one civilian was killed, yellow when only armed actors died, and larger when the number of deaths is higher. The animation runs month by month from January 2000 and loops at the end. Past events slowly fade out, so the bright areas are the places where violence is ongoing.

// Load the gzipped UCDP extract (3 MB) and decompress it in the browser, so the
// data are not inlined in the page (which would make it ~20 MB).
dataset = {
  const url = await FileAttachment("../../data/ucdp/ged_events_2000_2025.csv.gz").url();
  const response = await fetch(url);
  const stream = response.body.pipeThrough(new DecompressionStream("gzip"));
  const text = await new Response(stream).text();
  const parseDate = d3.timeParse("%Y-%m-%d");
  return d3.csvParse(text, d => {
    const date = parseDate(d.date_start.slice(0, 10));
    const latitude = +d.latitude, longitude = +d.longitude;
    if (!date || isNaN(latitude) || isNaN(longitude)) return null;
    return {
      latitude, longitude, date,
      intensity: (+d.deaths_a) + (+d.deaths_b) + (+d.deaths_civilians),
      deaths_civilians: +d.deaths_civilians
    };
  }).sort((a, b) => a.date - b.date);
}

world = FileAttachment("../../data/geojson/countries-110m.json").json()
countries = topojson.feature(world, world.objects.countries)

fade_opacity = 0.03
play_speed = 0.5

// --- Canvas + SVG dual-layer setup ---
viewof ctx = {
  const height = width / 1.8;
  // Overlay sizes follow the width so that the map stays readable on phones
  const narrow = width < 600;
  const dateSize = Math.round(Math.max(16, Math.min(48, width / 20)));
  const legendSize = narrow ? 10 : 13;
  const legendWidth = narrow ? 140 : 220;
  // Dark halo behind every label, so that they stay readable over the land
  const halo = sel => sel.attr("stroke", "#111").attr("stroke-width", narrow ? 3 : 4)
                         .attr("stroke-linejoin", "round").attr("paint-order", "stroke");
  const container = html`<div style="position:relative; width:${width}px; height:${height}px; background-color:#111; border-radius: 8px; overflow:hidden;"></div>`;

  // SVG layer (static: map, labels, legend)
  const svg = d3.select(container).append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("position", "absolute")
    .style("top", "0px")
    .style("left", "0px");

  // World map (drawn first, so that the labels below stay above the land)
  const proj = d3.geoNaturalEarth1().fitSize([width, height], countries);
  const pathGenerator = d3.geoPath(proj);
  svg.append("path")
    .datum(countries)
    .attr("d", pathGenerator)
    .attr("fill", "#262626")
    .attr("stroke", "#444444")
    .attr("stroke-width", 0.5);

  const dateLabel = svg.append("text")
    .attr("x", 20)
    .attr("y", 20 + dateSize * 0.85)
    .attr("fill", "#ffffff")
    .style("font-family", "monospace")
    .style("font-size", `${dateSize}px`)
    .style("font-weight", "bold")
    .style("opacity", narrow ? 0.85 : 0.5)
    .text("2000")
    .call(halo);

  // Legend (top right)
  const legend = svg.append("g").attr("transform", `translate(${width - legendWidth}, 20)`);
  legend.append("circle").attr("cx", 8).attr("cy", 8).attr("r", 6).attr("fill", "#ff4040").attr("opacity", 0.85);
  legend.append("text").attr("x", 22).attr("y", 13)
    .attr("fill", "#cccccc").style("font-family", "monospace").style("font-size", `${legendSize}px`)
    .text("Civilian deaths").call(halo);
  legend.append("circle").attr("cx", 8).attr("cy", 34).attr("r", 6).attr("fill", "#d2ff00").attr("opacity", 0.85);
  legend.append("text").attr("x", 22).attr("y", 39)
    .attr("fill", "#cccccc").style("font-family", "monospace").style("font-size", `${legendSize}px`)
    .text("Armed actors deaths").call(halo);

  // Source credit (bottom left)
  svg.append("text")
    .attr("x", 20)
    .attr("y", height - 16)
    .attr("fill", "#888888")
    .style("font-family", "monospace")
    .style("font-size", narrow ? "9px" : "11px")
    .text(narrow ? "Source: UCDP GED v25.1 — Uppsala University"
                 : "Source: UCDP Georeferenced Event Dataset (GED) v25.1 — Uppsala University")
    .call(halo);

  // Canvas layer (dynamic: particles)
  const canvas = d3.select(container).append("canvas")
    .attr("width", width)
    .attr("height", height)
    .style("position", "absolute")
    .style("top", "0px")
    .style("left", "0px")
    .style("pointer-events", "none")
    .style("mix-blend-mode", "screen");

  const context2d = canvas.node().getContext("2d");
  context2d.projection = proj;
  context2d.dateLabel = dateLabel;
  container.value = context2d;

  return container;
}

// --- Animation loop ---
animation = {
  const w = ctx.canvas.width;
  const h = ctx.canvas.height;
  const DAY_MS = 24 * 60 * 60 * 1000;

  const data = dataset.map(d => ({ ...d, time: d.date.getTime() }));
  const timeStart = d3.min(data, d => d.time);
  const timeEnd   = d3.max(data, d => d.time);

  let currentTime = timeStart;

  const t = d3.timer(() => {
    // Ghost trail: semi-transparent black overlay
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = `rgba(0, 0, 0, ${fade_opacity})`;
    ctx.fillRect(0, 0, w, h);

    // Draw events in additive (glow) mode
    ctx.globalCompositeOperation = 'screen';
    const nextTime = currentTime + DAY_MS * play_speed;
    const activeEvents = data.filter(d => d.time >= currentTime && d.time < nextTime);

    for (const event of activeEvents) {
      const coords = ctx.projection([event.longitude, event.latitude]);
      if (coords) {
        const radius = Math.max(1, Math.min(Math.pow(event.intensity + 1, 0.35) * 1.5, 14));
        const color = event.deaths_civilians > 0 ? `rgba(255, 64, 64, 0.85)` : `rgba(210, 255, 0, 0.80)`;
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(coords[0], coords[1], radius, 0, 2 * Math.PI);
        ctx.fill();
      }
    }

    // Update date label
    const d = new Date(currentTime);
    ctx.dateLabel.text(`${d.getFullYear()} - ${String(d.getMonth() + 1).padStart(2, '0')}`);

    // Advance time; reset canvas at loop end
    currentTime = nextTime;
    if (currentTime > timeEnd) {
      currentTime = timeStart;
      ctx.globalCompositeOperation = 'source-over';
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, w, h);
    }
  });

  return () => t.stop();
}

Data & method

Data. Uppsala Conflict Data Program, Georeferenced Event Dataset (UCDP GED) version 25.1 (Davies, Pettersson & Öberg 2025; Sundberg & Melander 2013), freely available for research with citation at https://ucdp.uu.se/downloads/. The site ships a slimmed extract of the events from 2000 onwards with their coordinates, date and death counts (see data/ucdp/README.md).
Processing. The extract is downloaded as a compressed CSV (3 MB) and decompressed in the browser. Events are played back day by day; each dot’s radius grows with the number of deaths, roughly as the cube root, and its colour depends on whether civilians were among the victims. Past events fade through a translucent overlay applied at every frame.
Tools. Observable JavaScript and D3 (geographic projection, canvas rendering); country boundaries from Natural Earth via the world-atlas package (1:110m).