Friday, November 7, 2008

Silverlight tag cloud

Updated to version 1.1

Animated Tag Cloud

changes are:

  • have made the id of the element that the cloud is created parameter driven (see feCloudElementId) below in Javascript

  • click on a label now shows a simple pop-up selections of posts, clicking on the first item will show all posts with that label, other entries take you direct to the post

  • Changed the background sphere to be silver rather than yellow - big change ;-)

  • mousing over a label now shows its co-occurances visually with lines



To insert into your blog use (under dashboard, layout, edit html, ensure that expand widget templates is checked).

Find the following:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

insert widget here


<b:widget id='Label2' locked='false' title='Dynamic Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='feCloud' style='text-align: center;'/>
<script src='http://www.figmentengine.com/tagCloud/feCloudv1.1.js' type='text/javascript'/>
<script type='text/javascript'>
var feCloudElementId = 'feCloud';
var feCloudFeedAddress = 'http://feedproxy.google.com/FigmentEngine';
var feCloudNavigateFormat = 'http://blog.figmentengine.com/search/label/{0}';
var feCloudSize = 400;
feTagCloudLoad(feCloudElementId, feCloudFeedAddress, feCloudNavigateFormat, feCloudSize, feCloudSize);
</script>
</b:includable>
</b:widget>


In order to start using this version, you need to change your javascript to reference v1.1 of the js file, and add an additional parameter of the id of cloud element. This should allow you to host multiple clouds on the same page, or at least give more flexibility about the cloud id.

9 comments:

Vincent said...

I love pulling a tag and watching all the other tags get tugged along. This is awesome!

witchiko said...

will this work on a wordpress.com hosted blog?

jasonpriem said...

Nice job...gives a lot of information for the space, which is of course a hallmark of a good visualization. I particularly like the lines to show co-occurrence. I just finished an animated tagcloud myself (although mine used straight javascript) and you've got me beat for information density.

fe said...

This should work on any site, a more recent version of the cloud is available at Silverlight Tag Cloud

Charcoal Moon said...

So to use on a regular site (not Blogger or Wordpress -- my own hosted page) do we just need lines 06 through 14? Anything else?

Charcoal Moon said...

So to use this on a regular site (not Blogger or Wordpress - my own hosted website) do we just need lines 06 through 14? Anything else?

Shilpi said...

How to change the javascript to reference v1.1 of the js file, and add an additional parameter of the id of cloud element.

Please Please help!!!!

Jesse said...

I just dragged the whole cloud off the panel! Sweet, clear skies!

fe said...

@Shilpi see http://blog.figmentengine.com/2009/06/how-silverlight-tag-cloud-works.html