script.js

const infoPanel = document.getElementById('info');
const globeEl = document.getElementById('globe');

const intensityColor = level => {
  if (level === 'high') return '#ff8e72';
  if (level === 'mid') return '#ffd166';
  return '#4cc9f0';
};

const renderInfo = country => {
  infoPanel.innerHTML = `
    <h2>${country.country}</h2>
    <p>${country.summary}</p>
    <div class="meta">
      <div><strong>主要提供方：</strong>${country.providers.join(' / ')}</div>
      <div><strong>重点行业：</strong>${country.industries.join(' / ')}</div>
      <div><strong>生态亮点：</strong>${country.highlights}</div>
    </div>
    <ul class="tags">${country.tags.map(tag => `<li>${tag}</li>`).join('')}</ul>
  `;
};

const initGlobe = async () => {
  const response = await fetch('data/gpt2024.json');
  const countries = await response.json();

  const world = Globe()
    .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-dark.jpg')
    .bumpImageUrl('https://unpkg.com/three-globe/example/img/earth-topology.png')
    .backgroundColor('rgba(0,0,0,0)')
    .pointOfView({ lat: 20, lng: 10, altitude: 2.4 })
    .pointLat('lat')
    .pointLng('lng')
    .pointAltitude(d => 0.04 + d.models * 0.004)
    .pointColor(d => intensityColor(d.intensity))
    .pointRadius(0.6)
    .pointLabel(d => `${d.country}: ${d.models} 个主流 GPT`)
    .onPointClick(renderInfo);

  world(globeEl).pointsData(countries);
};

initGlobe();