Word Cloud VIsualisation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3.layout.cloud.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = 700, height = 400, sizeAdjustment = 100,minFontSize = 12, largestWordSize = 0, smallestWordSize = 10000, terms = [], minSize=1000, maxSize=-1;

var svg = d3.select("body")
    .append("svg")
    .attr('class', 'cirrusGraph')
    .attr("width", width)
    .attr("height", height);

var vis = svg.append('g').attr('transform', `translate(${width/2},${height/2})`);

var colorScale = d3.scaleOrdinal(d3.schemeCategory20c);
    
    function draw(words, bounds){
      var scale = bounds ? Math.min(
        width / Math.abs(bounds[1].x - width / 2),
        width / Math.abs(bounds[0].x - width / 2),
        height / Math.abs(bounds[1].y - height / 2),
        height / Math.abs(bounds[0].y - height / 2)
      ) / 2 : 1;

var t = d3.transition().duration(1000);

var nodes = vis.selectAll('text')
      .data(words, function(d) {return d.text;});

nodes.exit().transition(t)
        .style('font-size', '1px')
        .remove();

var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

vis.transition(t).attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + scale + ')');

}
    d3.json('terms.json', (err, data) => {
      terms = data;
      sketchWordCloud();
    });

function sketchWordCloud(){
      setWordSizeExtent();
      setRelativeSizes();
      setAdjustedSizes();
      //console.log(terms);
      layout.words(terms).start();
    }
    function setWordSizeExtent(){
      var extents = d3.extent(terms, d => d.rawFreq);
      minSize = extents[0];
      maxSize = extents[1];
      largestWordSize = maxSize;
      smallestWordSize = minSize;
    }

function map(value, istart, istop, ostart, ostop) {
      return ostart + 
        (ostop - ostart) *
        ((value - istart) / (istop - istart));
    }

function setAdjustedSizes() {
      calculateSizeAdjustment();

if (terms !== undefined) {
        for (var i = 0; i < terms.length; i++) {
          var term = terms[i];
          var adjustedSize = findNewRelativeSize(term);
          term.fontSize = adjustedSize > minFontSize ? adjustedSize : minFontSize;
        }
      }
    }

function calculateWordArea(word) {
      var baseSize = Math.log(word.relativeSize * 10) * Math.LOG10E; 
      var height = (baseSize + word.relativeSize) / 2; 
      var width = 0; 
      for (var i = 0; i < word.text.length; i++ ) {
        var letter = word.text.charAt(i);
        if (letter == 'f' || letter == 'i' || letter == 'j' || letter == 'l' || letter == 'r' || letter == 't') width += baseSize / 3;
        else if (letter == 'm' || letter == 'w') width += baseSize / (4 / 3);
        else width += baseSize / 1.9;
      }
      var wordArea = height * width;
      return wordArea;
    }

function findNewRelativeSize(word) {
      var areaMultiplier = sizeAdjustment
      var area = calculateWordArea(word) * areaMultiplier;
      
      var newRelativeSize = (Math.sqrt(6) * Math.sqrt(6 * Math.pow(word.text.length, 2) + area * word.text.length) - 6 * word.text.length) / (2 * word.text.length);
      return newRelativeSize;
    }

setTimeout(function(){
  var newTerms = [{
    "text": "revenues",
    "rawFreq": 117
  },
  {
    "text": "statement",
    "rawFreq": 115
  },
  {
    "text": "ra",
    "rawFreq": 113
  },
  {
    "text": "01",
    "rawFreq": 109
  },
  {
    "text": "annual",
    "rawFreq": 108
  }];
  newTerms.forEach(item => {
    terms.push(item);
  });
  sketchWordCloud();
},5000);
     
  </script>
</body>

https://d3js.org/d3.v4.min.js