Show Your Data in a Tag Cloud with XPath Expressions

Joncamp_1

Hi everyone, Jon Campbell here again with another great way to visualize your data in using DataViews. Tag clouds are a popular way to visually show how various terms are related to each other by assigning weights to each term, then using those weights to make the term larger or smaller in relation to other terms. I provided a screenshot from the Explore page on flickr. A quick glance can tell you right away there are many more photos tagged with the term “wedding” than there are with the term “blue”, but there are about as many photos tagged “snow” as there are photos tagged “spain”. After reading this post you will be able to create a tag cloud using your own data.

clip_image002

As with many of my other posts, I am using an xml file as my datasource (though you could use any datasource supported by the DataView). My sample xml file (Sales.xml) includes a list of sales people and their sales numbers for a given period.

<?xml version="1.0" encoding="utf-8" ?>
<dsQueryResponse>
<Rows>

<Row Title="Bob Stevens" Sales="28000"/>

<Row Title="Sally Jones" Sales="75000"/>

<Row Title="Jim Moore" Sales="22000"/>

<Row Title="Rebecca Anderson" Sales="30000"/>

<Row Title="Bill Baily" Sales="36000"/>

<Row Title="Alfredo Marinz" Sales="14000"/>

</Rows>

</dsQueryResponse>

Start by creating the Sales.xml file, then creating a new page and inserting a dataview using that data. Select the DataViewand then click Data View ->Data View Properties, then select the “Layout” tab. There are a number of different styles available, but the style that is closest to the tag cloud we are trying to emulate is the “horizontal list” style.

clip_image004

Next, select one of the names in the data view and clickEdit ->Quick tag editor… to bring up the quick tag editor. We want to surround the name with a <span> tag so that we can apply our font styling, so select “wrap tag” from the drop down and then type “<span style=’font-size: 12’>” into the dialog. Click the green checkbox to close the dialog.

clip_image006

The next task is to figure out how to determine the size of the font to be used. The exact formula will be specific to your data, but for my data I chose to have tags have a font-size of 16 on average. The basic formula is 8 + (8 * (1 + ((S-A) / A)), where S is the sales for the salesperson and A is the average. “1 + (S-A) / A” gives the deviation from the average as a percentage. Multiplying by 8 gives a scaling value. The great thing about the DataView is that it’s based on XSL, and XSL has support for things like summations, rounding, basic math, and more. The final XSL expression for the font size looks like this:

8 + 8 * round((1 + ((@Sales - (sum(../Row/@Sales) div count(../Row/@Sales))) div (sum(../Row/@Sales) div count(../Row/@Sales)))))

Things to note about the XSL expression:

· font-size is an integer, so we will want to round the percentage to a whole number.

· The way we do an average in xsl is to do a summation divided by a count.

· For the current row’s sales are obtained via the current node via @Sales

· The average needs the set of all sales values. Since the expression is currently on a row, the “..” moves to the parent “Rows”, and then the “Row/@Sales” obtains all the sales numbers.

To apply our XPath expression to the font-size CSS attribute, select one of the names in the DataView, then used the tag selector to choose the <span> tag.

clip_image008

Click Task Panes ->Tag Properties and find the “style” attribute entry. Notice that when you click into the textbox on the right two buttons appear – “…” and “fx”. We want to replace the fixed setting of 12 with a formula, so highlight the “12” and then click the fx button.

clip_image010

You should now be in the XPath Expression builder. I would encourage you to explore the various functions that are available. Since we already figured out what the expression should be, just paste it into the XPath expression text box and hit ok.

clip_image012

When you get back to the design view you should now have something like this:

clip_image014

With a little bit of CSS you can easily end up with something pretty close to the flickr example from above.

clip_image016

I hope this is useful for some of you. I’m looking forward to the exciting ways you can find to use DataViews with conditional formatting and XPath Expressions. Enjoy!

Jon

TagCloud.zip