Introduction
This visualization show a rotating ball of tags, each linking to some url (on a user click). You're able to control speed, color, and the font size for each tag individually. The widget itself uses flash, and it is an open-source. See http://wordpress.org/extend/plugins/wp-cumulus/ and http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/
Details
Setup
- Include the js files http://word-cumulus-goog-vis.googlecode.com/svn/trunk/swfobject.js and http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js in your html header
- Create a div container for the visualization
Inputs
The DataTable format accepted by the visualization, assumes the first column (string) has the user-text to show, and the second column (string) has the target urls. An optional third column (number) can contain font sizes.
Options properties that may be passed to draw:
* text_color (e.g., '#ff0000')
* hover_text_color
* height (in px, default = 300)
* width (in px, default = 400)
* speed (default = 100, higher means faster rotation)
Code Sample
``` google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(drawVisualization);
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Tag');
data.addColumn('string', 'URL');
data.addRows(7);
data.setCell(0, 0, 'Brazil');
data.setCell(0, 1, 'http://www.youtube.com/results?search_query=brazil+fifa+world+cup');
data.setCell(1, 0, 'Italy');
data.setCell(1, 1, 'http://www.youtube.com/results?search_query=italy+fifa+world+cup');
data.setCell(2, 0, 'Germany');
data.setCell(2, 1, 'http://www.youtube.com/results?search_query=germany+fifa+world+cup');
data.setCell(3, 0, 'Argentina');
data.setCell(3, 1, 'http://www.youtube.com/results?search_query=argentina+fifa+world+cup');
data.setCell(4, 0, 'Uruguay');
data.setCell(4, 1, 'http://www.youtube.com/results?search_query=uruguay+fifa+world+cup');
data.setCell(5, 0, 'France');
data.setCell(5, 1, 'http://www.youtube.com/results?search_query=france+fifa+world+cup');
data.setCell(6, 0, 'England');
data.setCell(6, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
// Instantiate our table object.
var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));
// Draw our table with the data we created locally.
vis.draw(data, {text_color: '#00ff00', speed: 50, width:600, height:600});
}
FIFA World Cup: Country appearances in the final four
```