https://github.com/chrisrzhou/react-wordcloud

☁️ Simple React + D3 wordcloud component with powerful features.
https://github.com/chrisrzhou/react-wordcloud

d3 io react visualization wordcloud

Last synced: 26 days ago
JSON representation

☁️ Simple React + D3 wordcloud component with powerful features.

• Host: GitHub
• URL: https://github.com/chrisrzhou/react-wordcloud
• Owner: chrisrzhou
• License: mit
• Created: 2017-12-23T02:37:36.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2024-04-25T13:15:20.000Z (7 months ago)
• Last Synced: 2024-10-06T11:37:14.633Z (about 1 month ago)
• Topics: d3, io, react, visualization, wordcloud
• Language: JavaScript
• Homepage: https://react-wordcloud.netlify.app
• Size: 2.61 MB
• Stars: 208
• Watchers: 7
• Forks: 138
• Open Issues: 36
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

        
# ☁️ react-wordcloud

Simple React + D3 wordcloud component with powerful features. Uses the [`d3-cloud`](https://github.com/jasondavies/d3-cloud) layout.

![image](/public/wordcloud.png)

## Install

```sh

npm install react-wordcloud

```

Note that `react-wordcloud` requires `react^16.13.0` as a peer dependency.

## Use

### Simple

```js

import React from 'react';

import ReactWordcloud from 'react-wordcloud';

import 'tippy.js/dist/tippy.css';

import 'tippy.js/animations/scale.css';

const words = [

  {

    text: 'told',

    value: 64,

  },

  {

    text: 'mistake',

    value: 11,

  },

  {

    text: 'thought',

    value: 16,

  },

  {

    text: 'bad',

    value: 17,

  },

]

function SimpleWordcloud() {

  return 

}

```

By default, `ReactWordcloud` is configured with animated tooltips enabled and requires CSS for styling. Tippy provides base styling in the resources above or you can create your own.

### Kitchen Sink

An example showing various features (callbacks, options, size).

```js

const callbacks = {

  getWordColor: word => word.value > 50 ? "blue" : "red",

  onWordClick: console.log,

  onWordMouseOver: console.log,

  getWordTooltip: word => `${word.text} (${word.value}) [${word.value > 50 ? "good" : "bad"}]`,

}

const options = {

  rotations: 2,

  rotationAngles: [-90, 0],

};

const size = [600, 400];

const words = [...];

function MyWordcloud() {

  return (

    

  );

}

```

## Examples

View all documented examples and gallery of `react-wordcloud` applications at https://react-wordcloud.netlify.com/.

You can also run the examples locally:

```sh

git clone [email protected]:chrisrzhou/react-wordcloud

cd react-wordcloud

npm install && npm run docs

```

### No props

[![Edit react-wordcloud-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bgov9)

### Responsive

[![Edit react-wordcloud-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/55sb8)

### Configurable Options

[![Edit react-wordcloud-interactive](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fnk8w)

### Callbacks

[![Edit react-wordcloud-interactive](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4lecp)

## Wordcloud Generator

Create wordclouds using this wordcloud generator: https://wordcloud-generator.netlify.com/

Features supported:

- Edit and Upload text inputs

- Various NLP features (stopwords, ngrams)

- Wordcloud configurations

- Export/save/share wordclouds

## Contributing

The code is written in `typescript`, linted with `xo`, and built with `microbundle`. Examples and documentations are built with `docz`.

Feel free to contribute by submitting a pull request.