# wordcloud

> Tag cloud/Wordle presentation on 2D canvas or HTML

Latest version **1.2.3** (published 2024-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install wordcloud
pnpm add wordcloud
yarn add wordcloud
bun add wordcloud
```

## Health

**Score 33/100 (F)** — status: maintenance-mode.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2024-11-14 |
| First published | 2015-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/wordcloud) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 324.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2498 |
| Author | Timothy Guan-tin Chien |
| Maintainers | timdream |
| Keywords | cloud, canvas, 2D, html, Wordle, presentation, tag |

## Links

- npm: https://www.npmjs.com/package/wordcloud
- Repository: https://github.com/timdream/wordcloud2.js
- Homepage: http://timdream.org/wordcloud2.js/
- Issues: https://github.com/timdream/wordcloud2.js/issues
- npm.io page: https://npm.io/package/wordcloud

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2024-11-14
- 1.2.2 — 2021-05-11
- 1.2.1 — 2021-04-15
- 1.2.0 — 2021-03-31
- 1.1.2 — 2020-12-12
- 1.1.1 — 2019-11-23
- 1.1.0 — 2018-02-23
- 1.0.6 — 2017-02-05
- 1.0.5 — 2016-06-02
- 1.0.4 — 2016-04-14
- 1.0.3 — 2016-02-27
- 1.0.2 — 2016-02-22
- 1.0.1 — 2015-06-01
- 1.0.0 — 2015-06-01

## 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:scubaaddiction@gmail.com) for sponsoring the work on image masking on the demo page.

---
_Source: https://npm.io/package/wordcloud · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._