Show Your Data in a Tag Cloud with XPath Expressions

Show Your Data in a Tag Cloud with XPath Expressions

Rate This
  • Comments 12

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

Attachment: TagCloud.zip
  • Hi,

    When I try the expression you mentioned still I don't see the font-size getting changed after applying the function in the Designer. What could be the issue?

    Shalin Parmar

  • Algunos Vinculos interesantes para compartir : 1 - Como generar TAG Clouds con SharePoint Designer /

  • Excellent post.  Keep these coming.

  • Shalin - I just tried to see if I could get the behavior you are seeing. When the font-size style was not properly formed. Specifically, when the "px" part of the font-size expression was malformed then I got the behavior you are seeing. For reference, here is the final value that should be the style for the span tag.

    font-size: {8 + 8 * round((1 + ((@Sales - (sum(../Row/@Sales) div count(../Row/@Sales))) div (sum(../Row/@Sales) div count(../Row/@Sales)))))}px

  • Hi,

    The article is great,but i am still finding one problem with weight calculation logic.8 + (8 * (1 + ((S-A) / A)).Though it works fine in some cases,but in some other cases,the tags doesn't dispaly properly.This actually turned out to be because of the fact we are assigning the values with 'px' which are absolute values,instead it should be given in "em"(Relative values).Any ideas on how to convert this logic in "em"

  • Amit - You are correct in that my formula didn't take into account all possible values. If you want to use "em" sizing instead then you would want to center around 1 being the norm, so you don't need to scale by 8. em values range from 0-infinity technically, but in reality you probably want something that ranges from 0-10 or so, weighted to be between 0 and 2 most often. the basic 1+ S-A/A logic should be fine as a basis.

  • Just in case you are looking for a comercial solution to implement muliple taxonomies for your SharePoint portal (WSS/MOSS), so you don't rely too much on main navigation:

    SharePartXXL offers an extension with cross-site centrally managed, tree-style categories that can be used in all lists and libraries to categorize the content using different taxonomies, e.g. organizational, by products or geographically. Metadata from categorized content can be shown in dynamic category-based sites for navigation, related items are shown in the items detail view resulting in some kind of browsable corporate knowledge network. In V2.0 tag clouds are announced to be included.

    Please check it out:

    http://www.sharepartxxl.com/products/taxonomy/default.aspx

  • Any proposal that includes the DataFormWebPart makes me uneasy to say the least, as it exposes the programmer to many of DFWP's bugs. Such a proposal is of very limited value unless it includes workarounds for the bugs the programmers may encounter.

    Using DFWP to create tag clouds exposes the programmer to at least two known bugs:

    1. Sharepoint Designer starts adding whitespace inside the DFWP's XSLT code, enlarging a 92 Kb page to 10+ MB, at which point the page can no longer be opened by SPD.

    2. DFWP is prohibitevely slow when used with large amounts of data. Using this tag cloud technique for Sharepoint data will result in multi-second delays.

    Finally, while using XSLT and XPath for conditional formatting is harder and more error prone for the programmer, it is downright scary for the end user.

  • Hi Panagiotis Kanavos,

    I'd like to get more information about the problems you see in the Data Form. Granted, using XPATH can be very complex and (as you note) error prone; unfortunately that is really the only alternative for creating the kind of rich formatting here.

    For the two issues you raise specifically, we have seen posts about the added white space, but that should definitely not be the default, nor should it happen in every data view.  As I run through this scenario, I do not see that happening, so if you do, I'd love to get a solid repro case and get it fixed.

    As for the performance, you are correct that when gathering the XML data there is a performance hit. In this case for example, we need to get all of the data and then do sums on it in XPATH. For the data I have used, I didn't see multiple second delays, but for some data sets, I'm sure you would. Can you let us know what your typical data set size is and the latency you see? Is it worse than when using an asp.net gridview control against the same source?

    -John Jansen (SPD Test Lead)

  • This is very interesting, I have a question related to this post, how do I create a "tag cloud" from a lookup field? I use the lookup field to tag the articles instead of having a text field.

  • AlexD - You should be able to make it work. The XSL will be a little trickier because in my example I had numerical values. In your comment it sounds like you are wanting to count the number of times a lookup references a specific term. You can do it, but you will need to use some custom XSL to generate those counts.

  • Hi, Im trying to do a subtotal with this structure:

    Header

     -Header 2 1.1

        -Detail

        -Detail

     -Header 2 1.2

        -Detail

        -Detail

    Another Header

      -Another Header 2

         -Another Detail

    I want to get a subtotal of the detail on the Header 2 line and a total for the header, but when I do the total for the HEADER 2, it sums all the lines that dont belong on the grup, can someone help me or point me on the right direction, I want to subtotal by groups on a sharepoint list, I know how to do it on basic SharePoint, but it is not working on Designer.

Page 1 of 1 (12 items)
Leave a Comment
  • Please add 7 and 4 and type the answer here:
  • Post