Charts/Diagram charts
Word Cloud
<WordCloud /> · 10 examples
Words sized by weight and packed outward from the centre along a spiral, so the biggest ones win the middle.
Overview
A word cloud is the chart you make when you have 4,000 free-text survey answers and a meeting in twenty minutes. It does not answer a question. It gives you a first impression of the pile, and for that purpose it is brilliant: in under a second you can see that people mostly wrote about "price" and "support", and you can stop pretending you read all of them.
Tag clouds became familiar in the mid-2000s when photo and bookmarking sites started showing the most popular tags in bigger type, and the form went mainstream a few years later with tools like Wordle, which made it easy to produce a poster out of any text. Designers promptly overused it, data people promptly complained, and both groups were a little bit right.
The honest position is somewhere in the middle. A word cloud is a bad way to compare numbers and a good way to show texture. Treat it as the cover page of an analysis, not the analysis itself, and it earns its place.
Props
API
<WordCloud data={terms} word={|t: &Term| t.word} weight={|t: &Term| t.count} group={|t: &Term| t.topic} />| Prop | Type | Default |
|---|---|---|
word | Fn(&T) -> &str | required |
weight | Fn(&T) -> f64 | required |
group | Fn(&T) -> &str: colour and legend | words cycle through the palette |
max_words | usize: the heaviest are kept | 120 |
font_range | (f32, f32): smallest and largest font size | (11., 52.) |
legend | Legend | shown with a group |
Font size grows with the square root of weight. Words are placed heaviest first along a spiral from the centre, stretched to the chart's shape, and skipped if they don't fit. Words are horizontal.
Zoom: hold Ctrl (Cmd on macOS) and scroll, or pinch on a trackpad, to zoom about the pointer. Drag to pan once zoomed in, and double-click to reset.
Run them
10 examples
Press Run to load an example into the live render at the top of the page. Open one to read its code.
How to read it
- 01Look at the biggest words first: the layout puts them in the middle, and they are the most frequent terms.
- 02Notice the second tier. Often the interesting words are two or three sizes down, once the obvious ones are out of the way.
- 03If words are coloured by group, use the legend to see which group a colour is and click to hide a group. The rest re-pack and re-scale.
- 04Hover a word for its exact weight. Do not trust the size to tell you that.
When to use it, and when not to
Reach for it when
- You want a first look at text: survey answers, support tickets, review titles, search queries. It tells you what the pile is about.
- The audience is general and the goal is to make a theme visible, not to make a case. A cloud makes a good cover for a report.
- You have pre-counted terms, perhaps with a group such as sentiment or product line, and want to see how different groups use different words.
Skip it when
- The numbers matter. Longer words look bigger at the same size, and the reader cannot tell 412 from 380. Use a sorted bar chart.
- You need to compare two clouds. Sizes are relative to each cloud's own maximum, so a big word in one is not a big word in the other.
- Your text has not been cleaned. Raw counts are topped by "the", "and" and "of", which makes for a very accurate and very dull picture.
- The order matters. A cloud has no axis and no sequence, so it cannot show change over time.
The math behind it
Weight to font size
Every word comes with a positive weight (usually a count). Words with a weight that is zero, negative or not finite are dropped. The rest are sorted by weight and only the heaviest max_words (default 120) are kept. Hidden groups are removed before sizing, so the sizes re-scale to whatever is left.
Font size is not linear in weight. It uses the square root of the position of between the lightest and heaviest visible words, interpolated between the smallest and largest font size (default 11 and 52 px). The square root keeps the lightest words legible when one term is a hundred times the rest, and it spends more of the size range on the lighter words, where most of the vocabulary lives.
Packing along a spiral
The heaviest word is placed first, with its box centred in the chart. Each following word walks an Archimedean spiral outward from the centre until its bounding box fits without overlapping any placed word and without leaving the canvas. The first position that works is used.
The spiral is stretched horizontally by the aspect ratio of the chart (width over height, clamped to 0.5 to 3), so a wide chart fills out sideways rather than leaving the corners empty. The box of a word is its measured text width times 1.08 plus 4 px, by 1.15 times its font size, which is where the little air between words comes from.
What does not fit, and the fit factor
Before placing anything, all sizes are scaled down, if needed, so that the heaviest word is no wider than 85% of the chart. No font goes below 8 px. If a word cannot find a free spot within the search (the spiral stops after 400 radians or once it leaves the chart), it is simply left out, and the smaller words that come after it can still land.
Colour is by group when a group is supplied, so each group gets its own series colour and a legend. Without groups, words cycle through the first eight series colours by rank, which adds variety and carries no meaning. That second case matters: colour without groups is decoration.
Real life usage
The word that was bigger than it looked
Tomasz was a researcher at a mid-sized software company called Brightwire, and he had inherited a spreadsheet. It held 3,812 answers to a single survey question: "What is the one thing we should fix?" Nobody had read them. The spreadsheet had been passed from team to team like a mildly radioactive heirloom.
The product director, a patient man, wanted something she could put on the first slide of a planning review without having to explain anything. Tomasz wanted something that would not cost him a week. They agreed that they were both looking for a word cloud and that neither of them was proud of it.
Tomasz tokenised the answers, removed stop words (the earlier draft's biggest word was "the"), counted what remained and handed the counts to <WordCloud> from zopra-charts, with a group for each of the three plans customers were on. The cloud placed "export" at the centre in the largest type, followed by "slow", "login" and "dashboard" and then a long ring of one-off terms.
He was about to send it when he noticed that "export" was suspiciously fat. It was the heaviest word, yes, with 640 mentions, but the second word, "slow", had 610. The sizes used a square-root scale so that the lightest words stayed readable. On the cloud, the two were nearly the same. Without the weights they looked like they were in a different league.
He hovered over each of the top five words and wrote the weights into the slide's caption. It took four minutes, and it changed the conversation. The director's first reaction to the bare cloud had been that export was the obvious priority. After seeing 640 against 610, she asked whether slow and export were the same problem, and it turned out they were: every export took forty seconds.
Fixing the exporter took one sprint and removed both words from the top of the next survey. "Login" moved to the centre, where it still lives.
Tomasz says a word cloud is a good way to start a conversation and a poor way to end one, and that the right place for the numbers is a caption somebody will read.
Pitfalls
- Size is a square-root scale. Doubling a weight does not double the font. Sizes are rank-like, so two words can look similar while differing by a lot.
- Long words look more important. A word with eleven letters covers more ink than one with three even at the same weight. This is built into the chart type.
- Words can be dropped. After the 120-word limit (change with
max_words), and for any word that does not find a free spot. A missing word is not a word with weight zero. - Stop words and duplicates. Pass counted, cleaned terms. "Run", "runs" and "running" are three words unless you merge them before counting.
- Colour means nothing without a group. In ungrouped clouds the colours cycle by rank. Do not read a pattern into them.
From around the web