{"id":17609603,"url":"https://github.com/maitrungduc1410/d3-cloud-angular","last_synced_at":"2025-04-30T13:52:48.014Z","repository":{"id":46072351,"uuid":"345130931","full_name":"maitrungduc1410/d3-cloud-angular","owner":"maitrungduc1410","description":"D3 Word Cloud for Angular","archived":false,"fork":false,"pushed_at":"2024-07-28T15:11:59.000Z","size":1016,"stargazers_count":4,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T06:02:02.972Z","etag":null,"topics":["angular","d3-cloud","d3js","visualization","wordcloud"],"latest_commit_sha":null,"homepage":"https://maitrungduc1410.github.io/d3-cloud-angular/","language":"TypeScript","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/maitrungduc1410.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-06T15:46:11.000Z","updated_at":"2024-07-28T15:10:08.000Z","dependencies_parsed_at":"2024-07-28T16:04:52.629Z","dependency_job_id":null,"html_url":"https://github.com/maitrungduc1410/d3-cloud-angular","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.375,"last_synced_commit":"079380e0f94f2939e78de9ed50e487298d49f9b6"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Fd3-cloud-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Fd3-cloud-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Fd3-cloud-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitrungduc1410%2Fd3-cloud-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maitrungduc1410","download_url":"https://codeload.github.com/maitrungduc1410/d3-cloud-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251714957,"owners_count":21631809,"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-cloud","d3js","visualization","wordcloud"],"created_at":"2024-10-22T17:09:17.919Z","updated_at":"2025-04-30T13:52:47.986Z","avatar_url":"https://github.com/maitrungduc1410.png","language":"TypeScript","readme":"# Angular D3 Word Cloud\nD3 Cloud component for Angular built upon d3-cloud\n\n\u003cimg src=\"./demo.png\"\u003e\n\n# Installation\n```sh\n# for Angular 18\nnpm install --save angular-d3-cloud@^18.0.0\n\n# for Angular 17\nnpm install --save angular-d3-cloud@^17.0.0\n\n# for Angular 16\nnpm install --save angular-d3-cloud@^2.0.0\n\n# for Angular \u003c 16\nnpm install --save angular-d3-cloud@^1.0.0\n```\n# Usage\nFirst import the package to your app module\n```ts\n// app.module.ts\nimport { AngularD3CloudModule } from 'angular-d3-cloud'\n@NgModule({\n  imports: [\n    AngularD3CloudModule\n  ],\n  ...\n})\n```\nNow the component is ready to use.\n\n```html\n\u003c!-- app.component.html --\u003e\n\u003cangular-d3-cloud\n  [data]=\"data\"\n  [width]=\"700\"\n  [height]=\"600\"\n  [padding]=\"5\"\n  font=\"serif\"\n  [rotate]=\"0\"\n  [autoFill]=\"true\"\n  (wordClick)=\"onWorkClick($event)\"\n\u003e\u003c/angular-d3-cloud\u003e\n```\n```ts\n// app.component.ts\nexport class AppComponent {\n  data = [\n    \"Hello\", \"world\", \"normally\", \"you\", \"want\", \"more\", \"words\",\n    \"than\", \"this\"].map(function (d) {\n      return { text: d, value: 10 + Math.random() * 90};\n    })\n}\n```\n# Props\n| Name           | Description                                                                                                | Type                                          | Required | Default             |\n|----------------|------------------------------------------------------------------------------------------------------------|-----------------------------------------------|----------|---------------------|\n| data           | The input data for rendering                                                                               | Array\u003c{ text: string, value: number }\u003e        |     ✓    |                     |\n| width          | Width of component (px)                                                                                    | number                                        |          | 700                 |\n| height         | Height of component (px)                                                                                   | number                                        |          | 600                 |\n| fontSizeMapper | Map each element of data to font size (px)                                                                 | Function: (word: string, idx: number): number |          | word =\u003e word.value; |\n| rotate         | Map each element of data to font rotation degree. Or simply provide a number for global rotation. (degree) | Function \\| number                            |          | 0                   |\n| padding        | Map each element of data to font padding. Or simply provide a number for global padding. (px)              | Function \\| number                            |          | 5                   |\n| font           | The font of text shown                                                                                     | Function \\| string                            |          | serif               |\n| fontWeight | Weight of the font | string \\| number |          |  'normal' |\n| autoFill       | Whether texts should be fill with random color or not                                                      | boolean                                       |          | false               |\n| fillMapper | Function used by autoFill to map each data item to a fill color. Can be used to customize the way autoFill generate colors | Function: (word: Word, index: number): string |          | A function based on schemeCategory10 of d3-scale-chromatic|\n| animations | Whether animated transitions is active or not | boolean |          |  false |\n\n# Events\n| Name          | Description                                              | Payload                           |\n|---------------|----------------------------------------------------------|-----------------------------------|\n| wordClick     | Event triggered when click event triggered on a word     | { event: MouseEvent, word: Word } |\n| wordMouseOver | Event triggered when mouseover event triggered on a word | { event: MouseEvent, word: Word } |\n| wordMouseOut  | Event triggered when mouseout event triggered on a word  | { event: MouseEvent, word: Word } |\n\n\u003e The `Word` interface imported from `d3-cloud`\n# Example\nRun the following commands to start sample project:\n```\nng build angular-d3-cloud --watch\nnpm start # in a separate terminal\n```\n# Thanks\nThis project is built with the idea of [React D3 Cloud](https://github.com/Yoctol/react-d3-cloud)\n","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Wrappers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Fd3-cloud-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaitrungduc1410%2Fd3-cloud-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitrungduc1410%2Fd3-cloud-angular/lists"}