@domoinc/word-cloud

WordCloud

Generic Word Cloud

Configuration Options

chartName

Type: string
Default: "WordCloud"

Name of chart for Reporting.

fontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

General text font weight. Note: Not all weights are supported by every font family.

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

Font color for the five words with the greatest value

gaugeFillSecondaryColor

Type: color
Default: "#DAEAF8"

Font color for the words

generalWashoutColor

Type: color
Default: "#E4E5E5"

Color used on hover to grey out all other words

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

maxNumberOfWords

Type: number
Default: 300

The max number of words that the word cloud will process.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

Font family for each word

textSize

Type: number
Default: 12
Units: px

Size of the tooltips font.

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color of the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Color of the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

text

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined && this.accessor(d) !== null && this.accessor(d) !== ''; }

Default accessor:

function (line) { return line[0] === undefined || line[0] === null ? line[0] : String(line[0]); }

value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[1]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['hvala', 900000],
  ['Silicon Slopes', 5010000],
  ['Acrobat', 1000000],
  ['Eskerrik asko', 500000],
  ['Fireworks', 800000],
  ['Draper', 550000],
  ['Wedding', 600000],
  ['yammer', 700000],
  ['iMovie', 440000],
  ['GarageBand', 480000],
  ['Gandalf', 570000],
  ['July 24', 420000],
  ['Magic Mouse', 850000],
  ['Trackpad', 900000],
  ['Pinterest', 1000000],
  ['Linkedin', 400000],
  ['AOSP', 100],
  ['DOMO', 7500000],
  ['Australia', 500]
];

var data3 = [
  ['Justin McMurdie', 500000],
  ['James Stewart', 800000],
  ['Lance Wright', 550000],
  ['Nick Randall', 600000],
  ['Chris Morgan', 700000],
  ['Austin Kim', 440000]
];

var aHeight = 500;
var aWidth = 500;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: 600 + 'px',
    width: 600 + 'px'
  })
  .append('g')
  .chart('WordCloud')
  .c({
    width: aWidth,
    height: aHeight
  });

//Render the chart with data
chart._notifier.showMessage(true);

//chart.draw(data3);
chart.draw(data);

/*----------------------------------------------------------------------------------
Testing fun
----------------------------------------------------------------------------------*/
//setTimeout(function() {
//     chart.draw(data3)
//}, 10000)
//
//setTimeout(function() {
//     chart.draw(data)
//}, 15000)