In Generating a WordPress posting categories page – part 1, you learned how to
- get the HTML with all the category information from your WordPress.com blog,
- convert that to XHTML,
- generate an XSD for the XHTML,
- generate C# classes from that XSD
This episode, you will learn how the data read from the XHTML can be transformed to a simple tree in HTML suited for a posting categories page like mine.
In the final post, the same data will be transferred into a real category cloud with font sizes indicating the frequency of the category usage.
From there, you can go into other directions (for instance generating squarified treemaps from the data).
That’s the cool thing about data: there are many ways to visualize, and this series was meant – next to some groundwork on how to get the data – as inspiration into some forms of visualization.
Hope you had fun reading it!
Getting a HTML tree from the optionType items
StringBuilder outputHtml = new StringBuilder();
string rootUrl = args[1];
foreach (optionType item in select.option)
{
if (item.Level == optionType.RootLevel)
continue;
// <a style="font-size: 100.3986332574%; padding: 1px; margin: 1px;" title="XML/XSD (23)" href="https://wiert.me/category/development/xmlxsd/">XML/XSD</a>
string url = String.Format("{0}/category{1}", rootUrl, item.HtmlPath);
string prefix = new string('.', item.Level * 5);// optionType.NbspEscaped.Repeat(item.Level);
outputHtml.AppendFormat("{0}<a title="{2}" href="{1}">{2} ({3})</a>", prefix, url, item.Category, item.Count);
outputHtml.AppendLine();
}
One way of generating an HTML tree, is to prefix every node with a series of dots corresponding with the level of that node. Not the most pretty sight, but it will suffice for this episode.
Inside each node, I want to show the Category and Count.
Since the optionType as generated from the XSD only contains the below properties, a major portion on this posting is how to decode the Value so we can generate HTML like this:
...............<a href='https://wiert.me/category/development/software-development/net/c-' title='C#'>C# (118)</a>
....................<a href='https://wiert.me/category/development/software-development/net/c-/c--2-0' title='C# 2.0'>C# 2.0 (46)</a>
....................<a href='https://wiert.me/category/development/software-development/net/c-/c--3-0' title='C# 3.0'>C# 3.0 (33)</a>
....................<a href='https://wiert.me/category/development/software-development/net/c-/c--4-0' title='C# 4.0'>C# 4.0 (31)</a>
....................<a href='https://wiert.me/category/development/software-development/net/c-/c--5-0' title='C# 5.0'>C# 5.0 (2)</a>
Decoding the optionType Value property
optionType only contains the these properties:
- class
- the class used to reference the style in the stylesheet
- example value: “level-4”
- value
- internal unique WordPress ID for the category (this allows you to alter the
Slug and Value without breaking the links between posts and categories
- example value: “45149061”
- Value
- string that WordPress uses to make the category combobox look like a tree structure
- example value: “ C# 5.0 (2)”
The extra properties needed for the HTML generation logic above are these:
- Category
- Count
- the
Value undone from leading non breaking space character escapes, Caption information, separator non breaking space character escapes, and surrounding parenthesis
- example value:
2
- Level
- the
class undone from the level- prefix
- example value:
4
- Slug
- the category slug is the unique value for a category that WordPress uses to form category urls. It is auto-generated from the Category, but you can also edit it. I don’t, as it is not in the combobox HTML, so I derive it from the Category. Note there are also posting slugs used in the permalink of each post.
- example value:
c--5-0 (it consists of lowercase letters and hyphens derived from the Category)
- HtmlPath
- parent (used internally for making the HtmlPath code much easier
The really cool thing about XSD2Code is that it generated the optionType C# code as a partial class.
Which means we can extend the generated partial classes in a seperate C# file like the code fragments below (you can download it from the WordPressCategoriesDropDown.cs file at BeSharp.CodePlex.com)
partial class optionType
{
public const int RootLevel = -1;
private const string slash = "/";
private const char hyphen = '-';
public const string NbspEscaped = " ";
private const string emptyCountInParenthesis = "(-1)";
public optionType parent { get; set; }
public string Category
{
get
{
string result;
string countInParenthesis;
splitValue(out result, out countInParenthesis);
return result;
}
}
public int Count
{
get
{
string category;
string countInParenthesis;
splitValue(out category, out countInParenthesis);
string count = countInParenthesis.Substring(1, countInParenthesis.Length - 2);
int result = int.Parse(count);
return result;
}
}
public int Level
{
get
{
if (string.IsNullOrWhiteSpace(@class))
return RootLevel;
string[] split = @class.Split(hyphen);
string number = split[1];
int result = int.Parse(number);
return result;
}
}
/// <summary>
/// This is the HTML part that WordPress uses to reference a Category
/// </summary>
public string Slug
{
get
{
StringBuilder result = new StringBuilder();
foreach (char item in Category)
{
if (char.IsLetterOrDigit(item))
result.Append(item.ToString().ToLower());
else
if (result.Length > 0)
result.Append(hyphen);
}
return result.ToString();
}
}
public string HtmlPath
{
get
{
if (RootLevel == Level)
return string.Empty;
string result = Slug;
if (null != parent)
result = parent.HtmlPath + slash + result;
return result;
}
}
private void splitValue(out string category, out string countInParenthesis)
{
// might want to do this using RegEx, but that is a write-only language https://wiert.me/category/development/software-development/regex/
string result = Value;
int nbspCountToStripFromLeftOfValue = Level * 3; // strip 3 for each Level
for (int i = 0; i < nbspCountToStripFromLeftOfValue; i++)
{
int nbspEscapedLength = NbspEscaped.Length;
if (result.StartsWith(NbspEscaped))
result = result.Substring(nbspEscapedLength, result.Length - nbspEscapedLength);
}
string doubleNbspEscaped = NbspEscaped + NbspEscaped;
if (result.Contains(doubleNbspEscaped))
{
string[] separators = new string[] { doubleNbspEscaped };
string[] split = result.Split(separators, StringSplitOptions.None);
category = split[0];
countInParenthesis = split[1];
}
else
{
category = result;
countInParenthesis = emptyCountInParenthesis;
}
}
public override string ToString()
{
string result = string.Format("Level {0}, Count {1}, Slug {2}, HtmlPath {3}, Category '{4}'", Level, Count, Slug, HtmlPath, Category);
return result;
}
}
The bulk of the above code is in the splitValue method (that could have used RegEx, but I try to avoid RegEx when I can do without it).
Note that the HtmlPath propererty uses the parent property. Without it, the HtmlPath code would have been very complex. The value of the parent properties for all optionType instances is generated in the selectType.FixParents method below since the selectType instance contains all the optionType instances in its’ option property.
partial class selectType
{
public void FixParents()
{
Stack<optionType> itemStack = new Stack<optionType>();
optionType parent = null;
int previousLevel = optionType.RootLevel;
foreach (optionType item in option)
{
int itemLevel = item.Level;
if (itemLevel == previousLevel)
{
if (optionType.RootLevel != itemLevel)
{
itemStack.Pop();
item.parent = parent;
}
itemStack.Push(item);
}
else
{
if (itemLevel > previousLevel)
{
parent = itemStack.Peek();
}
else
{
do
{
itemStack.Pop();
parent = itemStack.Peek();
previousLevel = parent.Level;
}
while (previousLevel >= itemLevel);
}
itemStack.Push(item);
item.parent = parent;
previousLevel = itemLevel;
}
}
}
}
–jeroen
(Note: I will link to the XSD before/after, as WordPress – yet again – screws the XSD sourcecode in the post; 
The Wiert Corner - irregular stream of stuff 