Animated d3 word cloud

d3 cloud example

An example of how to animate a d3-cloud word cloud.

Based on https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html.

forked from jwhitfieldseed's block: Animated d3 word cloud

forked from willroj's block: Animated d3 word cloud

forked from lorenzopub's block: Animated d3 word cloud

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jasondavies/d3-cloud/build/d3.layout.cloud.js"></script>
  <script>

//Simple animated example of d3-cloud - https://github.com/jasondavies/d3-cloud
//Based on https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

// Encapsulate the word cloud functionality
function wordCloud(selector) {

var fill = d3.scale.category20();

//Construct the word cloud's SVG element
    var svg = d3.select(selector).append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .append("g")
        .attr("transform", "translate(250,250)");

//Draw the word cloud
    function draw(words) {
        var cloud = svg.selectAll("g text")
                        .data(words, function(d) { return d.text; })

//Entering words
        cloud.enter()
            .append("text")
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("text-anchor", "middle")
            .attr('font-size', 1)
            .text(function(d) { return d.text; });

//Entering and existing words
        cloud
            .transition()
                .duration(600)
                .style("font-size", function(d) { return d.size + "px"; })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .style("fill-opacity", 1);

//Exiting words
        cloud.exit()
            .transition()
                .duration(200)
                .style('fill-opacity', 1e-6)
                .attr('font-size', 1)
                .remove();
    }

//Use the module pattern to encapsulate the visualisation code. We'll
    // expose only the parts that need to be public.
    return {

//Recompute the word cloud for a new set of words. This method will
        // asycnhronously call draw when the layout has been computed.
        //The outside world will need to call this function, so make it part
        // of the wordCloud return value.
        update: function(words) {
            d3.layout.cloud().size([500, 500])
                .words(words)
                .padding(5)
                .rotate(function() { return ~~(Math.random() * 2) * 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw)
                .start();
        }
    }

}

//Some sample data - https://en.wikiquote.org/wiki/Opening_lines
var words = [
    "Feliz Cumpleaños Deisy, sabes que te quiero muchísimo, un fuerte abrazo"
]

//Prepare one of the sample sentences by removing punctuation,
// creating an array of words and computing a random size attribute.
function getWords(i) {
    return words[i]
            .replace(/[!\.,:;\?]/g, '')
            .split(' ')
            .map(function(d) {
                return {text: d, size: 10 + Math.random() * 60};
            })
}

//This method tells the word cloud to redraw with a new set of words.
//In reality the new words would probably come from a server request,
// user input or some other source.
function showNewWords(vis, i) {
    i = i || 0;

vis.update(getWords(i ++ % words.length))
    setTimeout(function() { showNewWords(vis, i + 1)}, 2000)
}

//Create a new instance of the word cloud visualisation.
var myWordCloud = wordCloud('body');

//Start cycling through the demo data
showNewWords(myWordCloud);

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js to https://cdn.jsdelivr.net/gh/jasondavies/d3-cloud/build/d3.layout.cloud.js

https://d3js.org/d3.v3.min.js

https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js