script monkey: business solutions using digital intelligence 
Script Monkey Blog – Word Clouds with D3.js
A blog about making word clouds for data visualisation with D3.js
3rd September 2021
D3.js is the goto library for data visualisation. Building on the work done by Jason Davies who made a cool word cloud api, we have made this page to show how easy it is to create these clouds when we stand on the shoulders of others.
Word clouds are one of the quickest ways to see what a piece of writing is really about. Every word is counted, and the ones that appear most often are drawn the largest, so the main themes of a document jump off the screen at a glance. The cloud below is built live in your browser using D3.js, the JavaScript library behind many of the best data visualisations on the web.
Try it for yourself. The box below contains one of my own musings on climate change and global cooperation, but you can replace it with anything you like: a report, a speech, a set of customer reviews or your latest blog post. Paste in your text, click 'Go!' and watch a new cloud assemble itself. Longer texts tend to give the most interesting results, because there are more repeated words for the cloud to pick out.
What is a word cloud?
A word cloud, sometimes called a tag cloud, is a picture of text in which the size of each word reflects how often it appears. Common filler words such as "the", "and" and "of" are usually left out, so what remains are the words that carry the meaning. The result is not a precise chart, but it is a fast and visual summary that anyone can read without explanation.
How does this word cloud work?
When you click 'Go!', the script splits your text into individual words, tidies up punctuation and capital letters, removes the common filler words and counts how many times each remaining word appears. The most frequent words, up to 400 of them, are passed to a layout algorithm that gives each one a font size based on its count.
The clever part is the placement. The algorithm starts with the biggest word near the centre, then tries to place each following word as close to the middle as it can. It moves outwards along a spiral path, checking at every step whether the word would overlap anything already placed. As soon as it finds a gap, the word is dropped in. This cloud uses the Impact font and rotates words at one of five angles between -30 and 30 degrees, which gives it that slightly jumbled, hand-made look.
Credit where it is due: the layout builds on the excellent open source d3-cloud work by Jason Davies, which has inspired word clouds all over the web.
What are word clouds useful for?
- Getting the gist of long documents, such as reports, tenders or meeting notes, before reading them in full.
- Analysing feedback, where hundreds of survey answers or reviews can be boiled down to the words customers use most.
- Checking your own writing, to see whether the words you meant to emphasise actually stand out, or whether you overuse a favourite phrase.
- Presentations and reports, where a cloud makes an eye-catching summary slide.
What are the limitations?
Word clouds count words, they do not understand them. "Not good" is split into "not" and "good", and the cloud will happily show "good" in large letters. Words with several meanings are lumped together, and two words that mean the same thing are counted separately. Size is also hard to judge precisely, so a word cloud is best used for spotting themes rather than comparing exact numbers. For serious analysis, the same counting can be fed into a proper chart or database report.
Can this be used in a business?
Absolutely. The same techniques can run behind the scenes on your own data, turning customer emails, support tickets or project notes into dashboards that show what people are talking about. If you would like visualisations like this built into your systems, take a look at our custom web application development service. For more experiments in the browser, explore our Mandelbrot and Julia set explorer or learn the basics of 3D with animating a cube in Three.js.
