<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://rawgit.com/buberdds/angular-bootstrap-colorpicker/master/css/colorpicker.min.css">
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="d3@3.3.13" data-semver="3.3.13" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.js"></script>
<script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<script src="https://rawgit.com/buberdds/angular-bootstrap-colorpicker/master/js/bootstrap-colorpicker-module.min.js"></script>
<script src="https://rawgit.com/weihanchen/angular-d3-word-cloud/master/dist/angular-word-cloud.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appController as appCtrl">
<textarea class="form-control" rows="5" cols="80" placeholder="Please input some content..." ng-model="appCtrl.content">> </textarea>
<p></p>
Custom color: <input colorpicker type="text" ng-model="appCtrl.customColor" placeholder="Picker me..." />
<p></p>
<button class="btn-sm" ng-click="appCtrl.generateWords()">
<i class="fa fa-cloud" aria-hidden="true"></i> Generate
</button>
<div id="wordsCloud">
<word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" on-click="appCtrl.wordClicked"></word-cloud>
</div>
</body>
</html>
(function () {
angular.module('app',['angular-d3-word-cloud', 'colorpicker.module'])
.controller('appController',['$window', '$element', '$timeout',appController])
function appController($window, $element, $timeout) {
var originWords = [];
var maxWordCount = 1000;
var self = this;
self.content = 'If you prefer to not use the automatic generator, push a branch named gh-pages to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator GitHub username to generate a link to their profile';
self.customColor='';
self.generateWords = generateWords;
self.wordClicked = wordClicked;
self.words = [];
generateWords();
angular.element($window).bind('resize', resizeWordsCloud);
/**
* generate words base on some content by split(/\s+/g) and sort descending
*/
function generateWords() {
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;
})
resizeWordsCloud();
}
/**
* adjust words size base on width
*/
function resizeWordsCloud() {
$timeout(function() {
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;
})
}
function wordClicked(word) {
alert('text: ' + word.text + ',size: ' + word.size);
}
}
})()
Angular d3 word cloud
===
[Source Code](https://github.com/weihanchen/angular-d3-word-cloud)
[Documentation](https://weihanchen.github.io/angular-d3-word-cloud/)
## Options ##
* `words=[array]` [{text: word1,size: 20, color: '#6d989e'}]
* `height=[number]`
* `width=[number]`
* `on-click=[callback]`
## Directive Usage ##
```
<div id="wordsCloud">
<word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" 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(''#wordsCloud')[0].offsetWidth;
self.wordClicked = wordClicked;
self.words = [
{text: 'Angular',size: 25, color: '#6d989e'},
{text: 'Angular2',size: 35, color: '#473fa3'}
]
function wordClicked(word){
alert(word);
}
}
})()
```
## 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: '#473fa3'//you can assign custom color
}
})
self.width = width;
self.height = height;
Angular-d3-word-cloud is maintained by weihanch
```