weihanchen / Angular D3 Word Cloud
Licence: mit
angular directive of D3 word cloud plugin, include simple options to binding.
Stars: ✭ 17
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Angular D3 Word Cloud
Vue D3 Network
Vue component to graph networks using d3-force
Stars: ✭ 415 (+2341.18%)
Mutual labels: d3
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+3094.12%)
Mutual labels: d3
Historical Ranking Data Visualization Based On D3.js
这是一个数据可视化项目,能够将历史数据排名转化为动态柱状图图表
Stars: ✭ 4,649 (+27247.06%)
Mutual labels: d3
Rickshaw
JavaScript toolkit for creating interactive real-time graphs
Stars: ✭ 6,506 (+38170.59%)
Mutual labels: d3
Billboard.js
📊 Re-usable, easy interface JavaScript chart library based on D3.js
Stars: ✭ 5,032 (+29500%)
Mutual labels: d3
Anichart.js
Easily create data visualization animation videos
Stars: ✭ 480 (+2723.53%)
Mutual labels: d3
Party Mode
An experimental music visualizer using d3.js and the web audio api.
Stars: ✭ 690 (+3958.82%)
Mutual labels: d3
D3 Id3
iD3: an Integrated Development Environment for D3.js
Stars: ✭ 789 (+4541.18%)
Mutual labels: d3
Front End Daily Challenges
As of October 2020, 170+ works have been accomplished, challenge yourself each day!
Stars: ✭ 598 (+3417.65%)
Mutual labels: d3
D3 Annotation
Use d3-annotation with built-in annotation types, or extend it to make custom annotations. It is made for d3-v4 in SVG.
Stars: ✭ 693 (+3976.47%)
Mutual labels: d3
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
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 to5
-
rotate=[number, function]
-> [optional] rotation for each word, default to~~(Math.random() * 2) * 60
-
random=[function]
-> [optional] default toMath.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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].