Angular4 Word Cloud

Links:

• Live Demo
• Documentation
• Android Version

Installation

To install this library, run:

$ npm install angular4-word-cloud --save
$ npm install d3 --save

API

Import

// In your App's module:
imports: [
   AgWordCloudModule.forRoot()
]

Then add add the script to .angular-cli.json

"scripts": [
      ***
        "../node_modules/angular4-word-cloud/d3.min.js"
      ]

How to use

There are one directive for word cloud: ag-word-cloud, to use it just add this block on your html file:

<div AgWordCloud 
    #word_cloud_chart=ag-word-cloud 
    [wordData]="word_cloud"
     [options]="options">
    </div>

// Create Work Cloud Data Array
wordData: Array<AgWordCloudData> = [// Words];
// Word Cloud Options
options = {
    settings: {
        minFontSize: 10,
        maxFontSize: 100,
        textRotation: 0 // see below
    },
    margin: {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
    },
    labels: true // false to hide hover labels
};

Properties

• wordData (Array<WordCloudData> | WordCloudData[]) - set of words, it should be Array<WordCloudData> and each object must have a text and size;

• colors (?Array<string> | string[]) - data colors, will use default and|or random colors if not specified.

• options (?WordCloudOptions) - word cloud options and there are two object you can pass it settings and margin.

  • settings
    • minFontSize
    • maxFontSize
    • textRotation (?number | RotationFunction): accepts a number (angle) which all words in the cloud will be rotated at (ie 0 means no rotation). Alternatively a function can be passed which returns a number (to be called on each word in the cloud)
  • margin of canvas top, left, bottom, right, Default values is 10.
  • labels show Size label at the bottom

• width and height of canvas, the Default value for width is the width of the container, and the height equals the width * 0.75.

Events

• wordClick Returns the word clicked

  It can be setted as:

  <div AgWordCloud [wordData]="wordData" [options]="options" (wordClick)="onWordCloudClick($event)" >