Spaces:
Running
Running
| <html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/> | |
| <meta name="description" content="Comparative education analytics and source-transparent Latin American dashboards."/> | |
| <title>Education Data Lab | Comparative Education Intelligence</title><link rel="stylesheet" href="style.css"/></head> | |
| <body> | |
| <header class="top"><div class="top-inner"><div class="brand"><div class="mark">ED<span>·</span></div><div><b>EDUCATION DATA LAB</b><small>Comparative Research Intelligence</small></div></div><div class="top-right"><span class="mini">OPEN RESEARCH · LATIN AMERICA</span><span id="mode-pill" class="mode-pill demo">SYNTHETIC DEMO</span></div></div></header> | |
| <section class="hero"><div class="wrap hero-grid"><div><div class="eyebrow">EDUCATION SYSTEMS · QUANTITATIVE RESEARCH · EVIDENCE</div><h1>From education indicators<br/>to <em>comparative insight.</em></h1><p>Explore participation, completion, spending and context across Latin America. Audit data gaps, investigate associations and export reproducible reports.</p><div class="hero-tags"><span>World Bank API v2</span><span>UNESCO-derived education series</span><span>Transparent statistics</span><span>No server required</span></div></div><div class="hero-side"><div class="hero-number">08<span>indicators</span></div><div class="hero-divider"></div><div class="hero-side-row"><div>16<span>economies</span></div><div>06<span>research workspaces</span></div></div></div></div></section> | |
| <div class="wrap"><div id="alert" role="status" aria-live="polite" class="alert demo">DEMO DATA: The currently displayed figures are generated, not official statistics. Click “Load World Bank data” to retrieve actual observations.</div> | |
| <div class="layout"> | |
| <aside class="controls card"><div class="controls-title">01 / RESEARCH SETTINGS</div><label for="countries">Countries <small>up to 8</small></label><select id="countries" multiple size="9" aria-describedby="country-help"></select><div id="country-help" class="hint">Mac: hold ⌘ to select multiple economies.</div> | |
| <label for="indicator">Primary indicator</label><select id="indicator"></select> | |
| <div class="input-grid"><div><label for="start">From</label><input id="start" type="number" min="1990" max="2026" value="2010"/></div><div><label for="end">Through</label><input id="end" type="number" min="1990" max="2026" value="2025"/></div></div> | |
| <label for="compare-indicator">Association variable</label><select id="compare-indicator"></select> | |
| <div class="btn-stack"><button id="load-live" class="btn primary">↗ Load World Bank data</button><button id="load-demo" class="btn subtle">◇ Load synthetic demo</button></div> | |
| <div class="hint note">Live data requires internet access. Missing observations are never invented, interpolated or silently filled.</div> | |
| <details class="filter-help"><summary>How to use this workspace</summary><p>Choose countries and indicators, select a research view and export results. Start with demo data to test the controls, then load official data.</p></details> | |
| </aside> | |
| <main class="main"><div class="status-row"><div><b id="status-title">Synthetic research preview</b><p id="status-sub">Demonstration values. Do not cite as factual evidence.</p></div><button id="download-csv" class="btn outline">↓ Export data CSV</button></div> | |
| <div class="metrics"><div class="metric"><span>COUNTRIES</span><strong id="metric-countries">6</strong><small>selected economies</small></div><div class="metric"><span>OBSERVATIONS</span><strong id="metric-obs">0</strong><small>valid country-years / 8 series</small></div><div class="metric"><span>DATA COVERAGE</span><strong id="metric-coverage">—</strong><small>of possible records</small></div><div class="metric"><span>AVG. REPORTING LAG</span><strong id="metric-lag">—</strong><small>years across latest observations</small></div></div> | |
| <nav class="tabs" aria-label="Research views"><button class="tab active" data-view="overview">01 / Overview</button><button class="tab" data-view="trends">02 / Trends</button><button class="tab" data-view="gaps">03 / Country gaps</button><button class="tab" data-view="relations">04 / Associations</button><button class="tab" data-view="quality">05 / Data quality</button><button class="tab" data-view="brief">06 / Research brief</button></nav> | |
| <section class="view active" id="view-overview"><div class="section-head"><div><span class="overline">EXECUTIVE OVERVIEW</span><h2>Education landscape</h2></div><span class="section-meta" id="overview-meta"></span></div><div class="card plot-card"><div class="chart-title"><h3>Latest reported observation by country</h3><small>Each bar retains its reporting year. Ranking is not same-year.</small></div><div id="rank-bars"></div></div><div class="card table-card"><div class="chart-title"><h3>Source-aware ranking</h3><small>Values may originate from different years.</small></div><div id="rank-table"></div></div></section> | |
| <section class="view" id="view-trends"><div class="section-head"><div><span class="overline">LONGITUDINAL ANALYSIS</span><h2>Education over time</h2></div></div><div class="card plot-card"><div class="chart-title"><h3 id="trend-title">Indicator trajectories</h3><small>Series gaps are shown as breaks, not interpolated.</small></div><div id="line-chart"></div><div id="legend" class="legend"></div></div><div id="trend-notes" class="card notes-card"></div></section> | |
| <section class="view" id="view-gaps"><div class="section-head"><div><span class="overline">CROSS-COUNTRY DIAGNOSTICS</span><h2>Differences and progress</h2></div></div><div class="card plot-card"><div class="chart-title"><h3>Two-country comparison</h3><small>Differences in indicator units, not inequality within a country.</small></div><div class="input-grid three"><div><label for="gap-a">Country A</label><select id="gap-a"></select></div><div><label for="gap-b">Country B</label><select id="gap-b"></select></div><div><label for="gap-year">Compare year</label><input id="gap-year" type="number" min="1990" max="2026" value="2020"/></div></div><div id="gap-result"></div></div><div id="progress-table" class="card table-card"></div></section> | |
| <section class="view" id="view-relations"><div class="section-head"><div><span class="overline">EXPLORATORY STATISTICS</span><h2>Indicator relationships</h2></div></div><div class="card plot-card"><div class="chart-title"><h3>Same-country, same-year pairs</h3><small>Pearson r describes linear association, not causality.</small></div><div id="scatter-chart"></div><div id="relationship-meta" class="analysis-notes"></div></div></section> | |
| <section class="view" id="view-quality"><div class="section-head"><div><span class="overline">DATA GOVERNANCE</span><h2>Coverage, lag & provenance</h2></div></div><div class="card table-card"><div class="chart-title"><h3>Coverage matrix</h3><small>Observed years divided by selected years, per country and indicator.</small></div><div id="coverage-matrix"></div></div><div class="card notes-card" id="source-audit"></div></section> | |
| <section class="view" id="view-brief"><div class="section-head"><div><span class="overline">REPRODUCIBLE REPORTING</span><h2>Research brief generator</h2></div></div><div class="card brief-card"><p class="hint">Descriptive observations are generated from your selected dataset. Review all conclusions before sharing.</p><div id="brief-text"></div><div class="export-actions"><button id="export-md" class="btn primary">↓ Research brief (.md)</button><button id="export-json" class="btn outline">↓ Reproducible session (.json)</button><button id="import-json" class="btn subtle">↑ Import prior session</button><input type="file" id="import-file" accept=".json,application/json" hidden/></div></div></section> | |
| </main></div> | |
| <footer>Education Data Lab · Applied AI & Comparative Education · <span id="footer-source">SYNTHETIC DEMO, NOT FOR CITATION</span><br/>Methods and definitions in the public repository. No personal data leaves this browser except selected public-data API queries.</footer></div> | |
| <script type="module" src="app.js"></script> | |
| </body></html> | |