JSFiddle - React, Tailwind, and code Playground

by neptune001

HTML

<div ng-app="HashStats">

<h2>Word cloud</h2>

    <div ng-controller="WordController">
{{filecontent.word_count}}
        <hr/>
<form name="hideKeyword">
  <label>Hide main keyword '{{mainkeyword}}':
    <input type="checkbox" ng-model="hidekw">
  </label>
 </form>
<hr/>
<div>
    <span ng-repeat="(key, data) in words">
    <span style="font-size: {{10 + (data-1)*(90/(max-2))}}px">{{key}}</span> ({{data}}) - 
    </span>
</div>
    </div>
</div>

JavaScript

var app = angular.module('HashStats', []);
    

app.controller('WordController', function ($scope) {
    var str = '{"meta":{"keyword":"lol","numtweets":344,"start":1447069566,"end":1447069577},"word_count":{"gonna":3,"lol":114,"wouldn":2,"know":6,"lowkey":2}}';
    $scope.filecontent = JSON.parse(str);


    $scope.hidekw = false;

    $scope.words = $scope.filecontent.word_count;
    $scope.mainkeyword = $scope.filecontent.meta.keyword;
    var mainvalue = $scope.words[$scope.mainkeyword];     
    $scope.$watch('hidekw', function () {
        if ($scope.hidekw == true) {
            delete $scope.words[$scope.mainkeyword]; 
            $scope.max = Math.max.apply(null, Object.keys($scope.words).map(function(key) { return $scope.words[key]; }));
        } else {
            $scope.words[$scope.mainkeyword] = mainvalue;
            $scope.max = Math.max.apply(null, Object.keys($scope.words).map(function(key) { return $scope.words[key]; }));
        }
    }); 

});