macrointel/index.html at main · MonarchCastleTech/macrointel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="./docs/favicon.ico" sizes="any">
    <link rel="apple-touch-icon" href="./docs/apple-touch-icon.png">
    <link rel="manifest" href="./docs/site.webmanifest">
    <meta property="og:image" content="./docs/og-image.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country Macro Intelligence — Global GDP &amp; Trade Flows | Monarch Castle Technologies</title>
<meta name="description" content="Interactive map of global GDP and bilateral trade flows across 102 economies, with sector drilldowns and top-producer rankings. Built on World Bank and UN Comtrade data.">
<meta name="author" content="Monarch Castle Technologies">
<meta name="theme-color" content="#0a0a0a">
<meta name="color-scheme" content="dark">
<link rel="canonical" href="https://monarchcastletech.github.io/macrointel/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Monarch Castle Technologies">
<meta property="og:title" content="Country Macro Intelligence — Global GDP &amp; Trade Flows">
<meta property="og:description" content="Explore GDP and bilateral trade flows across 102 economies, with sector drilldowns and top-producer rankings. World Bank + UN Comtrade data.">
<meta property="og:url" content="https://monarchcastletech.github.io/macrointel/">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Country Macro Intelligence — Global GDP &amp; Trade Flows">
<meta name="twitter:description" content="Explore GDP and bilateral trade flows across 102 economies. World Bank + UN Comtrade data.">
<meta name="twitter:image" content="https://monarchcastletech.github.io/macrointel/assets/og-cover.png">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Spectral:wght@600;700&display=swap">

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script defer src="./data/country-macro-map.js"></script>
<script defer src="./app.js?v=20260830"></script>
<link rel="stylesheet" href="styles.css">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Country Macro Intelligence",
  "url": "https://monarchcastletech.github.io/macrointel/",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Any",
  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
  "publisher": { "@type": "Organization", "name": "Monarch Castle Technologies" },
  "description": "Interactive visualization of global GDP and bilateral trade flows across 102 economies, with sector drilldowns and top-producer rankings, built on World Bank and UN Comtrade data."
}
</script>
</head>
<body>
  <a class="skipLink" href="#macroVizRegion">Skip to global trade map</a>
  <div id="macroLoading">
    <div class="spinner"></div>
    <div class="text">Loading country macro data...</div>
  </div>

  <header id="macroTop">
    <div id="macroTitle">
      <span class="logoWrap">
        <img src="./assets/macrointel-logo-dark.png" alt="MacroIntel" class="logoImage" width="150" height="48">
      </span>
      <h1 class="visuallyHidden">MacroIntel</h1>
      <span class="tagline">Country Macro Intelligence</span>
      <span class="endorsement">Part of Monarch Castle Technologies</span>
    </div>
    <div class="stats" id="macroStats">
      <div class="stat">
        <span>Countries</span>
        <b id="statCountries">0</b>
      </div>
      <div class="stat">
        <span>Trade Links</span>
        <b id="statLinks">0</b>
      </div>
      <div class="stat">
        <span>Total GDP</span>
        <b id="statGdp">$0T</b>
      </div>
    </div>
  </header>

  <nav id="macroBar" aria-label="Visualization controls">
    <button id="btnYear" type="button" aria-label="Cycle available years">Year: 2024</button>
    <button id="btnDirection" type="button" aria-label="Cycle trade direction filter">Direction: Export Flows</button>
    <button id="btnThreshold" type="button" aria-label="Cycle minimum trade threshold">Min Trade: $1B</button>
    <div class="sep"></div>
    <button id="btnBloc" type="button" aria-label="Open trade bloc filters">Bloc: Global</button>
    <button id="btnSector" type="button" aria-label="Open sector filters">Sectors</button>
    <button id="btnAbout" type="button" aria-label="About and data sources">About</button>
    <button id="btnReset" type="button" aria-label="Reset all filters and selection">Reset</button>
  </nav>

  <div id="macroSearchWrap">
    <input type="text" id="macroSearch" placeholder="Search country..." autocomplete="off" aria-label="Search countries" role="combobox" aria-expanded="false" aria-controls="macroSearchSuggest">
    <div id="macroSearchSuggest" role="listbox" aria-label="Country suggestions"></div>
  </div>

  <aside id="macroDetail" role="region" aria-labelledby="countryDetailsTitle">
    <h2 class="panelHeading" id="countryDetailsTitle">Country Details</h2>
    <button id="detailClose" type="button" aria-label="Close country details">&times;</button>
    <div class="detailHeader">
      <div class="detailFlag" id="detailFlag"></div>
      <div class="detailHeaderText">
        <div class="detailName" id="detailName">Select a country</div>
        <div class="detailIso" id="detailIso"></div>
      </div>
    </div>
    <div class="detailStats" id="detailStats">
      <div class="detailStat">
        <span class="label">GDP</span>
        <b id="detailGdp">-</b>
      </div>
      <div class="detailStat">
        <span class="label">Exports</span>
        <b id="detailExports">-</b>
      </div>
      <div class="detailStat">
        <span class="label">Imports</span>
        <b id="detailImports">-</b>
      </div>
      <div class="detailStat">
        <span class="label">Trade Balance</span>
        <b id="detailBalance">-</b>
      </div>
    </div>
    <div class="detailSection">
      <div class="sectionTitle">Top Trade Partners</div>
      <div class="partnerList" id="detailPartners"></div>
    </div>
    <div class="detailSection">
      <div class="sectionTitle">Sector Exposure</div>
      <div class="sectorList" id="detailSectors"></div>
    </div>
    <div class="detailSection">
      <div class="sectionTitle">Trade Blocs</div>
      <div class="sectorList" id="detailBlocs"></div>
    </div>
    <div class="detailSection">
      <div class="sectionTitle">Data Provenance</div>
      <div class="sectorList" id="detailProvenance"></div>
    </div>
  </aside>

  <aside id="macroTop10" role="region" aria-labelledby="topProducersTitle">
    <div class="top10Header">
      <h2 class="top10Title" id="topProducersTitle">Top Producers</h2>
      <select id="top10Sector" aria-label="Select product sector for top producers">
        <option value="all" selected>Default View</option>
        <option value="medicine">Medicine</option>
        <option value="electronics">Electronics</option>
        <option value="automotive">Automotive</option>
        <option value="energy">Energy</option>
        <option value="agriculture">Agriculture</option>
        <option value="textiles">Textiles</option>
        <option value="metals">Metals</option>
        <option value="chemicals">Chemicals</option>
      </select>
    </div>
    <div class="top10List" id="top10List"></div>
  </aside>

  <section id="macroVizRegion" aria-labelledby="macroVizTitle">
    <h2 class="srOnly" id="macroVizTitle">Global GDP and Bilateral Trade</h2>
    <main id="macroViz" role="img" aria-label="Force-directed graph of countries sized by GDP and connected by bilateral trade flows"></main>
  </section>

  <div id="macroTooltip" class="tooltip" role="tooltip">
    <div class="tooltipName" id="tooltipName"></div>
    <div class="tooltipGdp" id="tooltipGdp"></div>
    <div class="tooltipTrade" id="tooltipTrade"></div>
  </div>

  <aside id="releaseProvenance" aria-labelledby="releaseProvenanceTitle">
    <div class="releaseHeader">
      <h2 id="releaseProvenanceTitle">Release Provenance</h2>
      <button type="button" id="releaseAbout" class="footerLink">Full methodology</button>
    </div>
    <div class="releaseFacts">
      <div class="releaseFact">
        <span class="releaseLabel">Verified release</span>
        <time id="releaseDate" datetime="">Loading release…</time>
      </div>
      <div class="releaseFact">
        <span class="releaseLabel">Coverage</span>
        <span id="releaseCoverage">Loading coverage…</span>
      </div>
    </div>
    <p id="releaseMethodology">Methodology loads with the dataset release.</p>
    <div id="releaseSources" class="releaseSources" aria-label="Release data sources"></div>
  </aside>

  <footer id="macroFooter">
    <span class="updateStatus">
      <span class="statusDot fresh"></span>
      <span id="lastUpdated">Loading verified release…</span>
    </span>
    <span class="footerSep">·</span>
    <button type="button" id="footerAbout" class="footerLink">About &amp; sources</button>
    <span class="footerSep">·</span>
    <span>Part of Monarch Castle Technologies</span>
  </footer>

  <!-- First-load onboarding / encoding key -->
  <div id="macroHint" role="dialog" aria-label="How to read this map" aria-modal="false">
    <div class="hintTitle">Country Macro Intelligence</div>
    <p class="hintLead">Global GDP and bilateral trade flows across 102 economies.</p>
    <div class="hintKey">
      <div class="hintKeyRow"><span class="keyDot keyDotBig"></span><span class="keyDot keyDotSmall"></span> Bubble <b>size</b> = GDP</div>
      <div class="hintKeyRow"><span class="keyRamp"></span> Bubble <b>color</b> = GDP + trade intensity</div>
      <div class="hintKeyRow"><span class="keyLine"></span> Line = <b>bilateral trade flow</b></div>
    </div>
    <p class="hintTip">Click a bubble for detail · search a country · pick a sector to rank top producers.</p>
    <button type="button" id="hintDismiss">Got it</button>
  </div>

  <div id="sectorFilterPanel" role="region" aria-label="Sector filter">
    <h3>Sector Filter</h3>
    <div class="sectorChips" id="sectorChips"></div>
    <div class="filterActions">
      <button id="applySectorFilter" type="button" aria-label="Apply sector filter">Apply</button>
      <button id="clearSectorFilter" type="button" aria-label="Clear sector filter">Clear</button>
    </div>
  </div>

  <div id="blocFilterPanel" role="region" aria-label="Trade bloc filter">
    <h3>Trade Blocs (Multi-select)</h3>
    <div class="blocChips" id="blocChips"></div>
    <div class="filterSelectRow">
      <label for="blocMode">Member Mode</label>
      <select id="blocMode" aria-label="Bloc member combination mode">
        <option value="union">Union (A U B)</option>
        <option value="intersection">Intersection (A n B)</option>
      </select>
    </div>
    <div class="filterSelectRow">
      <label for="blocEdgeScope">Edge Scope</label>
      <select id="blocEdgeScope" aria-label="Bloc edge inclusion scope">
        <option value="touching">Touching links</option>
        <option value="internal">Internal only</option>
      </select>
    </div>
    <div class="filterHint">Tip: pick one or more blocs, then apply.</div>
    <div class="filterActions">
      <button id="applyBlocFilter" type="button" aria-label="Apply bloc filters">Apply</button>
      <button id="clearBlocFilter" type="button" aria-label="Clear bloc filters">Clear</button>
    </div>
  </div>

  <div id="aboutPanel" role="dialog" aria-label="About and data sources" aria-modal="false">
    <h2>About &amp; Methodology</h2>
    <p class="aboutLead">
      <b>Country Macro Intelligence</b> visualizes GDP and bilateral trade for the world's largest
      economies. Bubbles are countries (size and color encode economic weight); lines are bilateral
      trade flows. Select a sector to rank the top 10 producers, or filter by trade bloc.
    </p>
    <p class="aboutLead">Inbound links are mirrored from the partner's reported goods exports when a separate import observation is unavailable. They are not independently reported import records.</p>
    <div class="aboutBlock">
      <div class="aboutBlockTitle">Coverage</div>
      <div class="aboutSources" id="aboutCoverage"></div>
    </div>
    <div class="aboutBlock">
      <div class="aboutBlockTitle">Data Sources</div>
      <div class="aboutSources" id="aboutSources"></div>
    </div>
    <p class="aboutDisclaimer">
      Figures are nominal USD and represent the most recent reported period. Trade values are
      goods-only (UN Comtrade); national totals include services (World Bank). Treat as indicative,
      not official statistics.
    </p>
    <div class="filterActions">
      <button id="closeAbout" type="button" aria-label="Close about panel">Close</button>
    </div>
  </div>
</body>
</html>