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 (keep as is) | |
| const rawData = [ | |
| // ... (Your full rawData array remains here) ... | |
| { 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 (keep as is) | |
| const locationsCoords = { | |
| // ... (Your full locationsCoords object remains here) ... | |
| "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 } | |
| }; | |
| // Define colors and identifiers (keep as is) | |
| const tpuColor = '#00FFFF'; // Cyan | |
| const gpuColor = '#67ff94'; // Green | |
| const defaultColor = '#FFFFFF'; // White (fallback for errors) | |
| const gpuIdentifiers = ['H100', 'A100', 'L4', 'T4', 'V100', 'P100', 'P4']; | |
| // --- Data Aggregation (Intermediate Step) --- | |
| const locationsAggregated = {}; | |
| 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; | |
| } | |
| if (!locationsAggregated[locName]) { | |
| locationsAggregated[locName] = { | |
| name: locName, | |
| lat: locationsCoords[locName].lat, | |
| lng: locationsCoords[locName].lng, | |
| accelerators: [], // Store full details here | |
| hasTPU: false, | |
| hasGPU: false | |
| }; | |
| } | |
| // Add accelerator details (simplified - assumes unique accel names per location from source) | |
| locationsAggregated[locName].accelerators.push({ | |
| name: item.accel, | |
| region: item.region, | |
| zones: item.zones, | |
| notes: item.notes || '' | |
| }); | |
| uniqueAccelerators.add(item.accel); | |
| // Check type for the location | |
| if (item.accel.startsWith('TPU')) { | |
| locationsAggregated[locName].hasTPU = true; | |
| } | |
| if (gpuIdentifiers.some(gpuId => item.accel.includes(gpuId))) { | |
| locationsAggregated[locName].hasGPU = true; | |
| } | |
| }); | |
| // --- *** NEW: Create Final pointsData with Offset for Mixed Locations *** --- | |
| const pointsData = []; | |
| const locationOffset = 0.3; // Degrees latitude offset - adjust as needed | |
| Object.values(locationsAggregated).forEach(loc => { | |
| if (loc.hasTPU && loc.hasGPU) { | |
| // Location has BOTH: Create two points with offset | |
| pointsData.push({ | |
| ...loc, // Spread operator copies name, original lat/lng, full accelerators list | |
| lat: loc.lat + locationOffset, // Offset TPU marker slightly North | |
| lng: loc.lng, | |
| markerType: 'TPU', // Tag for coloring and identification | |
| displayName: `${loc.name} (TPU)`, // Name for label/hover | |
| }); | |
| pointsData.push({ | |
| ...loc, // Spread operator copies name, original lat/lng, full accelerators list | |
| lat: loc.lat - locationOffset, // Offset GPU marker slightly South | |
| lng: loc.lng, | |
| markerType: 'GPU', // Tag for coloring and identification | |
| displayName: `${loc.name} (GPU)`, // Name for label/hover | |
| }); | |
| } else if (loc.hasTPU) { | |
| // Location has ONLY TPU | |
| pointsData.push({ | |
| ...loc, | |
| markerType: 'TPU', | |
| displayName: loc.name, // No suffix needed | |
| }); | |
| } else if (loc.hasGPU) { | |
| // Location has ONLY GPU | |
| pointsData.push({ | |
| ...loc, | |
| markerType: 'GPU', | |
| displayName: loc.name, // No suffix needed | |
| }); | |
| } | |
| // Note: Locations with neither (if data errors existed) would be skipped here | |
| }); | |
| // Sort accelerator names for filter list (keep as is) | |
| const sortedAccelerators = Array.from(uniqueAccelerators).sort(); | |
| // --- 2. Globe Initialization & Configuration --- | |
| const myGlobe = Globe(); | |
| const globeVizElement = document.getElementById('globeViz'); | |
| const infoPanel = document.getElementById('info-panel'); | |
| myGlobe(globeVizElement) | |
| .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg') | |
| .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') | |
| .pointsData(pointsData) // Use the NEW pointsData with potential duplicates/offsets | |
| .pointColor(d => { // --- MODIFIED: Color based on markerType --- | |
| switch (d.markerType) { | |
| case 'TPU': return tpuColor; | |
| case 'GPU': return gpuColor; | |
| default: return defaultColor; // Fallback | |
| } | |
| }) | |
| .pointAltitude(0.03) | |
| .pointRadius(0.45) // Adjust radius if needed (maybe slightly smaller if points are close) | |
| .pointLabel(d => d.displayName) // Use displayName for labels | |
| .onPointHover(d => { // --- MODIFIED: Use displayName and correct color --- | |
| globeVizElement.style.cursor = d ? 'pointer' : 'default'; | |
| if (d) { | |
| // Determine color based on the markerType of the hovered point | |
| const pointColor = d.markerType === 'TPU' ? tpuColor : (d.markerType === 'GPU' ? gpuColor : defaultColor); | |
| infoPanel.style.display = 'block'; | |
| let accelHtml = '<ul>'; | |
| // Sort the FULL accelerator list for the original location | |
| const sortedAccels = [...d.accelerators].sort((a, b) => a.name.localeCompare(b.name)); | |
| sortedAccels.forEach(accel => { | |
| // Display region/zone/notes as before | |
| const notesStr = accel.notes ? ` <i>(${accel.notes})</i>` : ''; | |
| accelHtml += `<li><b>${accel.name}</b> (${accel.region}: ${accel.zones})${notesStr}</li>`; | |
| }); | |
| accelHtml += '</ul>'; | |
| // Use displayName in the panel title | |
| infoPanel.innerHTML = ` | |
| <div style="display: flex; align-items: center; margin-bottom: 5px;"> | |
| <span class="color-indicator" style="background-color: ${pointColor};"></span> | |
| <h4>${d.displayName}</h4> | |
| </div> | |
| <div style="font-size: 0.9em; color: #ccc; margin-bottom: 5px;">(Showing all accelerators for ${d.name})</div> | |
| ${accelHtml}`; | |
| } else { | |
| infoPanel.style.display = 'none'; | |
| } | |
| }); | |
| // Auto-rotate globe (keep as is) | |
| myGlobe.controls().autoRotate = true; | |
| myGlobe.controls().autoRotateSpeed = 0.2; | |
| // Stop auto-rotate on user interaction (keep as is) | |
| let userInteracted = false; | |
| const controls = myGlobe.controls(); | |
| controls.addEventListener('start', () => { | |
| if (!userInteracted) { | |
| controls.autoRotate = false; | |
| userInteracted = true; | |
| 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; | |
| checkbox.addEventListener('change', updateFilters); | |
| label.appendChild(checkbox); | |
| label.appendChild(document.createTextNode(` ${accel}`)); | |
| filtersContainer.appendChild(label); | |
| filterCheckboxes.push(checkbox); | |
| }); | |
| function updateFilters() { | |
| const selectedAccelerators = new Set( | |
| filterCheckboxes | |
| .filter(cb => cb.checked) | |
| .map(cb => cb.value) | |
| ); | |
| let filteredPoints = []; | |
| if (selectedAccelerators.size > 0) { | |
| // Filter the pointsData array (which contains potentially duplicated/offset points) | |
| filteredPoints = pointsData.filter(point => { | |
| // Check if *any* accelerator associated with this point's original location | |
| // is in the selected set. | |
| const hasSelectedAccelerator = point.accelerators.some(accel => selectedAccelerators.has(accel.name)); | |
| if (!hasSelectedAccelerator) { | |
| return false; // If none of the location's accelerators are selected, hide this point. | |
| } | |
| // Further refine: only show the point if its *specific type* (TPU/GPU) | |
| // corresponds to a selected accelerator *of that type*. | |
| const isTPUMarker = point.markerType === 'TPU'; | |
| const isGPUMarker = point.markerType === 'GPU'; | |
| let typeIsSelected = false; | |
| if (isTPUMarker) { | |
| typeIsSelected = point.accelerators.some(accel => accel.name.startsWith('TPU') && selectedAccelerators.has(accel.name)); | |
| } else if (isGPUMarker) { | |
| typeIsSelected = point.accelerators.some(accel => gpuIdentifiers.some(gid => accel.name.includes(gid)) && selectedAccelerators.has(accel.name)); | |
| } else { | |
| typeIsSelected = true; // Should not happen with current data structure | |
| } | |
| return typeIsSelected; // Show the point only if its specific type is represented in the selection | |
| }); | |
| } | |
| myGlobe.pointsData(filteredPoints); // Update the globe | |
| // Update info panel visibility (keep as is) | |
| if (infoPanel.style.display === 'block') { | |
| const currentHoverName = infoPanel.querySelector('h4')?.textContent; | |
| // Check against displayName now | |
| if (currentHoverName && !myGlobe.pointsData().some(p => p.displayName === currentHoverName)) { | |
| infoPanel.style.display = 'none'; | |
| } | |
| } | |
| } | |
| // Show/Hide All buttons (keep as is) | |
| 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 --- (keep as is) | |
| window.addEventListener('resize', () => { | |
| myGlobe.width(window.innerWidth); | |
| myGlobe.height(window.innerHeight); | |
| }); | |
| updateFilters(); // Initial application | |
| </script> | |
| </body> | |
| </html> |