sad.js

const generateMalwareMapPins = () => {
  const malwareMapData = document.querySelector('.malware-map__data');
  const malwareMapDataAsJSON = malwareMapData.dataset.malwareMapData;
  const malwareMapDataAsArray = JSON.parse(malwareMapDataAsJSON);
  const sortedMalwareMapData = malwareMapDataAsArray.sort((malwareMapDataItem1, malwareMapDataItem2) => {
    return malwareMapDataItem1.countryName < malwareMapDataItem2.countryName ? -1 : 1;
  });

  if (malwareMapDataAsArray.length > 0) {
    const malwareMapWrapper = document.querySelector('.malware-map__map-wrapper');

    malwareMapDataAsArray.forEach((malwareMapPinData, index, array) => {
      const malwareMapPinWrapper = document.createElement('div');
      malwareMapPinWrapper.classList.add('malware-map__pin-wrapper');
      malwareMapPinWrapper.style.cssText = `top: ${malwareMapPinData.positionTop}%; left: ${malwareMapPinData.positionLeft}%;`;
      malwareMapPinWrapper.dataset.index = index;

      const malwareMapPin = document.createElement('div');
      malwareMapPin.classList.add('malware-map__pin');
      malwareMapPin.dataset.index = index;
      malwareMapPinWrapper.appendChild(malwareMapPin);

      const malwareMapPinPulse = document.createElement('div');
      malwareMapPinPulse.classList.add('malware-map__pin-pulse');
      malwareMapPinWrapper.appendChild(malwareMapPinPulse);

      const malwareMapPinPopup = document.createElement('div');
      malwareMapPinPopup.classList.add('malware-map__pin-popup');
      malwareMapPinWrapper.appendChild(malwareMapPinPopup);

      const malwareMapPinPopupCountry = document.createElement('h3');
      malwareMapPinPopupCountry.classList.add('malware-map__pin-popup-country');
      malwareMapPinPopupCountry.textContent = malwareMapPinData.countryName;
      malwareMapPinPopup.appendChild(malwareMapPinPopupCountry);

      if (!!malwareMapPinData.fraudulentTransactions) {
        const fraudulentTransactionsSection = document.createElement('div');
        fraudulentTransactionsSection.classList.add('malware-map__pin-popup-section');
        fraudulentTransactionsSection.innerHTML = `
          <span class="malware-map__pin-popup-section-name">Fraudulent transactions</span>
          <span class="malware-map__pin-popup-section-value">${malwareMapPinData.fraudulentTransactions}%</span>
        `;
        malwareMapPinPopup.appendChild(fraudulentTransactionsSection);
      }

      if (!!malwareMapPinData.gbConsumedByUser) {
        const gbConsumedByUserSection = document.createElement('div');
        gbConsumedByUserSection.classList.add('malware-map__pin-popup-section');
        gbConsumedByUserSection.innerHTML = `
          <span class="malware-map__pin-popup-section-name">Data consumed by malware/user</span>
          <span class="malware-map__pin-popup-section-value">${malwareMapPinData.gbConsumedByUser} GB</span>
        `;
        malwareMapPinPopup.appendChild(gbConsumedByUserSection);
      }

      if (!!malwareMapPinData.malwareInfectedUsers) {
        const malwareInfectedUsersSection = document.createElement('div');
        malwareInfectedUsersSection.classList.add('malware-map__pin-popup-section');
        malwareInfectedUsersSection.innerHTML = `
          <span class="malware-map__pin-popup-section-name">Malware infected users</span>
          <span class="malware-map__pin-popup-section-value">${malwareMapPinData.malwareInfectedUsers}</span>
        `;
        malwareMapPinPopup.appendChild(malwareInfectedUsersSection);
      }

      if (!!malwareMapPinData.lessRevenue) {
        const lessRevenueSection = document.createElement('div');
        lessRevenueSection.classList.add('malware-map__pin-popup-section');
        lessRevenueSection.innerHTML = `
          <span class="malware-map__pin-popup-section-name">Less revenue</span>
          <span class="malware-map__pin-popup-section-value">${malwareMapPinData.lessRevenue}€</span>
        `;
        malwareMapPinPopup.appendChild(lessRevenueSection);
      }

      malwareMapWrapper.appendChild(malwareMapPinWrapper);

      const malwareMapOutsidePinPopup = malwareMapPinPopup.cloneNode(true);
      malwareMapOutsidePinPopup.dataset.index = index;
      malwareMapOutsidePinPopup.classList.add('malware-map__pin-popup_outside');
      malwareMapWrapper.appendChild(malwareMapOutsidePinPopup);

      setTimeout(() => {
        malwareMapPinWrapper.classList.add('malware-map__pin-wrapper_pulse');

        setTimeout(() => {
          malwareMapPinPulse.classList.add('malware-map__pin-pulse_hidden');
        }, 1500);

        setInterval(() => {
          if (malwareMapPinPulse.classList.contains('malware-map__pin-pulse_hidden')) {
            malwareMapPinPulse.classList.remove('malware-map__pin-pulse_hidden');

            setTimeout(() => {
              malwareMapPinPulse.classList.add('malware-map__pin-pulse_hidden');
            }, 1500);
          }
        }, array.length * 1500);
      }, index * 1500);
    });
  }
};