https://github.com/timdream/wordcloud2.js

Tag cloud/Wordle presentation on 2D canvas or HTML
https://github.com/timdream/wordcloud2.js

canvas javascript tag-cloud word-cloud wordcloud wordcloud2 wordle

Last synced: about 2 months ago
JSON representation

Tag cloud/Wordle presentation on 2D canvas or HTML

• Host: GitHub
• URL: https://github.com/timdream/wordcloud2.js
• Owner: timdream
• License: mit
• Created: 2012-12-07T09:40:00.000Z (almost 12 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-07-19T02:18:17.000Z (about 1 year ago)
• Last Synced: 2024-05-29T13:35:31.301Z (4 months ago)
• Topics: canvas, javascript, tag-cloud, word-cloud, wordcloud, wordcloud2, wordle
• Language: JavaScript
• Homepage: https://wordcloud2-js.timdream.org/
• Size: 668 KB
• Stars: 2,321
• Watchers: 60
• Forks: 508
• Open Issues: 70
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-canvas - wordcloud2.js - js.timdream.org/#love)] - Tag cloud/Wordle presentation on 2D canvas or HTML.   (Libraries / Charts Libraries)
• awesome - timdream/wordcloud2.js - Tag cloud/Wordle presentation on 2D canvas or HTML (JavaScript)

README

        
# wordcloud2.js [![npm version](https://badge.fury.io/js/wordcloud.svg)](http://badge.fury.io/js/wordcloud)

Create a tag cloud/[Wordle](http://www.wordle.net/) presentation on 2D canvas or HTML.

This library is a spin-off project from [HTML5 Word Cloud](https://github.com/timdream/wordcloud).

**Visit the [demo page](https://timdream.org/wordcloud2.js/)**

## Installation

    npm install wordcloud

## Simple usage

Download the latest `wordcloud2.js` file from the `src` folder in this repository.

Load `wordcloud2.js` script to the web page, and run:

    WordCloud(document.getElementById('my_canvas'), { list: list } );

where `list` is an array that look like this: `[['foo', 12], ['bar', 6]]`.

Options available, see [API documentation](./API.md) for detail.

## Contact & help

Please read through the API documentation and [CONTRIBUTING.md](./CONTRIBUTING.md) before filing an issue or contact me via e-mail.

## Algorithm

Before putting each word on the canvas, it is drawn on a separate canvas to read back the pixels to record is drawn spaces.

With the information, wordcloud.js will then try to find a place to fit the word that is closest to the start point.

## Testing

Tests are available with [QUnit](https://qunitjs.com/) and `grunt`.

To setup environment for testing, run `npm install` and manually install [SlimerJS](https://slimerjs.org/) of your platform.

Use `grunt test` to ensure all options can be set without JavaScript error.

Use `grunt compare --base-commit=gh-pages` to compare your proposed fix with `gh-pages` branch.

## Acknowledgement

The developer would like to thank [Chad Jensen](mailto:[email protected]) for sponsoring the work on image masking on the demo page.