365 lines
12 KiB
HTML
365 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mapbox Globe Visualizations Gallery</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
color: white;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 10px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.setup-notice {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 12px;
|
|
padding: 20px 30px;
|
|
margin-bottom: 40px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
border-left: 5px solid #f39c12;
|
|
}
|
|
|
|
.setup-notice h3 {
|
|
color: #f39c12;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.setup-notice p {
|
|
color: #333;
|
|
line-height: 1.6;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.setup-notice code {
|
|
background: #f5f5f5;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.setup-notice a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.setup-notice a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.globe-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.globe-card {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.globe-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.globe-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.globe-number {
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.globe-title {
|
|
font-size: 1.4em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.globe-body {
|
|
padding: 25px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.globe-theme {
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.globe-description {
|
|
color: #555;
|
|
line-height: 1.6;
|
|
margin-bottom: 15px;
|
|
flex: 1;
|
|
}
|
|
|
|
.globe-stats {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat {
|
|
background: #f8f9fa;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.stat strong {
|
|
color: #667eea;
|
|
}
|
|
|
|
.globe-tech {
|
|
margin-top: 10px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.tech-label {
|
|
font-size: 0.85em;
|
|
color: #999;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tech-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tech-tag {
|
|
background: #e8f4f8;
|
|
color: #3498db;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.view-button {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin-top: 15px;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.globe-card:hover .view-button {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
color: white;
|
|
margin-top: 50px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
footer p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
footer a {
|
|
color: white;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🌍 Mapbox Globe Visualizations</h1>
|
|
<p class="subtitle">Progressive Web-Enhanced Learning Series</p>
|
|
</header>
|
|
|
|
<div class="setup-notice">
|
|
<h3>⚠️ Setup Required</h3>
|
|
<p><strong>Before viewing the globes:</strong></p>
|
|
<ol style="margin-left: 20px; color: #555;">
|
|
<li>Get a free Mapbox token at <a href="https://account.mapbox.com/" target="_blank">account.mapbox.com</a></li>
|
|
<li>For each globe you want to view, edit <code>src/index.js</code> and replace the access token on line 5</li>
|
|
<li>Start this server: <code>python -m http.server 8000</code></li>
|
|
<li>Click any globe below to view it!</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="globe-grid">
|
|
<!-- Globe 1 -->
|
|
<a href="mapbox_globe_1/index.html" class="globe-card">
|
|
<div class="globe-header">
|
|
<div class="globe-number">GLOBE 1</div>
|
|
<div class="globe-title">Global Population</div>
|
|
</div>
|
|
<div class="globe-body">
|
|
<div class="globe-theme">🏙️ Demographic Distribution</div>
|
|
<div class="globe-description">
|
|
Visualizes 100 major cities worldwide with population-based sizing and color coding.
|
|
Features auto-rotating globe with smooth interactions and hover popups.
|
|
</div>
|
|
<div class="globe-stats">
|
|
<div class="stat"><strong>100</strong> cities</div>
|
|
<div class="stat"><strong>37.4M</strong> max pop</div>
|
|
</div>
|
|
<div class="globe-tech">
|
|
<div class="tech-label">Techniques</div>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Circle Layer</span>
|
|
<span class="tech-tag">Globe Projection</span>
|
|
<span class="tech-tag">Atmosphere</span>
|
|
</div>
|
|
</div>
|
|
<div class="view-button">View Globe →</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Globe 2 -->
|
|
<a href="mapbox_globe_2/index.html" class="globe-card">
|
|
<div class="globe-header">
|
|
<div class="globe-number">GLOBE 2</div>
|
|
<div class="globe-title">Temperature Anomalies</div>
|
|
</div>
|
|
<div class="globe-body">
|
|
<div class="globe-theme">🌡️ Climate Change Patterns</div>
|
|
<div class="globe-description">
|
|
Heatmap showing global temperature deviations from historical averages.
|
|
Dual-layer approach reveals both global patterns and local detail. Clearly shows Arctic amplification.
|
|
</div>
|
|
<div class="globe-stats">
|
|
<div class="stat"><strong>280</strong> stations</div>
|
|
<div class="stat"><strong>+3.6°C</strong> max anomaly</div>
|
|
</div>
|
|
<div class="globe-tech">
|
|
<div class="tech-label">Techniques</div>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Heatmap Layer</span>
|
|
<span class="tech-tag">Dual Layer</span>
|
|
<span class="tech-tag">Diverging Colors</span>
|
|
</div>
|
|
</div>
|
|
<div class="view-button">View Globe →</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Globe 3 -->
|
|
<a href="mapbox_globe_3/index.html" class="globe-card">
|
|
<div class="globe-header">
|
|
<div class="globe-number">GLOBE 3</div>
|
|
<div class="globe-title">Economic Dashboard</div>
|
|
</div>
|
|
<div class="globe-body">
|
|
<div class="globe-theme">💰 Multi-Dimensional Economic Data</div>
|
|
<div class="globe-description">
|
|
Interactive economic visualization with 4 metrics per country.
|
|
Switch between 16 different metric combinations using advanced Mapbox expressions.
|
|
Preset views reveal global economic patterns.
|
|
</div>
|
|
<div class="globe-stats">
|
|
<div class="stat"><strong>120</strong> countries</div>
|
|
<div class="stat"><strong>16</strong> combinations</div>
|
|
</div>
|
|
<div class="globe-tech">
|
|
<div class="tech-label">Techniques</div>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Expressions</span>
|
|
<span class="tech-tag">Multi-Metric</span>
|
|
<span class="tech-tag">Dynamic UI</span>
|
|
</div>
|
|
</div>
|
|
<div class="view-button">View Globe →</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Globe 4 -->
|
|
<a href="mapbox_globe_4/index.html" class="globe-card">
|
|
<div class="globe-header">
|
|
<div class="globe-number">GLOBE 4</div>
|
|
<div class="globe-title">Digital Infrastructure</div>
|
|
</div>
|
|
<div class="globe-body">
|
|
<div class="globe-theme">🌐 Internet & Tech Hub Network</div>
|
|
<div class="globe-description">
|
|
Most sophisticated visualization with 4 simultaneous layers: country fills,
|
|
tech hub circles, connection lines, and city labels. Toggle layers,
|
|
filter by region, and adjust opacity independently.
|
|
</div>
|
|
<div class="globe-stats">
|
|
<div class="stat"><strong>100+</strong> countries</div>
|
|
<div class="stat"><strong>80</strong> tech hubs</div>
|
|
<div class="stat"><strong>4</strong> layers</div>
|
|
</div>
|
|
<div class="globe-tech">
|
|
<div class="tech-label">Techniques</div>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Multi-Layer</span>
|
|
<span class="tech-tag">Choropleth</span>
|
|
<span class="tech-tag">Layer Control</span>
|
|
<span class="tech-tag">Filtering</span>
|
|
</div>
|
|
</div>
|
|
<div class="view-button">View Globe →</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<footer>
|
|
<p><strong>Web-Enhanced Infinite Loop System</strong></p>
|
|
<p>Each globe learned from unique <a href="https://docs.mapbox.com/mapbox-gl-js/" target="_blank">Mapbox GL JS documentation</a></p>
|
|
<p>Generated progressively with web research integration</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|