{"id":19673378,"url":"https://github.com/weihanchen/angular-d3-word-cloud","last_synced_at":"2025-04-29T01:30:54.133Z","repository":{"id":57178242,"uuid":"64720018","full_name":"weihanchen/angular-d3-word-cloud","owner":"weihanchen","description":"angular directive of D3 word cloud plugin, include simple options to binding.","archived":false,"fork":false,"pushed_at":"2023-07-26T12:50:23.000Z","size":1570,"stargazers_count":15,"open_issues_count":3,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T21:54:41.840Z","etag":null,"topics":["angular","d3","wordcloud"],"latest_commit_sha":null,"homepage":"https://weihanchen.github.io/angular-d3-word-cloud/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weihanchen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-02T03:11:09.000Z","updated_at":"2024-12-25T22:29:46.000Z","dependencies_parsed_at":"2022-09-11T00:01:48.686Z","dependency_job_id":null,"html_url":"https://github.com/weihanchen/angular-d3-word-cloud","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihanchen%2Fangular-d3-word-cloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihanchen%2Fangular-d3-word-cloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihanchen%2Fangular-d3-word-cloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weihanchen%2Fangular-d3-word-cloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weihanchen","download_url":"https://codeload.github.com/weihanchen/angular-d3-word-cloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251415648,"owners_count":21585867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","d3","wordcloud"],"created_at":"2024-11-11T17:15:04.813Z","updated_at":"2025-04-29T01:30:52.625Z","avatar_url":"https://github.com/weihanchen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-d3-word-cloud #\n\n[![Build Status](https://travis-ci.org/weihanchen/angular-d3-word-cloud.svg?branch=master)](https://travis-ci.org/weihanchen/angular-d3-word-cloud)\n[![Coverage Status](https://coveralls.io/repos/github/weihanchen/angular-d3-word-cloud/badge.svg?branch=master)](https://coveralls.io/github/weihanchen/angular-d3-word-cloud?branch=master)\n\n## Run examples with server ##\n```\n$ npm install\n$ npm run test\n$ npm run dev //default server port is 8000\n$ npm run release //build release files\n```\n\n## Dependencies ##\n* [angular.js](https://angularjs.org/)\n* [d3.js](https://d3js.org/)\n* [d3.layout.cloud.js](https://www.jasondavies.com/wordcloud/)\n\n## Demo ##\nWatch the wordcloud component in action on the [demo page](https://weihanchen.github.io/angular-d3-word-cloud/).\n\n## How to use ##\n\n### Install ###\n\n##### bower #####\n\n    $ bower install angular-d3-word-cloud\n\n[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.\n\n    $ bower install angular\n    $ bower install d3\n    $ bower install d3-cloud\n\n\n##### npm #####\n```\n$ npm install angular-d3-word-cloud\n```\n\n## Inject scripts ##\nAdd dependencies to the \u003chead\u003e section of your index html:\n\n```html\n\u003cmeta charset=\"utf-8\"\u003e  \u003c!-- it's important for d3.js --\u003e\n\u003cscript src=\"[bower_components/node_modules]/angular/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"[bower_components/node_modules]/d3/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"[bower_components/node_modules]/d3-cloud/build/d3.layout.cloud.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"[bower_components/node_modules]/angular-d3-word-cloud/dist/angular-word-cloud.min.js\"\u003e\u003c/script\u003e\n```\n\n## Options ##\nNote: if words element not contains color property, default will use [d3 schemeCategory20](https://github.com/d3/d3-scale#category-scales)\n* `words=[array]` -\u003e [{text: '',size: 0, color: '#6d989e', tooltipText: ''}]\n* `height=[number]`\n* `width=[number]`\n* `padding=[number]` -\u003e [optional] padding for each word, defaults to `5`\n* `rotate=[number, function]` -\u003e [optional] rotation for each word, default to `~~(Math.random() * 2) * 60`\n* `random=[function]` -\u003e [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).\n* `use-tooltip=[boolean]` default tooltip template\n* `use-transition=[boolean]` transition with font size\n* `on-click=[function]` -\u003e word clicked callback\n\n## Directive Usage ##\n```html\n\u003cdiv id=\"wordsCloud\"\u003e\n   \u003cword-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\"\u003e\n   \u003c/word-cloud\u003e\n\u003c/div\u003e\n```\n\n## Basic usage ##\nInject `angular-d3-word-cloud` into angular module, set up some options to our controller\n\n```javascript\n(function(){\n\tangular.module('app',['angular-d3-word-cloud'])\n\t\t.controller('appController',['$window','$element',appController])\n\tfunction appController($window,$element){\n\t\tvar self = this;\n\t\tself.height = $window.innerHeight * 0.5;\n\t\tself.width = $element.find('#wordsCloud')[0].offsetWidth;\n\t\tself.wordClicked = wordClicked;\n        self.rotate = rotate;\n        self.useTooltip = true;\n        self.useTransition = false;\n\t\tself.words = [\n\t\t\t{text: 'Angular',size: 25, color: '#6d989e', tooltipText: 'Angular Tooltip'},\n\t\t\t{text: 'Angular2',size: 35, color: '#473fa3', tooltipText: 'Angular2 Tooltip'}\n        ]\n        self.random = random;\n\n        function random() {\n            return 0.4; // a constant value here will ensure the word position is fixed upon each page refresh.\n        }\n\n        function rotate() {\n            return ~~(Math.random() * 2) * 90;\n        }\n\n\t\tfunction wordClicked(word){\n\t\t\talert('text: ' + word.text + ',size: ' + word.size);\n\t\t}\n\t}\n})()\n```\n## Advanced usage ##\n### Define some content and split(/\\s+/g) ###\n\n```javascript\n\tvar content = 'Angular Angular2 Angular3 Express Nodejs';\n\toriginWords = self.content.split(/\\s+/g);\n    originWords = originWords.map(function(word) {\n        return {\n            text: word,\n            count: Math.floor(Math.random() * maxWordCount)\n        }\n     }).sort(function(a, b) {\n          return b.count - a.count;\n     })\n```\n\n### Font size calculations ###\n\n```javascript\n\t var element = document.getElementById('wordsCloud');\n     var height = $window.innerHeight * 0.75;\n     element.style.height = height + 'px';\n     var width = element.getBoundingClientRect().width;\n     var maxCount = originWords[0].count;\n     var minCount = originWords[originWords.length - 1].count;\n     var maxWordSize = width * 0.15;\n     var minWordSize = maxWordSize / 5;\n     var spread = maxCount - minCount;\n     if (spread \u003c= 0) spread = 1;\n     var step = (maxWordSize - minWordSize) / spread;\n     self.words = originWords.map(function(word) {\n         return {\n             text: word.text,\n             size: Math.round(maxWordSize - ((maxCount - word.count) * step)),\n             color: '#473fa3'//you can assign custom color\n         }\n     })\n     self.width = width;\n     self.height = height;\n```\n\n## References ##\n* [Word Cloud Layout](https://github.com/jasondavies/d3-cloud) by [Jason Davies](https://www.jasondavies.com/).\n* [D3.js](https://github.com/d3/d3)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweihanchen%2Fangular-d3-word-cloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweihanchen%2Fangular-d3-word-cloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweihanchen%2Fangular-d3-word-cloud/lists"}