lorenzopub/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="https://rawgit.com/jasondavies/d3-cloud/master/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 - http://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>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://rawgit.com/jasondavies/d3-cloud/master/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 - http://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>