mrosadio/map-africa1-summits

An interactive data visualization exploring the evolution of "Africa+1" diplomatic summits # The Shifting Geography of Africa+1 Summits An interactive data visualization exploring the evolution of "Africa+1" diplomatic summits — bilateral and multilateral forums between African states and non-African partner countries from 1973 to 2024. **View live demo** ## About Africa+1 summits (also called Forums and International Conferences) bring together African presidents, ministers, or high-level officials with their foreign counterparts to discuss trade, security, and development cooperation. This visualization traces how the roster of hosting partner countries has shifted over five decades — from France's early post-independence dominance, through the rise of Asian partners in the 2000s, to today's more diversified landscape including Turkey, the Gulf states, the US, and Russia. ## Features - **Scroll-driven timeline scrubber**: scroll over the map or timeline to move through years; the map fills in cumulatively as more countries begin hosting summits, with the current year's host highlighted - **Click-to-jump**: click any dot on the timeline to animate directly to that year - **Country exploration mode**: click any country on the map to see its full hosting history in a side panel, independent of the timeline position - **Responsive layout**: adapted breakpoints for desktop and tablet (portrait and landscape), with the country panel switching between an in-flow column (landscape) and a bottom sheet (portrait) - **Region-based color encoding**: consistent color language across the map and timeline, so the "who hosts whom" story is visible even without interaction ## Tech stack - D3.js (v7) - map projection (EqualEarth), timeline rendering, data joins - Vanilla JavaScript (ES modules) - no framework - Bootstrap 5 - layout utilities and responsive grid - Static GeoJSON (world boundaries) + JSON (summit dataset) ## Project structure ``` ├── index.html ├── style.css ├── main.js ├── db/ │ └── summits-by-year.json # summit dataset └── modules/ ├── …