d3-wordcloud
d3-wordcloud copied to clipboard
Published
20 hours ago •
wvengen
wvengen
Plug-and-play wordcloud with D3
Easy Word Cloud using D3
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.
Usage
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;
})
Links
- 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
wvengen