drone strikes

Author: Daniele-Giuli

docs/data/drone_by_month.json

@@ -0,0 +1,40 @@
+{
+  "2022-02": 21,
+  "2022-03": 45,
+  "2022-04": 96,
+  "2022-05": 118,
+  "2022-06": 193,
+  "2022-07": 271,
+  "2022-08": 143,
+  "2022-09": 187,
+  "2022-10": 101,
+  "2022-11": 71,
+  "2022-12": 35,
+  "2023-01": 48,
+  "2023-02": 71,
+  "2023-03": 118,
+  "2023-04": 195,
+  "2023-05": 248,
+  "2023-06": 174,
+  "2023-07": 178,
+  "2023-08": 132,
+  "2023-09": 337,
+  "2023-10": 218,
+  "2023-11": 198,
+  "2023-12": 150,
+  "2024-01": 166,
+  "2024-02": 172,
+  "2024-03": 140,
+  "2024-04": 133,
+  "2024-05": 121,
+  "2024-06": 162,
+  "2024-07": 263,
+  "2024-08": 347,
+  "2024-09": 555,
+  "2024-10": 775,
+  "2024-11": 766,
+  "2024-12": 439,
+  "2025-01": 540,
+  "2025-02": 646,
+  "2025-03": 241
+}

docs/js/statistics.js

@@ -13,15 +13,17 @@ document.addEventListener('DOMContentLoaded', async () => {
         acled: 'data/acled_by_oblast.json',
         aid: 'data/aid_by_country.json',
         timeline: 'data/timeline_events.json',
-        gdp: 'data/gdp_by_country.json'
+        gdp: 'data/gdp_by_country.json',
+        drone: 'data/drone_by_month.json',
     };
 
     try {
-        const [acledRaw, aidRaw, timelineRaw, gdpRaw] = await Promise.all([
+        const [acledRaw, aidRaw, timelineRaw, gdpRaw, droneRaw] = await Promise.all([
             d3.json(DATA_PATHS.acled),
             d3.json(DATA_PATHS.aid),
             d3.json(DATA_PATHS.timeline),
-            d3.json(DATA_PATHS.gdp)
+            d3.json(DATA_PATHS.gdp),
+            d3.json(DATA_PATHS.drone),
         ]);
 
         // 1. Data Structure Normalization 
@@ -43,6 +45,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         renderAidDonut(countriesArray);
         renderRankingTable(countriesArray, gdpRaw);
         renderDeathTimeSeries(acledRaw);
+        renderDroneTimeSeries(droneRaw);
 
 
     } catch (err) {
@@ -896,6 +899,84 @@ function renderDeathTimeSeries(acledRaw) {
         .attr("fill", "var(--red)");
 }
 
+function renderDroneTimeSeries(droneRaw) {
+    const container = d3.select("#ts-drone-strikes");
+    container.selectAll("*").remove();
+
+    const parseTime = d3.timeParse("%Y-%m");
+    const chartData = Object.entries(droneRaw)
+        .map(([month, count]) => ({ date: parseTime(month), value: +count }))
+        .filter(d => d.date !== null)
+        .sort((a, b) => a.date - b.date);
+
+    if (chartData.length === 0) return;
+
+    const margin = { top: 20, right: 30, bottom: 50, left: 55 };
+    const width = container.node().getBoundingClientRect().width - margin.left - margin.right;
+    const height = 260 - margin.top - margin.bottom;
+
+    const svg = container.append("svg")
+        .attr("width", "100%")
+        .attr("height", height + margin.top + margin.bottom)
+        .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
+        .append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3.scaleTime().domain(d3.extent(chartData, d => d.date)).range([0, width]);
+    const y = d3.scaleLinear().domain([0, d3.max(chartData, d => d.value) * 1.1]).range([height, 0]);
+
+    svg.append("g")
+        .attr("class", "axis grid")
+        .attr("transform", `translate(0,${height})`)
+        .call(d3.axisBottom(x).ticks(6).tickFormat(d3.timeFormat("%Y/%m")).tickSize(-height));
+
+    svg.append("g")
+        .attr("class", "axis grid")
+        .call(d3.axisLeft(y).ticks(5).tickSize(-width));
+
+    // Area fill
+    svg.append("path")
+        .datum(chartData)
+        .attr("fill", "rgba(52, 152, 219, 0.15)")
+        .attr("d", d3.area().x(d => x(d.date)).y0(height).y1(d => y(d.value)).curve(d3.curveMonotoneX));
+
+    svg.append("path")
+        .datum(chartData)
+        .attr("fill", "none")
+        .attr("stroke", "#3498db")
+        .attr("stroke-width", 2.5)
+        .attr("d", d3.line().x(d => x(d.date)).y(d => y(d.value)).curve(d3.curveMonotoneX));
+
+    let tooltip = d3.select(".chart-tooltip");
+    if (tooltip.empty()) {
+        tooltip = d3.select("body").append("div").attr("class", "chart-tooltip").style("opacity", 0);
+    }
+
+    const mouseLine = svg.append("line")
+        .attr("y1", 0).attr("y2", height)
+        .attr("stroke", "#aaa").attr("stroke-width", 1).attr("stroke-dasharray", "4")
+        .style("opacity", 0);
+
+    svg.append("rect")
+        .attr("width", width).attr("height", height)
+        .attr("fill", "none").attr("pointer-events", "all")
+        .on("mouseout", () => { tooltip.style("opacity", 0); mouseLine.style("opacity", 0); })
+        .on("mousemove", function (event) {
+            const bisect = d3.bisector(d => d.date).left;
+            const date = x.invert(d3.pointer(event)[0]);
+            const i = bisect(chartData, date, 1);
+            const d0 = chartData[i - 1], d1 = chartData[i];
+            const d = d1 && (date - d0.date > d1.date - date) ? d1 : d0;
+            if (!d) return;
+            mouseLine.attr("x1", x(d.date)).attr("x2", x(d.date)).style("opacity", 1);
+            tooltip.style("opacity", 1)
+                .html(`<span class="tooltip-date">${d3.timeFormat("%Y/%m")(d.date)}</span>
+                       <div><span style="color:#3498db">●</span> Strikes: <strong>${d.value.toLocaleString()}</strong></div>`)
+                .style("left", (event.pageX + 15) + "px")
+                .style("top", (event.pageY - 28) + "px");
+        });
+}
+
 
 function renderCombinedAidDashboard(countriesArray) {
     const totalGlobalEur = d3.sum(countriesArray, d => d.total_eur || 0);

docs/statistics.html

@@ -97,6 +97,15 @@ <h3>AID ALLOCATION ANALYSIS</h3>
         </div>
 
 
+        <!-- Drone Strikes Time Series -->
+        <div class="chart-card" style="margin-top: 24px;">
+            <h3>AIR / DRONE STRIKES OVER TIME</h3>
+            <div class="chart-guide-container">
+                <p class="chart-guide"><span class="info-icon">ⓘ</span> Monthly count of Air/drone strike events (ACLED sub_event_type)</p>
+            </div>
+            <div id="ts-drone-strikes" style="height: 260px;"></div>
+        </div>
+
         <!-- Rest of the data -->
         <div class="bottom-charts-row" style="margin-top: 24px;">
             <div class="chart-card">

preprocess.py

@@ -21,7 +21,7 @@
 
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 DATA_DIR = os.path.join(BASE_DIR, "data")
-OUT_DIR  = os.path.join(BASE_DIR, "website", "data")
+OUT_DIR  = os.path.join(BASE_DIR, "docs", "data")
 os.makedirs(OUT_DIR, exist_ok=True)
 
 # ---------------------------------------------------------------------------
@@ -133,7 +133,36 @@ def process_acled():
 
 
 # ---------------------------------------------------------------------------
-# 3. Ukraine Support Tracker -> aid_by_country.json
+# 3. ACLED -> drone_by_month.json
+# ---------------------------------------------------------------------------
+
+def process_drone_strikes():
+    print("  Processing drone strikes ...")
+    monthly = defaultdict(int)
+
+    with open(ACLED_FILE, encoding="utf-8-sig", newline="") as f:
+        reader = csv.DictReader(f)
+        for row in reader:
+            if row["sub_event_type"].strip() != "Air/drone strike":
+                continue
+            if row["country"].strip() not in ("Ukraine", "Russia"):
+                continue
+            date_str = row["event_date"].strip()
+            try:
+                month = datetime.strptime(date_str, "%Y-%m-%d").strftime("%Y-%m")
+            except ValueError:
+                month = date_str[:7]
+            monthly[month] += 1
+
+    out = dict(sorted(monthly.items()))
+    out_path = os.path.join(OUT_DIR, "drone_by_month.json")
+    with open(out_path, "w", encoding="utf-8") as f:
+        json.dump(out, f, ensure_ascii=False, indent=2)
+    print(f"  [ok] drone_by_month.json ({sum(out.values())} events across {len(out)} months)")
+
+
+# ---------------------------------------------------------------------------
+# 4. Ukraine Support Tracker -> aid_by_country.json
 # ---------------------------------------------------------------------------
 
 ASSISTANCE_FILE = os.path.join(DATA_DIR, "assistance_main_data.xlsx")
@@ -287,11 +316,14 @@ def write_timeline():
     print("\n=== Step 2: Process ACLED data ===")
     process_acled()
 
-    print("\n=== Step 3: Process aid data ===")
+    print("\n=== Step 3: Process drone strikes ===")
+    process_drone_strikes()
+
+    print("\n=== Step 4: Process aid data ===")
     process_assistance()
 
-    print("\n=== Step 4: Write timeline events ===")
+    print("\n=== Step 5: Write timeline events ===")
     write_timeline()
 
-    print("\nDone! Files in website/data/")
-    print("Start the site:  cd website && python -m http.server 8000")
+    print("\nDone! Files in docs/data/")
+    print("Start the site:  cd docs && python -m http.server 8000")