Hexed polygon is too slow to render up.

[sourabpramanik]

Describe the bug I am using the hexed polygon example and modified it a bit but for some reason, it is prolonged to render in the browser and the browser may crash sometimes. On safari, it always crashes. What am I doing wrong?

import { countries as data } from "./countries.js";
import { handleGlobeClick } from "./index.js";

const colorScale = d3.scaleSequentialSqrt(
  d3.interpolateRgbBasis(["#C3CABD", "#F6F1D1", "#70A9A1", "#40798C"])
);

// GDP per capita (avoiding countries with small pop)
const getVal = (feat) =>
  feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);

let canvasWidth = window.innerWidth/2;
if(window.innerWidth<=768){
  canvasWidth=window.innerWidth*0.8;
}

fetch("./dataset.geojson")
  .then((res) => res.json())
  .then((countries) => {
    const maxVal = Math.max(...countries.features.map(getVal));

    colorScale.domain([0, maxVal]);

    const world = Globe()
      .globeImageUrl("/static/images/globe-texture.png")
      .backgroundColor("#ffffff00")
      .lineHoverPrecision(0)
      .polygonsData(
        countries.features.filter((d) => d.properties.ISO_A2 !== "AQ")
      )
      .polygonAltitude(0.06)
      .polygonCapColor((feat) => colorScale(getVal(feat)))
      .polygonSideColor(() => "rgba(0, 6, 17, 0)")
      .polygonStrokeColor(() => "#111")
      .polygonLabel(
        ({ properties: d }) => `
  <h4 class="label">${d.ADMIN}</h4>
`
      )
      .onPolygonClick((d1) => {
        const value = data.find(
          (d2) => d1.properties.ISO_A2.toLowerCase() === d2.code
        );
        if (value) {
          handleGlobeClick(value.country, value.code, value.flag);
          document.getElementById("compare-section").scrollIntoView({
            behavior: "smooth",
          });
        }
      })
      .onPolygonHover((hoverD) =>
        world.polygonAltitude((d) => (d === hoverD ? 0.12 : 0.06))
      )
      .polygonsTransitionDuration(300)(document.getElementById("globe"))
      .pointOfView({ altitude: 2 })
      .width(canvasWidth)
      .height(window.innerHeight * 0.8);

    world.onGlobeReady(() => {
      document.querySelector(".loading").classList.add("hide");
      world.controls().autoRotate = true;
      world.controls().autoRotateSpeed = 1.8;
      // world.controls().enableZoom = false;
      setTimeout(() => {
        world.controls().autoRotate = false;
        world.controls().autoRotateSpeed = 0;
      }, 7000);
    });

  });

To Reproduce Steps to reproduce the behavior: NONE

Expected behavior It should be loading up as fast as the example does.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: [e.g. 22]

Smartphone (please complete the following information):

• Device: All
• OS: All
• Browser: All
• Version: [e.g. 22]

Additional context Add any other context about the problem here.