There is an amazing D3 wordcloud plugin for creating beautiful wordclouds. But it's not trivial for everyone to put it to use. This plugin makes it easy to create such a wordcloud.
A simple html page with a wordcloud might contain:
<html>
<head>
<title>Word Cloud</title>
<script src="lib/d3/d3.js"></script>
<script src="lib/d3/d3.layout.cloud.js"></script>
<script src="d3.wordcloud.js"></script>
</head>
<body>
<div id='wordcloud'></div>
<script>
d3.wordcloud()
.size([800, 400])
.selector('#wordcloud')
.words([{text: 'word', size: 5}, {text: 'cloud', size: 15}])
.start();
</script>
</body>
</html>That's all! The following properties are accepted:
selector()which css selector to create the wordcloud onelement()an element instead of the previous selectorscale()a d3 scale for sizing words, e.g.sqrt,logorlinearfill()a d3 scale for coloring words, e.g.d3.scale.category20b()transitionDuration()how many milliseconds a resize transation takes
In addition to this, the following d3-cloud properties are accepted:
size()dimensions [width, height]words()array of{text: 'word', size: 1}hashesfont()fontStyle()fontWeight()spiral(), which can bearchimedeanorrectangularpadding()
Extensions
onwordclick(function(d,i))provide your own function to call when a word is clicked
.onwordclick(function(d, i) {
window.location = "https://www.google.co.uk/search?q=" + d.text;
})- The original d3-cloud plugin
- d3-wordcloud, example of how to use d3-cloud that this plugin is based on
- Article on using d3-cloud
- Java-based wordle.net, which has inspired the d3-cloud plugin