Add Mapbox globe gallery index page for easy navigation
Creates interactive gallery showcasing all 4 globe visualizations with: - Card-based layout with descriptions and stats - Visual hierarchy showing progressive complexity - Setup instructions for Mapbox token - Click-through navigation to each globe - Responsive grid design with hover effects Makes it easy to browse and access all generated globes from one page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shawn Anderson
parent
03cbe3fbe3
commit
c6ed713187
|
|
@ -0,0 +1,364 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue