Interactive Tag Cloud

$(document).ready(function() {
  var tags = $('.tag-cloud-hidden li').sort(function(a, b) {
    return $(b).find('a').data('tag-cloud') - $(a).find('a').data('tag-cloud');
  });

  var seed = $('.tag-cloud-hidden ul').length; // seed based on the number of <ul> elements
  var sumtagvalues = 0; // initialize sum of tag values

  // calculate the sum of all tag values for scalefactor
  tags.each(function() {
    sumtagvalues += parseFloat($(this).find('a').data('tag-cloud'));
  });

  function random() {
    var x = Math.sin(seed++) * 10000;
    return x - Math.floor(x);
  }

  function shuffle(array) {
    let currentindex = array.length, randomindex;

    // while there remain elements to shuffle.
    while (currentindex !== 0) {

      // pick a remaining element.
      randomindex = Math.floor(random() * currentindex);
      currentindex--;
      // and swap it with the current element.
      [array[currentindex], array[randomindex]] = [
        array[randomindex], array[currentindex]];
    }
    return array;
  }

  // define the color palette
  var colors = [
    "#0083b3", "#005f7f", "#00a6d9", "#007a99",
    "#009ec3", "#004d66", "#00bfff", "#606060",
    "#707070", "#505050"
  ];

  // shuffle the sorted tags using the pseudo-random shuffle function
  var shuffledtags = shuffle(Array.from(tags));

  // generate a color array of the same length as shuffledtags
  var colorarray = shuffledtags.map(function() {
    return colors[math.floor(random() * colors.length)];
  });

  // shuffle the color array for extra randomness
  var shuffledcolors = shuffle(colorarray);

  // append shuffled tags to the visible .tag-cloud div
  $('.tag-cloud').append('<ul></ul>');
  $(shuffledtags).each(function(index) {
    // assign the color to the corresponding tag
    $(this).find('a').css('color', shuffledcolors[index]);

    $('.tag-cloud ul').append(this);

    // adjust font size based on data-tag-cloud value and sum of all tag values
    var tagvalue = $(this).find('a').data('tag-cloud');
    var scalefactor = sumtagvalues; // use sum of tag values as scalefactor
    var isMobile = window.innerWidth <= 768;
    var multiplier = isMobile ? 3.5 : 5;
    var fontsize = 1 + multiplier * (tagvalue / scalefactor); // calculate font size
    $(this).find('a').css('font-size', `${fontsize}em`); // apply calculated font size
  });

  // remove the original hidden tag cloud
  $('.tag-cloud-hidden').remove();
});
          

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 25%; /* Minimum starting width */
  max-width: 60%; /* Allow it to grow up to the full container width if needed */
  margin: 0 auto; /* Center the tag cloud */
  padding: 20px; /* Add some padding to ensure content does not touch the edges */
  border-radius: 70%; /* Create an elliptical shape */
}

/* Modern range context notation */
@media (width <= 768px) {
  .tag-cloud {
    min-width: 25%; /* Full width on mobile */
    max-width: 85%; /* Ensure it doesn't exceed the viewport width */
    border-radius: 50%; /* Create an elliptical shape */
  }
}

.tag-cloud a {
  display: inline-block;
  margin: 2px;
  text-decoration: none; /* Remove underline */
  color: inherit; /* Makes the link color the same as the surrounding text */
  background: none; /* No background */
  border: none; /* No border */
}

/* Remove bullet points and default list padding/margin */
.tag-cloud ul {
  list-style-type: none;
  padding: 0;
  margin: 0 auto; /* Center the list inside the tag cloud */
  text-align: center; /* Center align list items */
}

/* Style for individual tags */
.tag-cloud li {
  display: inline-block; /* Display tags inline-block for better control */
  margin: 5px; /* Adjust spacing around tags */
}

.tag-cloud a:hover {
  transform: scale(1.2); /* Scale up the text by 10% on hover */
  transition: transform 0.3s ease, text-shadow 0.3s ease; /* Smooth transition for scale and text shadow */
}