Top Related Projects
Create word clouds in JavaScript.
A little word cloud generator in Python
Quick Overview
wordcloud2.js is a JavaScript library for creating word cloud visualizations in web browsers. It allows developers to generate visually appealing word clouds from text data, with customizable options for appearance and layout.
Pros
- Easy to use and integrate into web projects
- Highly customizable with various options for fonts, colors, and shapes
- Supports responsive design and works well on different screen sizes
- Lightweight and fast, with good performance even for large datasets
Cons
- Limited documentation and examples compared to some other visualization libraries
- Lack of advanced features like interactive tooltips or animations
- May require additional preprocessing of text data for optimal results
- Not actively maintained, with infrequent updates
Code Examples
Creating a basic word cloud:
WordCloud(document.getElementById('my_canvas'), {
list: [['foo', 12], ['bar', 6], ['baz', 3]],
fontFamily: 'Arial',
color: 'random-dark',
backgroundColor: '#fff'
});
Customizing the shape of the word cloud:
WordCloud(document.getElementById('my_canvas'), {
list: [['foo', 12], ['bar', 6], ['baz', 3]],
shape: 'circle',
ellipticity: 1
});
Using a custom color function:
WordCloud(document.getElementById('my_canvas'), {
list: [['foo', 12], ['bar', 6], ['baz', 3]],
color: function(word, weight) {
return weight > 10 ? '#f00' : '#00f';
}
});
Getting Started
-
Include the wordcloud2.js script in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.2.2/wordcloud2.min.js"></script> -
Create a canvas element in your HTML:
<canvas id="my_canvas" width="800" height="400"></canvas> -
Use JavaScript to create the word cloud:
WordCloud(document.getElementById('my_canvas'), { list: [['foo', 12], ['bar', 6], ['baz', 3]] }); -
Customize the word cloud by adding more options to the configuration object as needed.
Competitor Comparisons
Create word clouds in JavaScript.
Pros of d3-cloud
- Built on D3.js, offering powerful data visualization capabilities and integration with other D3 components
- Supports more advanced layout algorithms, including spiral and rectangular layouts
- Better performance for larger datasets due to optimized algorithms
Cons of d3-cloud
- Steeper learning curve, especially for those unfamiliar with D3.js
- Less straightforward implementation for simple use cases
- Requires more setup and configuration compared to wordcloud2.js
Code Comparison
wordcloud2.js:
WordCloud(document.getElementById('canvas'), {
list: [['foo', 12], ['bar', 6]],
fontFamily: 'Arial',
color: 'random-dark'
});
d3-cloud:
d3.layout.cloud()
.size([800, 300])
.words([{text: "foo", size: 12}, {text: "bar", size: 6}])
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Arial")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
The code comparison shows that wordcloud2.js has a simpler API for basic usage, while d3-cloud offers more granular control over layout and styling. d3-cloud requires more setup but provides greater flexibility for advanced visualizations.
A little word cloud generator in Python
Pros of word_cloud
- Written in Python, offering better integration with data science workflows
- Supports various image formats as masks for custom word cloud shapes
- More advanced layout algorithms for handling complex arrangements
Cons of word_cloud
- Requires Python environment and dependencies
- Less suitable for web-based applications
- Slower performance compared to JavaScript-based solutions
Code Comparison
wordcloud2.js:
WordCloud(document.getElementById('canvas'), {
list: [['foo', 12], ['bar', 6]],
fontFamily: 'Arial',
color: 'random-dark',
rotateRatio: 0.5
});
word_cloud:
from wordcloud import WordCloud
import matplotlib.pyplot as plt
wordcloud = WordCloud(width=800, height=400, background_color='white').generate(text)
plt.imshow(wordcloud, interpolation='bilinear')
plt.axis('off')
plt.show()
Key Differences
- wordcloud2.js is JavaScript-based, making it ideal for web applications
- word_cloud offers more customization options and integration with data analysis tools
- wordcloud2.js has a simpler API and is easier to integrate into existing web projects
- word_cloud provides better support for complex layouts and custom shapes
Both libraries have their strengths, with wordcloud2.js excelling in web environments and word_cloud offering more advanced features for data analysis and visualization tasks.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
wordcloud2.js 
Create a tag cloud/Wordle presentation on 2D canvas or HTML.
This library is a spin-off project from HTML5 Word Cloud.
Visit the demo page
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 for detail.
Contact & help
Please read through the API documentation and 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 and grunt.
To setup environment for testing, run npm install and manually install SlimerJS 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 for sponsoring the work on image masking on the demo page.
Top Related Projects
Create word clouds in JavaScript.
A little word cloud generator in Python
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot