Tag cloud using d3-cloud and D3.js

by plantface

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.rawgit.com/jasondavies/d3-cloud/v1.2.1/build/d3.layout.cloud.js"></script>
<div id="cloud"></div>

JavaScript

// First define your cloud data, using `text` and `size` properties:

    var skillsToDraw = [
    	{ text: 'javascript', size: 40 },
    	{ text: 'D3.js', size: 15 },
    	{ text: 'coffeescript', size: 25 },
    	{ text: 'shaving sheep', size: 25 },
    	{ text: 'AngularJS', size: 30 },
    	{ text: 'Ruby', size: 30 },
    	{ text: 'ECMAScript', size: 15 },
    	{ text: 'Actionscript', size: 10 },
    	{ text: 'Linux', size: 20 },
    	{ text: 'C++', size: 20 },
    	{ text: 'C#', size: 25 },
    	{ text: 'JAVA', size: 38 },
      // just copy twice for extra data, else the cloud is a little boring
    	{ text: 'javascript', size: 40 },
    	{ text: 'D3.js', size: 15 },
    	{ text: 'coffeescript', size: 25 },
    	{ text: 'shaving sheep', size: 25 },
    	{ text: 'AngularJS', size: 30 },
    	{ text: 'Ruby', size: 30 },
    	{ text: 'ECMAScript', size: 15 },
    	{ text: 'Actionscript', size: 10 },
    	{ text: 'Linux', size: 20 },
    	{ text: 'C++', size: 20 },
    	{ text: 'C#', size: 25 },
    	{ text: 'JAVA', size: 38 },
    	{ text: 'javascript', size: 40 },
    	{ text: 'D3.js', size: 15 },
    	{ text: 'coffeescript', size: 25 },
    	{ text: 'shaving sheep', size: 25 },
    	{ text: 'AngularJS', size: 30 },
    	{ text: 'Ruby', size: 30 },
    	{ text: 'ECMAScript', size: 15 },
    	{ text: 'Actionscript', size: 10 },
    	{ text: 'Linux', size: 20 },
    	{ text: 'C++', size: 20 },
    	{ text: 'C#', size: 25 },
    	{ text: 'JAVA', size: 38 }
    ];

// Next you need to use the layout script to calculate the placement, rotation and size of each word:

var width = 500;
var height = 500;
var fill = d3.scale.category20();

    d3.layout.cloud()
    	.size([width, height])
    	.words(skillsToDraw)
    	.rotate(function() {
    		return ~~(Math.random() * 2) * 90;
    	})
    	.font("Impact")
    	.fontSize(function(d) {
    		return d.size;
    	})
    	.on("end", drawSkillCloud)
    	.start();

// Finally implement `drawSkillCloud`, which performs the...