react/

WordCloud

A D3 reusable Word Cloud.

Usage

Requires properties id, w, h and data to ensure it does not fail.

There is an optional threshold value that defaults to 20.

Sample Data

The is a sample under data.json.

An example data layout required can be the following:

{
  "data": [
    { "text": "frequency", "frequency": 63 },
    { "text": "function", "frequency": 61 },
    { "text": "data", "frequency": 47 },
    { "text": "return", "frequency": 36 },
    { "text": "attr", "frequency": 29 },
    { "text": "chart", "frequency": 28 },
    { "text": "array", "frequency": 24 },
    { "text": "style", "frequency": 24 },
    { "text": "layouts", "frequency": 22 },
    { "text": "values", "frequency": 22 },
    { "text": "need", "frequency": 21 },
    { "text": "nodes", "frequency": 21 },
    { "text": "pie", "frequency": 21 },
    { "text": "use", "frequency": 21 },
    { "text": "figure", "frequency": 20 },
    { "text": "circle", "frequency": 19 },
    { "text": "we'll", "frequency": 19 },
    { "text": "zoom", "frequency": 19 },
    { "text": "append", "frequency": 17 },
    { "text": "elements", "frequency": 17 }
  ]
}
copy

Storybook

To add this component to storybook, go to stories/index.js and add the following:

import WordCloud from 'components/WordCloud/WordCloud.storybook.js';
WordCloud();
copy