Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GCP Accelerator Availability Map</title> | |
| <style> | |
| body { margin: 0; font-family: sans-serif; background-color: #111; color: #eee; } | |
| #globeViz { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; } | |
| #controls { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background: rgba(0, 0, 0, 0.75); | |
| padding: 15px; | |
| border-radius: 5px; | |
| max-height: calc(100vh - 150px); /* Adjust max-height to leave space for info panel */ | |
| overflow-y: auto; | |
| z-index: 10; | |
| border: 1px solid #444; | |
| } | |
| #controls h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 5px; } | |
| #controls label { | |
| display: block; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| } | |
| #controls input[type="checkbox"] { | |
| margin-right: 5px; | |
| vertical-align: middle; | |
| } | |
| #controls button { | |
| margin-top: 10px; | |
| padding: 6px 12px; | |
| background-color: #444; | |
| border: 1px solid #666; | |
| color: #eee; | |
| cursor: pointer; | |
| border-radius: 3px; | |
| font-size: 0.9em; | |
| margin-right: 5px; | |
| } | |
| #controls button:hover { | |
| background-color: #555; | |
| } | |
| #info-panel { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| background: rgba(0, 0, 0, 0.85); | |
| padding: 12px; | |
| border-radius: 5px; | |
| max-width: 350px; /* Increased max-width */ | |
| font-size: 0.85em; | |
| z-index: 10; | |
| display: none; /* Hidden by default */ | |
| border: 1px solid #555; | |
| } | |
| #info-panel h4 { | |
| margin: 0; | |
| font-size: 1.1em; | |
| color: #fff; | |
| } | |
| #info-panel ul { | |
| margin: 8px 0 0 0; | |
| padding-left: 18px; | |
| list-style-type: disc; /* Use standard bullets */ | |
| max-height: 150px; /* Limit list height */ | |
| overflow-y: auto; | |
| } | |
| #info-panel li { | |
| margin-bottom: 5px; | |
| line-height: 1.3; | |
| } | |
| #info-panel li b { | |
| color: #eee; /* Make accelerator name slightly brighter */ | |
| } | |
| #info-panel li i { /* Style for notes */ | |
| color: #aaa; | |
| font-size: 0.9em; | |
| } | |
| /* Style for the color indicator square */ | |
| .color-indicator { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| margin-right: 8px; | |
| border: 1px solid #777; /* Slightly darker border */ | |
| vertical-align: middle; /* Align better with text */ | |
| } | |
| </style> | |
| <!-- Import globe.gl library --> | |
| <script src="//unpkg.com/three"></script> | |
| <script src="//unpkg.com/globe.gl"></script> | |
| </head> | |
| <body> | |
| <div id="globeViz"></div> | |
| <div id="controls"> | |
| <h3>Filter by Accelerator:</h3> | |
| <div id="accelerator-filters"> | |
| <!-- Filters will be populated by JavaScript --> | |
| </div> | |
| <button id="show-all">Show All</button> | |
| <button id="hide-all">Hide All</button> | |
| </div> | |
| <div id="info-panel"> | |
| <!-- Info about hovered location will be populated here --> | |
| </div> | |
| <script> | |
| // --- 1. Data Processing --- | |
| // Raw data based on the provided table | |
| const rawData = [ | |
| { accel: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" }, | |
| { accel: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA", notes: "Location assumed near us-central1" }, | |
| { accel: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" }, | |
| { accel: "TPU v5e", region: "us-south1", zones: "a", location: "Dallas, Texas, USA" }, | |
| { accel: "TPU v5e", region: "us-west1", zones: "c", location: "The Dalles, Oregon, USA" }, | |
| { accel: "TPU v5e", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "TPU v5e", region: "europe-west1", zones: "b", location: "St. Ghislain, Belgium" }, | |
| { accel: "TPU v5e", region: "asia-southeast1", zones: "b", location: "Jurong West, Singapore" }, | |
| { accel: "TPU v5p", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" }, | |
| { accel: "TPU v5p", region: "europe-west4", zones: "b", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v6e", region: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "TPU v6e", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" }, | |
| { accel: "TPU v6e", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v6e", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 Mega", region: "us-central1", zones: "a, b*, c", location: "Council Bluffs, Iowa, USA", notes: "b: Limited capacity" }, | |
| { accel: "H100 A3 Mega", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" }, | |
| { accel: "H100 A3 Mega", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "H100 A3 Mega", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "H100 A3 Mega", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 Mega", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accel: "H100 A3 Mega", region: "australia-southeast1", zones: "c*", location: "Sydney, Australia", notes: "Limited capacity" }, | |
| { accel: "H100 A3 Mega", region: "europe-west1", zones: "b*, c*", location: "St. Ghislain, Belgium", notes: "Limited capacity" }, | |
| { accel: "H100 A3 Mega", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "H100 A3 High", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "H100 A3 High", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" }, | |
| { accel: "H100 A3 High", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" }, | |
| { accel: "H100 A3 High", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "H100 A3 High", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "H100 A3 High", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 High", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accel: "H100 A3 High", region: "europe-west1", zones: "b*", location: "St. Ghislain, Belgium", notes: "Limited capacity" }, | |
| { accel: "H100 A3 Edge", region: "northamerica-northeast2", zones: "c", location: "Toronto, Ontario, Canada" }, | |
| { accel: "H100 A3 Edge", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 Edge", region: "asia-northeast3", zones: "a, c", location: "Seoul, South Korea" }, | |
| { accel: "H100 A3 Edge", region: "asia-south1", zones: "c", location: "Mumbai, India" }, | |
| { accel: "H100 A3 Edge", region: "europe-west2", zones: "b", location: "London, UK" }, | |
| { accel: "H100 A3 Edge", region: "europe-west3", zones: "a", location: "Frankfurt, Germany" }, | |
| { accel: "A100 A2 Ultra", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "A100 A2 Ultra", region: "us-east4", zones: "c", location: "Ashburn, Virginia, USA" }, | |
| { accel: "A100 A2 Ultra", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" }, | |
| { accel: "A100 A2 Ultra", region: "asia-southeast1", zones: "c", location: "Jurong West, Singapore" }, | |
| { accel: "A100 A2 Ultra", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-central1", zones: "a*, b*, c*, f*", location: "Council Bluffs, Iowa, USA", notes: "a2-megagpu-16g only" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-east1", zones: "b", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-west1", zones: "b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-west4", zones: "b", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" }, | |
| { accel: "A100 40GB A2 Standard", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" }, | |
| { accel: "A100 40GB A2 Standard", region: "asia-southeast1", zones: "b, c*", location: "Jurong West, Singapore", notes: "c: a2-megagpu-16g only" }, | |
| { accel: "A100 40GB A2 Standard", region: "me-west1", zones: "a, c", location: "Tel Aviv, Israel" }, | |
| { accel: "A100 40GB A2 Standard", region: "europe-west4", zones: "a*, b*", location: "Eemshaven, Netherlands", notes: "a2-megagpu-16g only" }, | |
| { accel: "G2 (L4)", region: "us-central1", zones: "a, b, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "G2 (L4)", region: "us-east1", zones: "b, c, d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "G2 (L4)", region: "us-east4", zones: "a", location: "Ashburn, Virginia, USA" }, | |
| { accel: "G2 (L4)", region: "us-west1", zones: "a, b, c", location: "The Dalles, Oregon, USA" }, | |
| { accel: "G2 (L4)", region: "us-west4", zones: "a, c", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "G2 (L4)", region: "northamerica-northeast2", zones: "a", location: "Toronto, Ontario, Canada" }, | |
| { accel: "G2 (L4)", region: "asia-east1", zones: "a, b, c", location: "Changhua County, Taiwan" }, | |
| { accel: "G2 (L4)", region: "asia-northeast1", zones: "a, b, c", location: "Tokyo, Japan" }, | |
| { accel: "G2 (L4)", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" }, | |
| { accel: "G2 (L4)", region: "asia-south1", zones: "a, b, c", location: "Mumbai, India" }, | |
| { accel: "G2 (L4)", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" }, | |
| { accel: "G2 (L4)", region: "australia-southeast1", zones: "a", location: "Sydney, Australia" }, | |
| { accel: "G2 (L4)", region: "europe-west1", zones: "b, c", location: "St. Ghislain, Belgium" }, | |
| { accel: "G2 (L4)", region: "europe-west2", zones: "a, b", location: "London, UK" }, | |
| { accel: "G2 (L4)", region: "europe-west3", zones: "a, b", location: "Frankfurt, Germany" }, | |
| { accel: "G2 (L4)", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "G2 (L4)", region: "europe-west6", zones: "b, c", location: "Zurich, Switzerland" }, | |
| { accel: "G2 (L4)", region: "me-central2", zones: "a", location: "Dammam, Saudi Arabia" }, | |
| { accel: "N1+T4", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+T4", region: "us-east1", zones: "c, d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "N1+T4", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" }, | |
| { accel: "N1+T4", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "N1+T4", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" }, | |
| { accel: "N1+T4", region: "us-west4", zones: "a, b", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "N1+T4", region: "northamerica-northeast1", zones: "c", location: "Montréal, Québec, Canada" }, | |
| { accel: "N1+T4", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" }, | |
| { accel: "N1+T4", region: "asia-east2", zones: "a, c", location: "Hong Kong" }, | |
| { accel: "N1+T4", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" }, | |
| { accel: "N1+T4", region: "asia-northeast3", zones: "b, c", location: "Seoul, South Korea" }, | |
| { accel: "N1+T4", region: "asia-south1", zones: "a, b", location: "Mumbai, India" }, | |
| { accel: "N1+T4", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" }, | |
| { accel: "N1+T4", region: "asia-southeast2", zones: "a", location: "Jakarta, Indonesia" }, | |
| { accel: "N1+T4", region: "australia-southeast1", zones: "a, c", location: "Sydney, Australia" }, | |
| { accel: "N1+T4", region: "europe-central2", zones: "b, c", location: "Warsaw, Poland" }, | |
| { accel: "N1+T4", region: "europe-west1", zones: "b, c, d", location: "St. Ghislain, Belgium" }, | |
| { accel: "N1+T4", region: "europe-west2", zones: "a, b", location: "London, UK" }, | |
| { accel: "N1+T4", region: "europe-west3", zones: "b", location: "Frankfurt, Germany" }, | |
| { accel: "N1+T4", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "N1+T4", region: "me-west1", zones: "b, c", location: "Tel Aviv, Israel" }, | |
| { accel: "N1+T4", region: "southamerica-east1", zones: "a, c", location: "Osasco, São Paulo, Brazil" }, | |
| { accel: "N1+V100", region: "us-central1", zones: "a, b, c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+V100", region: "us-east1", zones: "c", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "N1+V100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "N1+V100", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" }, | |
| { accel: "N1+V100", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "N1+P100", region: "us-central1", zones: "c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+P100", region: "us-east1", zones: "b, c", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "N1+P100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "N1+P100", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" }, | |
| { accel: "N1+P100", region: "australia-southeast1", zones: "c", location: "Sydney, Australia" }, | |
| { accel: "N1+P100", region: "europe-west1", zones: "b, d", location: "St. Ghislain, Belgium" }, | |
| { accel: "N1+P100", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "N1+P4", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+P4", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" }, | |
| { accel: "N1+P4", region: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada" }, | |
| { accel: "N1+P4", region: "us-west2", zones: "b, c", location: "Los Angeles, California, USA" }, | |
| { accel: "N1+P4", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accel: "N1+P4", region: "australia-southeast1", zones: "a, b", location: "Sydney, Australia" }, | |
| { accel: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" } | |
| ]; | |
| // Geocode locations (Approximate coordinates) | |
| const locationsCoords = { | |
| "Council Bluffs, Iowa, USA": { lat: 41.2619, lng: -95.8513 }, | |
| "Eemshaven, Netherlands": { lat: 53.4421, lng: 6.8349 }, | |
| "Changhua County, Taiwan": { lat: 24.0729, lng: 120.5446 }, | |
| "Columbus, Ohio, USA": { lat: 39.9612, lng: -82.9988 }, | |
| "Dallas, Texas, USA": { lat: 32.7767, lng: -96.7970 }, | |
| "The Dalles, Oregon, USA": { lat: 45.5946, lng: -121.1787 }, | |
| "Las Vegas, Nevada, USA": { lat: 36.1699, lng: -115.1398 }, | |
| "St. Ghislain, Belgium": { lat: 50.4430, lng: 3.8181 }, | |
| "Jurong West, Singapore": { lat: 1.3392, lng: 103.7062 }, | |
| "Moncks Corner, South Carolina, USA": { lat: 33.1918, lng: -80.0173 }, | |
| "Tokyo, Japan": { lat: 35.6895, lng: 139.6917 }, | |
| "Ashburn, Virginia, USA": { lat: 39.0438, lng: -77.4874 }, | |
| "Sydney, Australia": { lat: -33.8688, lng: 151.2093 }, | |
| "Toronto, Ontario, Canada": { lat: 43.6532, lng: -79.3832 }, | |
| "Seoul, South Korea": { lat: 37.5665, lng: 126.9780 }, | |
| "Mumbai, India": { lat: 19.0760, lng: 72.8777 }, | |
| "London, UK": { lat: 51.5074, lng: -0.1278 }, | |
| "Frankfurt, Germany": { lat: 50.1109, lng: 8.6821 }, | |
| "Salt Lake City, Utah, USA": { lat: 40.7608, lng: -111.8910 }, | |
| "Tel Aviv, Israel": { lat: 32.0853, lng: 34.7818 }, | |
| "Zurich, Switzerland": { lat: 47.3769, lng: 8.5417 }, | |
| "Dammam, Saudi Arabia": { lat: 26.4207, lng: 50.0888 }, | |
| "Montréal, Québec, Canada": { lat: 45.5017, lng: -73.5673 }, | |
| "Hong Kong": { lat: 22.3193, lng: 114.1694 }, | |
| "Jakarta, Indonesia": { lat: -6.2088, lng: 106.8456 }, | |
| "Warsaw, Poland": { lat: 52.2297, lng: 21.0122 }, | |
| "Osasco, São Paulo, Brazil": { lat: -23.5329, lng: -46.7919 }, | |
| "Los Angeles, California, USA": { lat: 34.0522, lng: -118.2437 } | |
| }; | |
| // Aggregate data by location | |
| const locationsData = {}; | |
| const uniqueAccelerators = new Set(); | |
| rawData.forEach(item => { | |
| const locName = item.location; | |
| if (!locationsCoords[locName]) { | |
| console.warn(`Coordinates not found for: ${locName}. Skipping this entry.`); | |
| return; // Skip if no coordinates | |
| } | |
| if (!locationsData[locName]) { | |
| locationsData[locName] = { | |
| name: locName, | |
| lat: locationsCoords[locName].lat, | |
| lng: locationsCoords[locName].lng, | |
| accelerators: [] | |
| }; | |
| } | |
| // Add accelerator details only if it's not a duplicate entry *for this specific location* | |
| // (We combine regions/zones if the same accelerator appears multiple times for the same location, | |
| // although the provided data seems mostly unique per location-accelerator pair already) | |
| const existingAccelIndex = locationsData[locName].accelerators.findIndex(a => a.name === item.accel); | |
| if (existingAccelIndex === -1) { | |
| locationsData[locName].accelerators.push({ | |
| name: item.accel, | |
| regions: [item.region], // Store regions as an array | |
| zones: [item.zones], // Store zones as an array | |
| notes: item.notes ? [item.notes] : [] // Store notes as an array | |
| }); | |
| } else { | |
| // If accelerator already exists, add region/zone/notes if they differ (simple check) | |
| const existingAccel = locationsData[locName].accelerators[existingAccelIndex]; | |
| if (!existingAccel.regions.includes(item.region)) { | |
| existingAccel.regions.push(item.region); | |
| } | |
| if (!existingAccel.zones.includes(item.zones)) { | |
| existingAccel.zones.push(item.zones); | |
| } | |
| if (item.notes && !existingAccel.notes.includes(item.notes)) { | |
| existingAccel.notes.push(item.notes); | |
| } | |
| } | |
| uniqueAccelerators.add(item.accel); | |
| }); | |
| // Convert aggregated data to array format for globe.gl | |
| const pointsData = Object.values(locationsData); | |
| // Sort accelerator names for consistent filter order | |
| const sortedAccelerators = Array.from(uniqueAccelerators).sort(); | |
| // --- 2. Globe Initialization & Configuration --- | |
| const myGlobe = Globe(); | |
| const globeVizElement = document.getElementById('globeViz'); | |
| const infoPanel = document.getElementById('info-panel'); | |
| // Define colors | |
| const tpuColor = '#00FFFF'; // Cyan | |
| const gpuColor = '#67ff94'; // Green | |
| const mixedColor = '#FFA500'; // Orange | |
| const defaultColor = '#FFFFFF'; // White (fallback) | |
| // List of substrings identifying GPU types in your data | |
| const gpuIdentifiers = ['H100', 'A100', 'L4', 'T4', 'V100', 'P100', 'P4']; | |
| // Function to determine point color based on accelerator types | |
| function getPointColor(data) { | |
| let hasTPU = false; | |
| let hasGPU = false; | |
| data.accelerators.forEach(accel => { | |
| if (accel.name.startsWith('TPU')) { | |
| hasTPU = true; | |
| } | |
| if (gpuIdentifiers.some(gpuId => accel.name.includes(gpuId))) { | |
| hasGPU = true; | |
| } | |
| }); | |
| if (hasTPU && hasGPU) return mixedColor; | |
| if (hasTPU) return tpuColor; | |
| if (hasGPU) return gpuColor; | |
| return defaultColor; | |
| } | |
| myGlobe(globeVizElement) | |
| .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg') | |
| .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') | |
| .pointsData(pointsData) | |
| .pointColor(d => getPointColor(d)) // Use the function for color | |
| .pointAltitude(0.01) | |
| .pointRadius(0.4) // Adjusted radius (make bigger or smaller as needed) | |
| .pointLabel(d => d.name) // Basic label on hover (can be improved) | |
| .onPointHover(d => { // Show enhanced info panel on hover | |
| globeVizElement.style.cursor = d ? 'pointer' : 'default'; // Change cursor on hover | |
| if (d) { | |
| const pointColor = getPointColor(d); // Get color for the hovered point | |
| infoPanel.style.display = 'block'; | |
| let accelHtml = '<ul>'; | |
| // Sort accelerators within the panel for consistency | |
| const sortedAccels = [...d.accelerators].sort((a, b) => a.name.localeCompare(b.name)); | |
| sortedAccels.forEach(accel => { | |
| // Join arrays for display if multiple entries were merged | |
| const regionStr = accel.regions.join(', '); | |
| const zoneStr = accel.zones.join('; '); | |
| const notesStr = accel.notes.length > 0 ? ` <i>(${accel.notes.join(', ')})</i>` : ''; | |
| accelHtml += `<li><b>${accel.name}</b> (${regionStr}: ${zoneStr})${notesStr}</li>`; | |
| }); | |
| accelHtml += '</ul>'; | |
| infoPanel.innerHTML = ` | |
| <div style="display: flex; align-items: center; margin-bottom: 5px;"> | |
| <span class="color-indicator" style="background-color: ${pointColor};"></span> | |
| <h4>${d.name}</h4> | |
| </div> | |
| ${accelHtml}`; | |
| } else { | |
| infoPanel.style.display = 'none'; // Hide if not hovering over a point | |
| } | |
| }); | |
| // Auto-rotate globe initially | |
| myGlobe.controls().autoRotate = true; | |
| myGlobe.controls().autoRotateSpeed = 0.2; | |
| // Stop auto-rotate on user interaction | |
| let userInteracted = false; | |
| const controls = myGlobe.controls(); | |
| controls.addEventListener('start', () => { | |
| if (!userInteracted) { | |
| controls.autoRotate = false; | |
| userInteracted = true; // Ensure auto-rotate stops permanently after first interaction | |
| console.log('Globe auto-rotation stopped.'); | |
| } | |
| }); | |
| // --- 3. Filter Implementation --- | |
| const filtersContainer = document.getElementById('accelerator-filters'); | |
| const filterCheckboxes = []; | |
| sortedAccelerators.forEach(accel => { | |
| const label = document.createElement('label'); | |
| const checkbox = document.createElement('input'); | |
| checkbox.type = 'checkbox'; | |
| checkbox.value = accel; | |
| checkbox.checked = true; // Start with all checked | |
| checkbox.addEventListener('change', updateFilters); | |
| label.appendChild(checkbox); | |
| label.appendChild(document.createTextNode(` ${accel}`)); | |
| filtersContainer.appendChild(label); | |
| filterCheckboxes.push(checkbox); | |
| }); | |
| function updateFilters() { | |
| const selectedAccelerators = new Set( // Use a Set for faster lookups | |
| filterCheckboxes | |
| .filter(cb => cb.checked) | |
| .map(cb => cb.value) | |
| ); | |
| if (selectedAccelerators.size === 0) { | |
| // If nothing is selected, show nothing | |
| myGlobe.pointsData([]); | |
| } else { | |
| const filteredPoints = pointsData.filter(location => { | |
| // Keep location if it has at least one of the selected accelerators | |
| return location.accelerators.some(accel => selectedAccelerators.has(accel.name)); | |
| }); | |
| myGlobe.pointsData(filteredPoints); // Update the globe | |
| } | |
| // Update info panel if it was visible for a point that is now filtered out | |
| if (infoPanel.style.display === 'block') { | |
| const currentHoverName = infoPanel.querySelector('h4')?.textContent; | |
| if (currentHoverName && !myGlobe.pointsData().some(p => p.name === currentHoverName)) { | |
| infoPanel.style.display = 'none'; | |
| } | |
| } | |
| } | |
| // Show/Hide All buttons | |
| document.getElementById('show-all').addEventListener('click', () => { | |
| filterCheckboxes.forEach(cb => cb.checked = true); | |
| updateFilters(); | |
| }); | |
| document.getElementById('hide-all').addEventListener('click', () => { | |
| filterCheckboxes.forEach(cb => cb.checked = false); | |
| updateFilters(); | |
| }); | |
| // --- 4. Initial Setup & Resize --- | |
| // Optional: Center the view on a specific point initially | |
| // myGlobe.pointOfView({ lat: 20, lng: 0, altitude: 2.5 }, 1000); // Example: Atlantic view | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| myGlobe.width(window.innerWidth); | |
| myGlobe.height(window.innerHeight); | |
| }); | |
| // Initial filter application in case some start unchecked (though they don't here) | |
| updateFilters(); | |
| </script> | |
| </body> | |
| </html> |