angular-d3-word-cloud

angular-d3-word-cloud

Run examples with server

$ npm install
$ npm run test
$ npm run dev //default server port is 8000
$ npm run release //build release files

Dependencies

• angular.js
• d3.js
• d3.layout.cloud.js

Demo

Watch the wordcloud component in action on the demo page.

How to use

Install

bower

$ 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

npm

$ npm install angular-d3-word-cloud

Inject scripts

Add dependencies to the section of your index html:

<meta charset="utf-8">  <!-- it's important for d3.js -->
<script src="[bower_components/node_modules]/angular/angular.min.js"></script>
<script src="[bower_components/node_modules]/d3/d3.min.js"></script>
<script src="[bower_components/node_modules]/d3-cloud/build/d3.layout.cloud.js"></script>
<script src="[bower_components/node_modules]/angular-d3-word-cloud/dist/angular-word-cloud.min.js"></script>

Options

Note: if words element not contains color property, default will use d3 schemeCategory20

• words=[array] -> [{text: '',size: 0, color: '#6d989e', tooltipText: ''}]
• height=[number]
• width=[number]
• padding=[number] -> [optional] padding for each word, defaults to 5
• rotate=[number, function] -> [optional] rotation for each word, default to ~~(Math.random() * 2) * 60
• random=[function] -> [optional] default to Math.random, If specified, sets the internal random number generator, used for selecting the initial position of each word, and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range [0, 1).
• use-tooltip=[boolean] default tooltip template
• use-transition=[boolean] transition with font size
• on-click=[function] -> word clicked callback

Directive Usage

<div id="wordsCloud">
   <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="5" rotate="appCtrl.rotate" use-tooltip="appCtrl.useTooltip"  random="appCtrl.random" use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked">
   </word-cloud>
</div>

Basic 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('#wordsCloud')[0].offsetWidth;
		self.wordClicked = wordClicked;
        self.rotate = rotate;
        self.useTooltip = true;
        self.useTransition = false;
		self.words = [
			{text: 'Angular',size: 25, color: '#6d989e', tooltipText: 'Angular Tooltip'},
			{text: 'Angular2',size: 35, color: '#473fa3', tooltipText: 'Angular2 Tooltip'}
        ]
        self.random = random;

        function random() {
            return 0.4; // a constant value here will ensure the word position is fixed upon each page refresh.
        }

        function rotate() {
            return ~~(Math.random() * 2) * 90;
        }

		function wordClicked(word){
			alert('text: ' + word.text + ',size: ' + word.size);
		}
	}
})()

Advanced 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;
     })

Font size calculations

	 var element = document.getElementById('wordsCloud');
     var height = $window.innerHeight * 0.75;
     element.style.height = height + 'px';
     var width = element.getBoundingClientRect().width;
     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: '#473fa3'//you can assign custom color
         }
     })
     self.width = width;
     self.height = height;

References

• Word Cloud Layout by Jason Davies.
• D3.js