Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maitrungduc1410/d3-cloud-angular
D3 Word Cloud for Angular
https://github.com/maitrungduc1410/d3-cloud-angular
angular d3-cloud d3js visualization wordcloud
Last synced: 3 months ago
JSON representation
D3 Word Cloud for Angular
- Host: GitHub
- URL: https://github.com/maitrungduc1410/d3-cloud-angular
- Owner: maitrungduc1410
- License: mit
- Created: 2021-03-06T15:46:11.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-28T15:11:59.000Z (6 months ago)
- Last Synced: 2024-10-11T22:34:17.451Z (3 months ago)
- Topics: angular, d3-cloud, d3js, visualization, wordcloud
- Language: TypeScript
- Homepage: https://maitrungduc1410.github.io/d3-cloud-angular/
- Size: 992 KB
- Stars: 4
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular D3 Word Cloud
D3 Cloud component for Angular built upon d3-cloud
# Installation
```sh
# for Angular 18
npm install --save angular-d3-cloud@^18.0.0
# for Angular 17
npm install --save angular-d3-cloud@^17.0.0
# for Angular 16
npm install --save angular-d3-cloud@^2.0.0
# for Angular < 16
npm install --save angular-d3-cloud@^1.0.0
```
# Usage
First import the package to your app module
```ts
// app.module.ts
import { AngularD3CloudModule } from 'angular-d3-cloud'
@NgModule({
imports: [
AngularD3CloudModule
],
...
})
```
Now the component is ready to use.
```html
```
```ts
// app.component.ts
export class AppComponent {
data = [
"Hello", "world", "normally", "you", "want", "more", "words",
"than", "this"].map(function (d) {
return { text: d, value: 10 + Math.random() * 90};
})
}
```
# Props
| Name | Description | Type | Required | Default |
|----------------|------------------------------------------------------------------------------------------------------------|-----------------------------------------------|----------|---------------------|
| data | The input data for rendering | Array<{ text: string, value: number }> | ✓ | |
| width | Width of component (px) | number | | 700 |
| height | Height of component (px) | number | | 600 |
| fontSizeMapper | Map each element of data to font size (px) | Function: (word: string, idx: number): number | | word => word.value; |
| rotate | Map each element of data to font rotation degree. Or simply provide a number for global rotation. (degree) | Function \| number | | 0 |
| padding | Map each element of data to font padding. Or simply provide a number for global padding. (px) | Function \| number | | 5 |
| font | The font of text shown | Function \| string | | serif |
| fontWeight | Weight of the font | string \| number | | 'normal' |
| autoFill | Whether texts should be fill with random color or not | boolean | | false |
| 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|
| animations | Whether animated transitions is active or not | boolean | | false |
# Events
| Name | Description | Payload |
|---------------|----------------------------------------------------------|-----------------------------------|
| wordClick | Event triggered when click event triggered on a word | { event: MouseEvent, word: Word } |
| wordMouseOver | Event triggered when mouseover event triggered on a word | { event: MouseEvent, word: Word } |
| wordMouseOut | Event triggered when mouseout event triggered on a word | { event: MouseEvent, word: Word } |
> The `Word` interface imported from `d3-cloud`
# Example
Run the following commands to start sample project:
```
ng build angular-d3-cloud --watch
npm start # in a separate terminal
```
# Thanks
This project is built with the idea of [React D3 Cloud](https://github.com/Yoctol/react-d3-cloud)