Wordcloud animation

by kzoon

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/wordcloud.js"></script>
<div id="container"></div>
<button id="button" class="autocompare">Set new data</button>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto
}

JavaScript

/**
 * archimedeanSpiral - Gives a set of cordinates for an Archimedian Spiral.
 *
 * @param {number} t How far along the spiral we have traversed.
 * @return {object} Resulting coordinates, x and y.
 */
var archimedeanSpiral = function archimedeanSpiral(t) {
  t *= 0.1;
  return {
    x: t * Math.cos(t),
    y: t * Math.sin(t)
  };
};
Highcharts.seriesTypes.wordcloud.prototype.spirals.archimedean = archimedeanSpiral;


var data = [{
  "name": "creative",
  "weight": 25
}, {
  "name": "more",
  "weight": 12
}, {
  "name": "thinking",
  "weight": 11
}, {
  "name": "been",
  "weight": 11
}, {
  "name": "individual",
  "weight": 10
}, {
  "name": "work",
  "weight": 8
}, {
  "name": "cognitive",
  "weight": 8
}, {
  "name": "team",
  "weight": 8
}, {
  "name": "divergent",
  "weight": 8
}, {
  "name": "tests",
  "weight": 8
}, {
  "name": "study",
  "weight": 8
}, {
  "name": "malevolent",
  "weight": 7
}, {
  "name": "most",
  "weight": 7
}, {
  "name": "frontal",
  "weight": 6
}, {
  "name": "related",
  "weight": 6
}, {
  "name": "proposed",
  "weight": 1
}, {
  "name": "lobe",
  "weight": 6
}, {
  "name": "participants",
  "weight": 6
}, {
  "name": "according",
  "weight": 6
}, {
  "name": "key",
  "weight": 6
}, {
  "name": "century",
  "weight": 6
}, {
  "name": "type",
  "weight": 6
}, {
  "name": "skills",
  "weight": 6
}, {
  "name": "relationship",
  "weight": 6
}, {
  "name": "will",
  "weight": 6
}, {
  "name": "environment",
  "weight": 6
}, {
  "name": "time",
  "weight": 6
}, {
  "name": "view",
  "weight": 6
}, {
  "name": "create",
  "weight": 6
}, {
  "name": "worldview",
  "weight": 6
}, {
  "name": "processing",
  "weight": 6
}, {
  "name": "seen",
  "weight": 6
}, {
  "name": "MySize four",
  "weight": 4
}, {
  "name": "MySize two",
  "weight": 2
}, {
  "name": "MySize one",
  "weight": 1
}];

var data2 = [{
  "name": "creative",
  "weight": 5
}, {
  "name": "more",
  "weight": 12
}, {
  "name": "thinking",
  "weight": 11
}, {
  "name":...