# angular-d3-word-cloud
> Running example base on express server
Latest version **0.5.3** (published 2017-12-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install angular-d3-word-cloud
pnpm add angular-d3-word-cloud
yarn add angular-d3-word-cloud
bun add angular-d3-word-cloud
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.3 |
| Published | 2017-12-05 |
| First published | 2017-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 15 |
| Author | weihanchen |
| Maintainers | weihanchen |
| Keywords | angular, d3, word-cloud, cloud |
## Links
- npm: https://www.npmjs.com/package/angular-d3-word-cloud
- Repository: https://github.com/weihanchen/angular-d3-word-cloud
- Homepage: https://weihanchen.github.io/angular-d3-word-cloud/
- Issues: https://github.com/weihanchen/angular-d3-word-cloud/issues
- npm.io page: https://npm.io/package/angular-d3-word-cloud
## Dependencies (3)
- [d3](https://npm.io/package/d3.md) ~4.6.0
- [angular](https://npm.io/package/angular.md) ^1.3.0
- [d3-cloud](https://npm.io/package/d3-cloud.md) ~1.2.4
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 0.5.3 (latest) — 2017-12-05
- 0.5.2 — 2017-11-23
- 0.5.0 — 2017-11-20
- 0.4.0 — 2017-04-24
- 0.3.1 — 2017-03-21
- 0.3.0 — 2017-03-13
- 0.2.0 — 2017-02-22
## README
# 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 section of your index html:
```html
```
## 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
```
## 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)
---
_Source: https://npm.io/package/angular-d3-word-cloud · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._