example/population-heatmap/index.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/aframe"></script>
  <script src="//unpkg.com/@ar-js-org/ar.js"></script>

  <script src="//unpkg.com/globe-ar"></script>
  <!--<script src="../../dist/globe-ar.js"></script>-->
</head>

<body>
  <div id="globeViz"></div>

  <script type="module">
    import { csvParse } from 'https://esm.sh/d3-dsv';

    const world = new GlobeAR(document.getElementById('globeViz'))
      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
      .heatmapPointLat('lat')
      .heatmapPointLng('lng')
      .heatmapPointWeight('pop')
      .heatmapBandwidth(0.9)
      .heatmapColorSaturation(2.8);

    fetch('../datasets/world_population.csv').then(res => res.text())
      .then(csv => csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
      .then(data => world.heatmapsData([data]));

  </script>
</body>