Dependencies

How to use

Bower install
$ bower install angular-d3-word-cloud

angular.js, d3.js, d3.layout.cloud.js would be install as dependencies auto. If it won't for some error, install it manually.

$ bower install angular
$ bower install d3
$ bower install d3-cloud
Add dependencies to the section of your index html:
<meta charset="utf-8">  <!-- it's important for d3.js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/d3-cloud/build/d3.layout.cloud.js"></script>
<script src="bower_components/angular-d3-word-cloud/dist/angular-word-cloud.min.js"></script>

Options

Directive Usage

<div id="wordsCloud">
   <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height"
         padding="10" on-click="appCtrl.wordClicked">
   </word-cloud>
</div>

Base usage

Inject angular-d3-word-cloud into angular module, set up some options to our controller

    (function(){
    angular.module('app',['angular-d3-word-cloud'])
        .controller('appController',['$window','$element',appController])
    function appController($window,$element){
        var self = this;
        self.height = $window.innerHeight * 0.5;
        self.width = $element.find('word-cloud')[0].offsetWidth;
        self.wordClicked = wordClicked;
        self.words = [
            {text: 'Angular',size: 25,color: '#0e6632'},
            {text: 'Angular2',size: 35,color: '#0e558'}
        ]

        function wordClicked(word){
            alert(word);
        }
    }
})()

Example

Padding:

Custom words color:

Advance usage

Define some content and split(/\s+/g)

    var content = 'Angular Angular2 Angular3 Express Nodejs';
    originWords = self.content.split(/\s+/g);
    originWords = originWords.map(function(word) {
        return {
            text: word,
            count: Math.floor(Math.random() * maxWordCount)
        }
     }).sort(function(a, b) {
          return b.count - a.count;
     })

Compute word size

     var element = $element.find('#wordsCloud');
     var height = $window.innerHeight * 0.75;
     element.height(height);
     var width = element[0].offsetWidth;
     var maxCount = originWords[0].count;
     var minCount = originWords[originWords.length - 1].count;
     var maxWordSize = width * 0.15;
     var minWordSize = maxWordSize / 5;
     var spread = maxCount - minCount;
     if (spread <= 0) spread = 1;
     var step = (maxWordSize - minWordSize) / spread;
     self.words = originWords.map(function(word) {
         return {
             text: word.text,
             size: Math.round(maxWordSize - ((maxCount - word.count) * step)),
             color: self.customColor
         }
     })
     self.width = width;
     self.height = height;