Quote “Show your skillset with the interactive colorful D3.js tag cloud” , here is a working example of how to create such a cloud. It is based on the Jason Davis cloud computing layout script (in turn inspired by Wordle ), which is used to manage D3.js for drawing a cloud.
You can see the working sample built in below as well as in jsfiddle .
The entire example can be found on GitHub at: https://github.com/bbottema/d3-tag-skills-cloud
First, define the cloud data using the text and size properties:
var skillsToDraw = [ { text: 'javascript', size: 80 }, { text: 'D3.js', size: 30 }, { text: 'coffeescript', size: 50 }, { text: 'shaving sheep', size: 50 }, { text: 'AngularJS', size: 60 }, { text: 'Ruby', size: 60 }, { text: 'ECMAScript', size: 30 }, { text: 'Actionscript', size: 20 }, { text: 'Linux', size: 40 }, { text: 'C++', size: 40 }, { text: 'C#', size: 50 }, { text: 'JAVA', size: 76 } ];
Next, you need to use a script layout to calculate the placement, rotation and size of each word:
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, we implement drawSkillCloud , which executes the D3 drawing:
// apply D3.js drawing API function drawSkillCloud(words) { d3.select("#cloud").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + ~~(width / 2) + "," + ~~(height / 2) + ")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("-webkit-touch-callout", "none") .style("-webkit-user-select", "none") .style("-khtml-user-select", "none") .style("-moz-user-select", "none") .style("-ms-user-select", "none") .style("user-select", "none") .style("cursor", "default") .style("font-family", "Impact") .style("fill", function(d, i) { return fill(i); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [dx, dy] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); }
This is the main thing. You can influence the size and which angles are used to select random spins, as well as some additions between words, if you want, and the fill color, but these are the basics!
Look at the work in the snippet (or jsfiddle ):
<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>
You can read a more detailed introduction, followed by a more advanced approach to “Show your skillset with an interactive colorful D3.js tag cloud” . Get a sample project at https://github.com/bbottema/d3-tag-skills-cloud .