Бюджети участі великих міст України, 2015–2026 — інтерактивний лонгрід

Статична інтерактивна наукова вебстаття (скрол-сторітелінг) про запровадження та динаміку бюджетів участі (партисипативних бюджетів) у 35 великих містах України у 2015–2026 роках, їхню частку в міських видатках (131 зіставне спостереження) та міжнародні орієнтири (Барселона, Париж, Шотландія, Сінгапур, UN-Habitat, Світовий банк). Без бекенду: HTML + CSS + JavaScript (ES-модулі) + D3.js v7.

Швидкий запуск

Потрібен будь-який статичний вебсервер (сторінка завантажує дані через fetch, тому відкриття файлу як file:// не працює).

# з цієї папки (interactive-pb-article/)
python -m http.server 8000

і відкрийте http://localhost:8000. Альтернативи: npx serve ., php -S localhost:8000 — будь-який роздавач статики.

Що всередині

interactive-pb-article/
├── index.html            # стаття: hero, розділи-плейсхолдери, інтерактив, графіки
├── css/style.css         # теми (світла/темна), типографіка, адаптивність
├── js/
│   ├── app.js            # точка входу: завантаження даних, ініціалізація
│   ├── interactive.js    # слайдер року, карта, кругова діаграма, синхронізація
│   ├── scrolly.js        # скрол-сторітелінг: sticky 4 графіки з розкриттям за роками + клік-пін
│   ├── share.js          # стат-плитки частки + профілі міст (клікабельні)
│   ├── intl.js           # міжнародне порівняння: діаграма кейсів (клікабельна) + картки
│   ├── year-texts.js     # тексти лівої колонки за роками (плейсхолдери)
│   ├── format.js         # український формат чисел і грн
│   ├── theme.js          # перемикач теми (авто → світла → темна)
│   ├── tooltip.js        # спільний тултип (безпечна вставка через textContent)
│   └── reveal.js         # скрол-ефекти: поява секцій, прогрес читання
├── data/
│   ├── pb_data.json          # 35 міст × 2015–2026 + річні агрегати (генерується)
│   ├── analytics.json        # частки, профілі, пороги, міжнародні кейси (генерується)
│   └── ukraine_oblasts.geojson  # 27 одиниць ADM1 (генерується)
├── Стаття_Бюджети_участі_2015-2026.pdf  # PDF-версія статті (генерується)
├── tools/
│   ├── export_data.py    # ОСНОВНИЙ експорт: xlsx 2015–2026 → JSON (Python + openpyxl)
│   ├── build_pdf.py      # PDF-версія статті (13 сторінок) з тих самих JSON (reportlab)
│   ├── pdf_map.py        # карти України для PDF-додатка A (проєкція + reportlab)
│   ├── build_data.mjs    # legacy: CSV-набір 2015–2021 → JSON + генерація GeoJSON
│   └── raw/              # сирий GeoJSON geoBoundaries UKR ADM1
├── vendor/d3.v7.min.js   # D3.js v7.9.0 (локально, працює офлайн)
└── docs/ADR-001-architecture.md  # архітектурні рішення

Інтерактив

• Шкала-слайдер 2015→2021 (зверху) — перетягування або клік по року; підпис показує сумарне значення обраного показника за рік. Керується і з клавіатури (стрілки на слайдері).
• Перемикач показника — сума (грн) / заявки / переможці; синхронізує весь блок.
• Картодіаграма (праворуч) — пропорційні бульбашки міст поверх хороплету областей (сума показника по містах вибірки). Окремі стани: «немає підтверджених даних» (порожнє коло), «до першого циклу» (крапка), «ТОТ» (✕), АР Крим і м. Севастополь — штрихування «поза рамкою». Тултипи — і мишею, і фокусом (Tab).
• Кругова діаграма — розподіл коштів року між ТОП-6 містами періоду та рештою (кольори закріплені за містами, не за рангом).
• Графіки динаміки (нижче) — кошти (лінійний), заявки vs переможці (стовпчиковий), охоплення міст (area); перехрестя-тултипи; дані доступні також таблицею («Переглянути дані таблицею»).

Як додати авторський текст

Плейсхолдери позначені пунктирними блоками «Слот для тексту»:

• розділи статті — блоки <div class="slot" data-slot="..."> в index.html;
• описи років у лівій колонці інтерактиву — js/year-texts.js (замініть placeholder для відповідного року).

Перегенерація даних

Основне джерело — Excel-файл «Бюджети_участі_великих_міст_України_2015-2026_ міжнародне_порівняння_2026-07-23.xlsx» у ../Аналітика Бюджетів участі/ (аркуші «Дані_місто-рік», «Спостереження_частки», «Аналітика_частки», «Норми_порівняння», «Аналітичний_поріг»):

python tools/export_data.py

Скрипт перевіряє інваріанти (35 міст, 131 спостереження) і пише data/pb_data.json + data/analytics.json. GeoJSON областей згенеровано tools/build_data.mjs (округлення до ~100 м, перемотка кілець під конвенцію d3-geo) з geoBoundaries UKR ADM1 (simplified), CC BY 4.0 — перегенерація потрібна лише при заміні геометрії.

PDF-версія статті

Стаття доступна і як PDF (Стаття_Бюджети_участі_2015-2026.pdf, 13 сторінок) — той самий аналітичний текст, синхронізований з інтерактивом: графіки, таблиці, хроніка за роками, Додаток A з картами України (річні зрізи 2016/2018/2021/2026 та сумарна карта), Додаток B — повна таблиця 35 міст і список джерел. Перегенерація з актуальних JSON:

python tools/build_pdf.py

Потрібен reportlab; шрифт — Times New Roman (Windows). Скрипт читає data/pb_data.json, data/analytics.json і data/ukraine_oblasts.geojson, тож спочатку запустіть export_data.py, якщо змінилися вихідні дані. Карти малюються проєкцією Albers у tools/pdf_map.py (без matplotlib).

Методологічні застереження (відображені й у статті)

• Порожня клітинка ≠ нуль: стани «немає підтверджених даних», «до запуску», «призупинено», «не проводився» розрізняються явно.
• Суми мають різні основи (річний ліміт, сума бюджетів переможців, фактичні видатки) і не усереднюються між містами; основа показується в тултипі.
• Рамка — 35 міст: 34 міста понад 100 тис. осіб + Сєвєродонецьк (виняток). Бердянськ, Маріуполь, Мелітополь, Сєвєродонецьк після 24.02.2022 — ТОТ; показники 2022–2026 — документований мінімум за підтвердженими циклами.
• Частка у видатках: знаменник — затверджені річні видатки міста (Open Budget API); зіставні лише пари «сума БУ + бюджет міста» одного року.
• Крим і Севастополь — поза рамкою дослідження.

Доступність і сумісність

Світла/темна теми (системна + ручний перемикач), aria-атрибути та керування з клавіатури, prefers-reduced-motion, табличний дублер графіків, noscript-фолбек. Перевірено в сучасних браузерах (Chromium); зовнішніх запитів немає — сайт повністю автономний.