Wordcloud | the D3 Graph Gallery

Step by step

Creation of wordclouds in d3.js is made easy thanks to the d3-cloud plugin built by Jason Davies. A good way to explore the feature of this plugin is through this wordcloud generator. To learn how to use it with d3.js, read the examples below.

Most basic

The most basic wordcloud you can do in d3.js. It calls the d3-cloud plugin without any argument.

Input data: vector written in code

General customization

Apply basic customization to the wordcloud: color, angles, font, size and more.

Input data: vector written in code

Proportional size

This post will teach you how to make the word size proportional to their occurrence.

Input data: vector written in code

Warning

Wordclouds are useful for quickly perceiving the most prominent terms. They are widely used in media and well understood by the public. However, they are criticized for 2 main reasons:

Area is a poor metaphor of a numeric value, it is hardly perceive by the human eye
Longer words appear bigger by construction

To put it in a nutshell, wordclouds must be avoided. You can read more about that in data-to-viz. Why not consider a lollipop plot or a barplot instead?

Lollipop plot

Lollipop plot can be a good alternative to wordclouds. Try it!

Turn you barplot horizontal

Makes sense if you have long labels: it makes them more readable.

Selection of blocks

A few blocks highlighting the possibilities offered by the d3-cloud plugin

Wordcloud generator

If you feel too lazy to code today, this word cloud generator is based on d3.js and allows to create your wordcloud by clicking on a few buttons.

Wordcloud with animation

A block that illustrate how to build animation between several wordclouds.