Visualizing WordPress Tags with Processing.js

I’ve studied a little bit of processing in my college years. It is an amazing programming language to visualize data and create unpredictable and beautiful graphics. Processing.js (thanks to John Resig) is a port of Processing to JavaScript, using the Canvas element to render. So today I’ve decided to try visualizing my WordPress tags using Processing.js and see how it goes. I borrowed the source code from header visualization of Processingjs.org and change the circles’ widths from random values to values proportional to the usage count of each tag. I also output each tag’s name and count number on its representative circle.

The tricky part of this experiment is to fetch wordpress tags and store it into an array in processing. So it turns out, you can execute php code between <script type=”application/processing”></script>. So I wrote a function and put it in my functions.php:


function MyTagValues($categoryName) {
	//Get tag values
	query_posts('category_name='.$categoryName);
	if (have_posts()) : while (have_posts()) : the_post();
        $posttags = get_the_tags();
		if ($posttags) {
			//USING JUST $tag MAKING $all_tags_arr A MULTI-DIMENSIONAL ARRAY
			foreach($posttags as $key => $tag) {
				$all_tags_arr[$key]['name'] = $tag -> name;
				$all_tags_arr[$key]['count'] = $tag -> count;
			}
		}
	endwhile; endif;
	
	//Prepare values for Processing
		$total = count($all_tags_arr);
		$i = 0;
		$j = 0;
		$k = 0;
		
		echo "int[] radius = new int[".$total."];\n";
		echo "String[] tag = new string[".$total."];\n";
		echo "int total = ".$total.";\n";
		
		echo "radius = {";
			foreach($all_tags_arr as $tag) {
				echo ($i < ($total-1))? $tag['count']."," : $tag['count'];
				$i = $i + 1;
			}
		echo "};\n";
		
		echo "tag = {";
			foreach($all_tags_arr as $tag) {
				echo ($j < ($total-1))? '"'.$tag['name'].' / '.$tag['count'].'",' : '"'.$tag['name'].' / '.$tag['count'].'"';
				$j = $j + 1;
			}
		echo "};\n";	
}

Then I put the following in between <script type="application/processing"></script> right at its start.


<?php MyTagValues('mySpecificCategory'); ?>


By using the above, I was able to get two arrays, one called "radius" containing the tag count values and another one called "tag" containing the tag names. Then after that, it will be the codes to visualize my tags as moving circles.

I still haven't figured out how to make each circle linked to its tag page. So I've decided to just make the visualization as an interesting background that you may find at the bottom of the lab landing page.

tag-bubbles