Skip to content

Instantly share code, notes, and snippets.

@raghothams

raghothams/d3-word-cloud.js

Created October 6, 2016 17:15
Show Gist options
  • Save raghothams/7f280223bf75c5d475c20f9a8458c110 to your computer and use it in GitHub Desktop.
Save raghothams/7f280223bf75c5d475c20f9a8458c110 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. raghothams created this gist Oct 6, 2016.
    32 changes: 32 additions & 0 deletions d3-word-cloud.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    d3.layout.cloud().size([1200, 600])
    .words([
    ".NET", "Silverlight", "jQuery", "CSS3", "HTML5", "JavaScript", "SQL","C#"].map(function(d) {
    return {text: d, size: 10 + Math.random() * 50};
    }))
    .rotate(0)
    .fontSize(function(d) { return d.size; })
    .padding(5)
    .spiral("archimedean")
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .on("end", draw)
    .start();

    function draw(words) {
    d3.select("#word-cloud").append("svg")
    .attr("width", "100%")
    .attr("height", 400)
    .attr("class", "wordcloud")
    .append("g")
    .attr("transform", "translate(600,200)")
    // fix word spacing
    .attr("text-anchor", "middle")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size", function(d) { return d.size / 2 + "px"; })
    .style("fill", function(d, i) { return color(i); })
    .attr("transform", function(d) {
    return "translate(" + [d.x / 1.75, d.y / 1.75 ] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) { return d.text; });
    }