angular-d3-word-cloud

<!DOCTYPE html> <html lang="en-us" ng-app="app"> <head> <meta charset="UTF-8"> <title>Angular-d3-word-cloud by weihanchen</title> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" type="text/css" href="css/plugins/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/plugins/colorpicker.min.css"> <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/github-light.css" media="screen"> <script src="js/plugins/angular.min.js"></script> <script src="js/plugins/d3.min.js"></script> <script src="js/plugins/d3.layout.cloud.js"></script> <script src="js/plugins/bootstrap-colorpicker-module.min.js"></script> <script src="js/controllers/app.js"></script> <script src="dist/angular-word-cloud.min.js"></script> </head> <body ng-controller="AppController as appCtrl"> <section class="page-header"> <h1 class="project-name">Angular-d3-word-cloud</h1> <h2 class="project-tagline"></h2> <a href="https://github.com/weihanchen/angular-d3-word-cloud" class="btn">View on GitHub</a> <a href="https://github.com/weihanchen/angular-d3-word-cloud/zipball/master" class="btn">Download .zip</a> <a href="https://github.com/weihanchen/angular-d3-word-cloud/tarball/master" class="btn">Download .tar.gz</a> </section> <section class="main-content">  <h3> <a id="dependencies" class="anchor" href="#dependencies" aria-hidden="true"></a>Dependencies</h3> <ul> <li><a href="https://d3js.org/">d3.js</a></li> <li><a href="https://www.jasondavies.com/wordcloud/">d3.layout.cloud.js</a></li> </ul>  <h3><a id="how-to-use" class="anchor" href="#how-to-use" aria-hidden="true"></a>How to use</h3> <h5>Bower install</h5> <div class="highlight highlight-text-html-basic"> <pre>$ bower install angular-d3-word-cloud</pre> </div> <a href="https://angularjs.org/">angular.js</a>, <a href="https://d3js.org/">d3.js</a>, <a href="https://www.jasondavies.com/wordcloud/">d3.layout.cloud.js</a> would be install as dependencies auto. If it won't for some error, install it manually. <div class="highlight"> <pre>$ bower install angular $ bower install d3 $ bower install d3-cloud</pre></div> <h5>Add dependencies to the section of your index html:</h5> <div class="highlight highlight-text-html-basic"><pre><meta charset="utf-8">  <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/d3/d3.min.js"></script> <script src="bower_components/d3-cloud/build/d3.layout.cloud.js"></script> <script src="bower_components/angular-d3-word-cloud/dist/angular-word-cloud.min.js"></script> </pre></div> <h3> <a id="options" class="anchor" href="#options" aria-hidden="true"></a>Options</h3> <ul> <li> <code>words=[array]</code> -> [{text: '', size: 0, color: '#0e6632'}]</li> <li><code>height=[number]</code></li> <li><code>width=[number]</code></li> <li><code>padding=[number]</code> -> [optional] padding for each word, defaults to <code>5</code></li> <li><code>rotate=[number, function]</code> -> [optional] rotation for each word, defaults to <code>~~(Math.random() * 2) * 60</code></li> <li><code>random=[function]</code> -> [optional] a constant value here will ensure the word position is fixed upon each page refresh. </li> <li><code>use-tooltip=[boolean]</code> -> [optional] default tooltip template</li> <li><code>use-transition=[boolean]</code> -> [optional] transition with font size</li> <li> <code>on-click=[function]</code> -> word clicked callback</li> </ul> <h3> <a id="directive-usage" class="anchor" href="#directive-usage" aria-hidden="true"></a>Directive Usage</h3> <div class="highlight highlight-text-html-basic"><pre><div id="wordsCloud"> <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="10" rotate="appCtrl.rotate" random="appCtrl.random" use-tooltip="appCtrl.useTooltip" use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked"> </word-cloud> </div></pre></div> <h3> <a id="base-usage" class="anchor" href="#base-usage" aria-hidden="true"></a>Base usage</h3> Inject <code>angular-d3-word-cloud</code> into angular module, set up some options to our controller <div class="highlight highlight-source-js"><pre> (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('word-cloud')[0].offsetWidth; self.wordClicked = wordClicked; self.rotate = rotate; self.useTooltip = true; self.useTransition = true; self.words = [ {text: 'Angular',size: 25,color: '#0e6632',tooltipText: 'Angular Tooltip'}, {text: 'Angular2',size: 35,color: '#0e558',tooltipText: 'Angular2 Tooltip'} ] //custom rotate function rotate(){ return ~~(Math.random() * 2) * 90; } //custom random function random(){ return 0.4; //a constant value here will ensure the word position is fixed upon each page refresh. } function wordClicked(word){ alert(word); } } })()</pre></div> <h3>  <h3><a id="example" class="anchor" href="#example" aria-hidden="true"></a>Example</h3> <textarea class="form-control" rows="5" cols="80" placeholder="Please input some content..." ng-model="appCtrl.content">> </textarea> <div class="form-group"> Padding: <input type="text" class="form-control" placeholder="Please input padding number" ng-model="appCtrl.editPadding" /> </div> <div class="form-group"> Custom words color: <input type="text" colorpicker colorpicker-position="top" ng-model="appCtrl.customColor" /> </div> <div class="form-group"> Rotate: <input type="text" class="form-control" placeholder="Please input rotate number" ng-model="appCtrl.editRotate"> </div> <button class="btn-sm" ng-click="appCtrl.generateWords()"> Generate</button> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" ng-model="appCtrl.useTooltip"> tooltip </label> <label class="form-check-label"> <input class="form-check-input" type="checkbox" ng-model="appCtrl.useTransition"> transition </label> </div> <div class="form-check"> <label class="form-check-label"> </div> <div id="wordsCloud"> <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="appCtrl.padding" random="appCtrl.random" rotate="appCtrl.rotate" use-transition="appCtrl.useTransition" use-tooltip="appCtrl.useTooltip" use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked"> </word-cloud> </div>  <h3> <a id="advance-usage" class="anchor" href="#advance-usage" aria-hidden="true"></a>Advance usage</h3> <h4> <a id="define-some-content-and-splitsg" class="anchor" href="#define-some-content-and-splitsg" aria-hidden="true"></a>Define some content and split(/\s+/g)</h4> <div class="highlight highlight-source-js"><pre> 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; })</pre></div> <h4> <a id="compute-word-size" class="anchor" href="#compute-word-size" aria-hidden="true"></a>Compute word size</h4> <div class="highlight highlight-source-js"><pre> 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, tooltipText: word.text + 'tooltip', } }) self.width = width; self.height = height;</pre></div> <footer class="site-footer"> <a href="https://github.com/weihanchen/angular-d3-word-cloud">Angular-d3-word-cloud</a> is maintained by <a href="https://github.com/weihanchen">weihanchen</a>. This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>. </footer> </section> </body> </html>