angular-d3-word-cloud
Version:
Running example base on express server
152 lines (126 loc) • 5.7 kB
Markdown
# angular-d3-word-cloud #
[](https://travis-ci.org/weihanchen/angular-d3-word-cloud)
[](https://coveralls.io/github/weihanchen/angular-d3-word-cloud?branch=master)
## 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](https://angularjs.org/)
* [d3.js](https://d3js.org/)
* [d3.layout.cloud.js](https://www.jasondavies.com/wordcloud/)
## Demo ##
Watch the wordcloud component in action on the [demo page](https://weihanchen.github.io/angular-d3-word-cloud/).
## How to use ##
### Install ###
##### bower #####
$ bower install angular-d3-word-cloud
[angular.js](https://angularjs.org/), [d3.js](https://d3js.org/), [d3.layout.cloud.js](https://www.jasondavies.com/wordcloud/) 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 <head> section of your index html:
```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](https://github.com/d3/d3-scale#category-scales)
* `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 ##
```html
<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
```javascript
(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) ###
```javascript
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 ###
```javascript
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](https://github.com/jasondavies/d3-cloud) by [Jason Davies](https://www.jasondavies.com/).
* [D3.js](https://github.com/d3/d3)