KoalaRainbow :: Example Visualizations


This document is just full of examples you can plug into your "visualization lab" page and get some result.  Of course, since your data is different, they make look much different.  If you have a blog that's got a lot of entries and the embedded query just uses /entries unfiltered, you might want to change it to be something like /entries[days_old(created_on) { 7] in order to force it to only use the more recent entries.

As a note,  I only tested with one blog, so these examples assume one blog.  You may need to add additional constraints in any cases where you perform global searches rather than relying on a passed-in entries context.

Blog Pulse Monitor



This is similar to the weird boxy thing below, but makes more sense.  It is supposed to resemble one of those pulse monitor gizmos in a hospital.  Each entry maps to a paired down-pulse and up-pulse.  The height of the pulse is the number of comments posted on that entry.  So, if you have no comments posted on any of the entries displayed, your blog is flat-lining.  Get it?  An exercise to the reader is to get the color red in there somehow.

Lab Version:
<MTKRVisualization width="400" height="50" scale="auto" bg="color('black')" 
padall="5">
<MTKRVsetval x="0" nextx="0" linecolor="color('green')" spacewidth="2" pulsehalfwidth="1">

<MTKRVsetval nextx="add($nextx, $spacewidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">
<MTKRVsetval x="$nextx">

<MTKRVloop query="/entries">
<MTKRVsetval nextx="add($x, $pulsehalfwidth)">
<MTKRVline x1="$x" y1="0" x2="$nextx" y2="int(comment_count)" edgecolor="$linecolor">

<MTKRVsetval x="$nextx" nextx="add($nextx, mul(2, $pulsehalfwidth))">
<MTKRVline x1="$x" y1="int(comment_count)" x2="$nextx" y2="sub(0, comment_count)" edgecolor="$linecolor">

<MTKRVsetval x="$nextx" nextx="add($nextx, $pulsehalfwidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">

<MTKRVsetval x="$nextx">
</MTKRVloop>

<MTKRVsetval nextx="add($nextx, $spacewidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">
</MTKRVisualization>
Weekly Archive Version (add filename, change source of data to mtenv entries):
<MTKRVisualization width="400" height="50" scale="auto" bg="color('black')" padall="5"
filename="archives/%Y/%m/vis.png">
<MTKRVsetval x="0" nextx="0" linecolor="color('green')" spacewidth="2" pulsehalfwidth="1">

<MTKRVsetval nextx="add($nextx, $spacewidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">
<MTKRVsetval x="$nextx">

<MTKRVloop query="mtenv('entries')">
<MTKRVsetval nextx="add($x, $pulsehalfwidth)">
<MTKRVline x1="$x" y1="0" x2="$nextx" y2="int(comment_count)" edgecolor="$linecolor">

<MTKRVsetval x="$nextx" nextx="add($nextx, mul(2, $pulsehalfwidth))">
<MTKRVline x1="$x" y1="int(comment_count)" x2="$nextx" y2="sub(0, comment_count)" edgecolor="$linecolor">

<MTKRVsetval x="$nextx" nextx="add($nextx, $pulsehalfwidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">

<MTKRVsetval x="$nextx">
</MTKRVloop>

<MTKRVsetval nextx="add($nextx, $spacewidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">
</MTKRVisualization>
Category Archive Version (make filename choice dynamic):
<MTKRVisualization width="400" height="50" scale="auto" bg="color('black')" padall="5"
filename_dyn="concat('archives/', mtdirify(mtenv('archive_category')/label), '/vis.png')">
<MTKRVsetval x="0" nextx="0" linecolor="color('green')" spacewidth="2" pulsehalfwidth="1">

<MTKRVsetval nextx="add($nextx, $spacewidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">
<MTKRVsetval x="$nextx">

<MTKRVloop query="mtenv('entries')">
<MTKRVsetval nextx="add($x, $pulsehalfwidth)">
<MTKRVline x1="$x" y1="0" x2="$nextx" y2="int(comment_count)" edgecolor="$linecolor">

<MTKRVsetval x="$nextx" nextx="add($nextx, mul(2, $pulsehalfwidth))">
<MTKRVline x1="$x" y1="int(comment_count)" x2="$nextx" y2="sub(0, comment_count)" edgecolor="$linecolor">

<MTKRVsetval x="$nextx" nextx="add($nextx, $pulsehalfwidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">

<MTKRVsetval x="$nextx">
</MTKRVloop>

<MTKRVsetval nextx="add($nextx, $spacewidth)">
<MTKRVline x1="$x" y1="sub(0, comment_count)" x2="$nextx" y2="0" edgecolor="$linecolor">
</MTKRVisualization>

Hanging Day Line


This visualization draws a timeline consisting of the last 7 days (including today, which is why it's -6d instead of -7d in there.)  Every day that there is at least one entry, we put a dot on the line.  If there isn't a dot, we leave that spot blank.  Then, for each entry, we put a box hanging off that dot.  The size of the dot is a clamped linear interpolation based on the number of comments.  The color of each box is factor of a constant and two dynamic factors...

The hue is determined by the category, so all posts in the same category have the same hue.  This is done by first getting the set of all categories once and saving them to a variable.  Then, for each entry, we use position_percent to find the position of the category in the set of all categories, express as a value in the range (0, 1.0].  This nicely creates a consistent color mapping for the categories.

The brightness (the 'v' in hsv) is determined by a clamped linear interpolation based on the number of characters in the 'text' associated with the entry.  You'll note that in the rightmost image, both posts are in the same category.  The first one has more text than the second one (a good deal, relatively), which makes it have a brighter color.  Since this was a test blog, most of my posts were actually pretty short, so if you were to use this example, you would want to change $lowlen and $highlen to better represent the range of text values you use.  Ideally, KRQL could provide a function or other mechanism to allow us to map/accumulate over the set of entries in question to determine the actual min and max ranges, and then interpolate based on those.  Some day, perhaps it shall.

Lab Version, Works for Main Index Too (put it outside MTEntries!):
<MTKRVisualization width="400" height="150" filename="index-vis.png">
<MTKRVsetval x="40" y="10" yoff="10" lowlen="24" highlen="128">
<MTKRVsetset this_weeks_entries="/entries[days_old(created_on) { 7]" categories="/categories">

<!-- Iterate over the days of last week. -->
<MTKRVloop name="today" query="date_range_set(date_manip(now(), '-6d'), 'd', '1d', 7, '1d')">
<MTKRVsetset todays_entries="$this_weeks_entries[date_in_range(created_on, $today)]">
<MTKRVif test="count($todays_entries) } 0">
<MTKRVcircle edge="20" x="$x" y="$y" layer="1" edgecolor="color('black')" fillcolor="color('gray')">

<MTKRVloop query="$todays_entries" >
<MTKRVsetval y="add($y, 50)">
<MTKRVline x1="$x" y1="sub($y, 50)" x2="$x" y2="$y" edgecolor="color('black')" layer="0">
<MTKRVsquare edge="lerp(comment_count, 0, 5, 10, 30)" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent(category, $categories), 0.5, lerp(len(text), $lowlen, $highlen, 0.3, 1.0))" layer="1">
</MTKRVloop>
</MTKRVif>

<MTKRVsetval x="add($x, 50)" y="$yoff">
<MTKRVif test="position_percent() { 1">
<MTKRVline x1="sub($x, 50)" y1="$y" x2="$x" y2="$y" edgecolor="color('black')">
</MTKRVif>
</MTKRVloop>

</MTKRVisualization>

VU View of Activity

Category Colored:


This visualization implements a VU-type view of activity over the course of the last 30 days.  Each column corresponds to a given day.  Each square represents an entry posting.  Each circle represents a comment being posted.  Each item is colored according to the category it is associated with (in the case of the comment, this is done by finding the entry it is associated with).

Entry Colored:


Same deal as above, but we've changed the colorization so that it's on a per-entry basis.  Note that the continuous hue range has the interesting effect here that it's easy to tell when someone has commented on a posting a while after it has been posted.  The colorization could be further tweaked so that the brightness of the color for each comment would be dependent on how long it has been since the entry was created.  Actually, let's do that:

Entry Colored With Brightness:


So now, a comment is brighter the older it is.  The ranges have been pretty specifically tweaked for my data here, but that's to express what things could look like.  I have also included a version that uses client-side image map functionality to link the entries and comments back to the relevant entry archive versions, but have not embedded the image map in this document.

Lab Version (Category Colored), works in index too:
<MTKRVisualization width="400" height="100" scale="auto" filename="index-vis2.png">
<MTKRVsetval x="0" y="0" edgesize="10" spacing="10">
<MTKRVsetset entries="/entries[days_old(created_on) { 30]"
comments="/comments[days_old(created_on) { 30]" categories="/categories">

<MTKRVline x1="$x" y1="add($y, div($spacing, 2))" x2="add($x,mul(30, $spacing))"
y2="add($y, div($spacing, 2))" edgecolor="color('black')">

<!-- Iterate over the days of last week. -->
<MTKRVloop1 name="today" query="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')">
<MTKRVsetset todays_entries="$entries[date_in_range(created_on, $today)]"
todays_comments="$comments[date_in_range(created_on, $today)]">

<MTKRVsetval y="0">
<MTKRVloop2 name="entry" query="$todays_entries">
<MTKRVrect edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent(category, $categories), 0.5, 0.8)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>
<MTKRVloop2 name="comment" query="$todays_comments">
<MTKRVcircle edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($entries[id = $comment/entry_id]/category, $categories), 0.5, 0.8)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>

<MTKRVsetval x="add($x, $spacing)">
</MTKRVloop1>
</MTKRVisualization>
Lab Version (Entry Colored), works in index too:
<MTKRVisualization width="400" height="100" scale="auto" filename="index-vis2.png">
<MTKRVsetval x="0" y="0" edgesize="10" spacing="10">
<MTKRVsetset entries="/entries[days_old(created_on) { 30]"
comments="/comments[days_old(created_on) { 30]" categories="/categories">

<MTKRVline x1="$x" y1="add($y, div($spacing, 2))" x2="add($x,mul(30, $spacing))"
y2="add($y, div($spacing, 2))" edgecolor="color('black')">

<!-- Iterate over the days of last week. -->
<MTKRVloop1 name="today" query="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')">
<MTKRVsetset todays_entries="$entries[date_in_range(created_on, $today)]"
todays_comments="$comments[date_in_range(created_on, $today)]">
<MTKRVsetval y="0">
<MTKRVloop2 name="entry" query="$todays_entries">
<MTKRVrect edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($entry, $entries), 0.5, 0.8)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>
<MTKRVloop2 name="comment" query="$todays_comments">
<MTKRVcircle edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($entries[id = $comment/entry_id], $entries), 0.5, 0.8)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>

<MTKRVsetval x="add($x, $spacing)">
</MTKRVloop1>
</MTKRVisualization>
Lab Version (Entry Colored With Brightness), works in index too:
<MTKRVisualization width="400" height="100" scale="auto" filename="index-vis2.png">
<MTKRVsetval x="0" y="0" edgesize="10" spacing="10">
<MTKRVsetset entries="/entries[days_old(created_on) { 30]"
comments="/comments[days_old(created_on) { 30]" categories="/categories">

<MTKRVline x1="$x" y1="add($y, div($spacing, 2))" x2="add($x,mul(30, $spacing))"
 y2="add($y, div($spacing, 2))" edgecolor="color('black')">

<!-- Iterate over the days of last week. -->
<MTKRVloop1 name="today" query="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')">
<MTKRVsetset todays_entries="$entries[date_in_range(created_on, $today)]"
todays_comments="$comments[date_in_range(created_on, $today)]">
<MTKRVsetval y="0">
<MTKRVloop2 name="entry" query="$todays_entries">
<MTKRVrect edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($entry, $entries), 0.5, 0.8)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>
<MTKRVloop2 name="comment" query="$todays_comments">
<MTKRVsetset myentry="/entries[id = $comment/entry_id]">
<MTKRVcircle edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($myentry, $entries), 0.5,
lerp(sub(days_old($myentry/created_on),days_old(created_on)), 0, 4, 0.2, 1.0))">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>

<MTKRVsetval x="add($x, $spacing)">
</MTKRVloop1>
</MTKRVisualization>
Lab/Index version with client-side image map magic and auto-image sizing:
<MTKRVisualization width="auto" height="auto" scale="auto" filename="index-vis2.png"
imagemap="vis2">
<MTKRVsetval x="0" y="0" edgesize="10" spacing="10">
<MTKRVsetset entries="/entries[days_old(created_on) { 30]"
comments="/comments[days_old(created_on) { 30]" categories="/categories">

<MTKRVline x1="$x" y1="add($y, div($spacing, 2))" x2="add($x,mul(30, $spacing))"
y2="add($y, div($spacing, 2))" edgecolor="color('black')">

<!-- Iterate over the days of last week. -->
<MTKRVloop1 name="today" query="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')">
<MTKRVsetset todays_entries="$entries[date_in_range(created_on, $today)]"
todays_comments="$comments[date_in_range(created_on, $today)]">
<MTKRVsetval y="0">
<MTKRVloop2 name="entry" query="$todays_entries">
<MTKRVrect edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($entry, $entries), 0.5, 0.8)"
url="concat(mtenv('blog')/archive_url,
fmtdate('%Y/%m/', $entry/created_on),
$entry/basename, '.', mtenv('blog')/file_extension)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>
<MTKRVloop2 name="comment" query="$todays_comments">
<MTKRVsetset myentry="/entries[id = $comment/entry_id]">
<MTKRVcircle edge="$edgesize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent($myentry, $entries), 0.5,
lerp(sub(days_old($myentry/created_on),days_old(created_on)),
0, 4, 0.2, 1.0))"
url="concat(mtenv('blog')/archive_url,
fmtdate('%Y/%m/', $myentry/created_on),
$myentry/basename, '.', mtenv('blog')/file_extension)">
<MTKRVsetval y="sub($y, $spacing)">
</MTKRVloop2>

<MTKRVsetval x="add($x, $spacing)">
</MTKRVloop1>
</MTKRVisualization>

Cross-Bar Category Display

Original Version


Meh Circle Version


Fancy Blurry Version


These visualizations are divided into horizontal bars, one per category.  Each category has a custom hue.  Each category bar shows activity over the past 30 days.  An activity metric is used to determine the brightness of the color used for each cell; the logic is applied from left-to-right, with the value being boosted when new comments/entries occur, and decaying with each step.

Note that there is a _lot_ of processing going on here.  In the "optimized" version of the fancy blurry version, we're still talking ~11 seconds.  Clearly, this demonstrates that much improvement could be made, but it's not absurdly unreasonable.

Original Version
<MTKRVisualization width="400" height="200" scale="auto" filename="index-vis3.png">
<MTKRVsetval x="0" y="0" edgesize="10" hspacing="10" vspacing="10" decaymult="0.6">
<MTKRVsetset
categories="/categories"
days_in_last_month="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')"
months_entries="/entries[days_old(created_on) { 30]"
months_comments="/comments[days_old(created_on) { 30]">

<!-- Iterate over our categories -->
<MTKRVloop1 name="category" query="$categories">
<MTKRVsetval x="0" activity="0" hue="position_percent_zero($category, $categories)">
<MTKRVsetset
cat_entries="$months_entries[category/id = $category/id]"
cat_comments="$months_comments[/entries[id = parent(2)/entry_id]/category/id = $category/id]">

<!-- Iterate over the days of the last month. -->
<MTKRVloop2 name="today" query="$days_in_last_month">
<MTKRVsetset todays_entries="$cat_entries[date_in_range(created_on, $today)]"
todays_comments="$cat_comments[date_in_range(created_on, $today)]">
<MTKRVsetval x="add($x, $hspacing)">

<!-- Decay our activity level as appropriate -->
<MTKRVsetval activity="mul($activity, $decaymult)">

<!-- Boost our activity level as appropriate -->
<MTKRVsetval comment_boost="mul(0.1, count($todays_comments))"
entry_boost="mul(0.4, count($todays_entries))">
<MTKRVsetval activity="min(1.0, add($activity, add($comment_boost, $entry_boost)))">

<!-- Map our color and draw our box -->
<MTKRVsetval mycolor="hsv($hue, 0.5, sub(1.0, $activity))">
<MTKRVsquare edge="$edgesize" x="$x" y="$y" edgecolor="$mycolor" fillcolor="$mycolor">
</MTKRVloop2>
<MTKRVsetval y="add($y, $vspacing)">
</MTKRVloop1>
</MTKRVisualization>

Meh Version
<MTKRVisualization width="400" height="200" scale="auto" bg="color('black')" filename="index-vis3.png">
<MTKRVsetval x="0" y="0" edgesize="10" hspacing="12" vspacing="12" decaymult="0.6">
<MTKRVsetset
categories="/categories"
days_in_last_month="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')"
months_entries="/entries[days_old(created_on) { 30]"
months_comments="/comments[days_old(created_on) { 30]">

<!-- Iterate over our categories -->
<MTKRVloop1 name="category" query="$categories">
<MTKRVsetval x="0" activity="0" hue="position_percent_zero($category, $categories)">
<MTKRVsetset
cat_entries="$months_entries[category/id = $category/id]"
cat_comments="$months_comments[/entries[id = parent(2)/entry_id]/category/id = $category/id]">

<!-- Iterate over the days of the last month. -->
<MTKRVloop2 name="today" query="$days_in_last_month">
<MTKRVsetset todays_entries="$cat_entries[date_in_range(created_on, $today)]"
todays_comments="$cat_comments[date_in_range(created_on, $today)]">
<MTKRVsetval x="add($x, $hspacing)">

<!-- Decay our activity level as appropriate -->
<MTKRVsetval activity="mul($activity, $decaymult)">

<!-- Boost our activity level as appropriate -->
<MTKRVsetval comment_boost="mul(0.2, count($todays_comments))"
entry_boost="mul(0.6, count($todays_entries))">
<MTKRVsetval activity="min(1.0, add($activity, add($comment_boost, $entry_boost)))">

<!-- Map our color and draw our box -->
<MTKRVsetval mycolor="hsv($hue, 0.5, $activity)">
<MTKRVcircle edge="$edgesize" x="$x" y="$y" edgecolor="$mycolor" fillcolor="$mycolor">
</MTKRVloop2>
<MTKRVsetval y="add($y, $vspacing)">
</MTKRVloop1>
</MTKRVisualization>
Fancy Blurry Version (~14 secs)
<MTKRVisualization width="400" height="150" padall="6" scale="auto" scalelayer="1"
bg="color('black')" filename="index-vis3.png">
<MTKRVsetval x="0" y="0" edgesize="10" hspacing="12" vspacing="12" decaymult="0.6">
<MTKRVsetset
categories="/categories"
days_in_last_month="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')"
months_entries="/entries[days_old(created_on) { 30]"
months_comments="/comments[days_old(created_on) { 30]">

<MTKRVfilter name="blur" sigma="10.0" layer="0">

<!-- Iterate over our categories -->
<MTKRVloop1 name="category" query="$categories">
<MTKRVsetval x="0" activity="0" hue="position_percent_zero($category, $categories)">
<MTKRVsetset
cat_entries="$months_entries[category/id = $category/id]"
cat_comments="$months_comments[/entries[id = parent(2)/entry_id]/category/id = $category/id]">

<!-- Iterate over the days of the last month. -->
<MTKRVloop2 name="today" query="$days_in_last_month">
<MTKRVsetset todays_entries="$cat_entries[date_in_range(created_on, $today)]"
todays_comments="$cat_comments[date_in_range(created_on, $today)]">
<MTKRVsetval x="add($x, $hspacing)">

<!-- Decay our activity level as appropriate -->
<MTKRVsetval activity="mul($activity, $decaymult)">

<!-- Boost our activity level as appropriate -->
<MTKRVsetval comment_boost="mul(0.2, count($todays_comments))"
entry_boost="mul(0.6, count($todays_entries))">
<MTKRVsetval activity="min(1.0, add($activity, add($comment_boost, $entry_boost)))">

<!-- Map our color and draw our box -->
<MTKRVsetval mycolor="hsv($hue, 0.5, $activity)">
<MTKRVcircle edge="mul(add($activity, 1.0),$edgesize, 2.0)" x="$x" y="$y"
 edgecolor="$mycolor" fillcolor="$mycolor">
<MTKRVcircle edge="max(1,min(8,mul(sub(1.0, $activity),$edgesize)))" x="$x" y="$y"
edgecolor="$mycolor" fillcolor="$mycolor" layer="1">

</MTKRVloop2>
<MTKRVsetval y="add($y, $vspacing)">
</MTKRVloop1>
</MTKRVisualization>
Fancy Blurry "Optimized" Version (~11 seconds)
<MTKRVisualization width="400" height="150" padall="6" scale="auto" scalelayer="1"
bg="color('black')" filename="index-vis3.png">
<MTKRVsetval x="0" y="0" edgesize="10" hspacing="12" vspacing="12" decaymult="0.6">
<MTKRVsetset
categories="/categories"
days_in_last_month="date_range_set(date_manip(now(), '-29d'), 'd', '1d', 30, '1d')"
months_entries="/entries[days_old(created_on) { 30]"
months_comments="/comments[days_old(created_on) { 30]">

<MTKRVfilter name="blur" sigma="10.0" layer="0">

<!-- Iterate over our categories -->
<MTKRVloop1 name="category" query="$categories">
<MTKRVsetval x="0" activity="0" hue="position_percent_zero($category, $categories)"
cat_id="$category/id">
<MTKRVsetset cat_entry_ids="/placements[category_id = $cat_id]/entry_id">
<MTKRVsetset
cat_entries="$months_entries[category/id = $category/id]"
cat_comments="$months_comments[val_in_set(entry_id, $cat_entry_ids)]">

<!-- Iterate over the days of the last month. -->
<MTKRVloop2 name="today" query="$days_in_last_month">
<MTKRVsetset todays_entries="$cat_entries[date_in_range(created_on, $today)]"
 todays_comments="$cat_comments[date_in_range(created_on, $today)]">
<MTKRVsetval x="add($x, $hspacing)">

<!-- Decay our activity level as appropriate -->
<MTKRVsetval activity="mul($activity, $decaymult)">

<!-- Boost our activity level as appropriate -->
<MTKRVsetval comment_boost="mul(0.2, count($todays_comments))"
entry_boost="mul(0.6, count($todays_entries))">
<MTKRVsetval activity="min(1.0, add($activity, add($comment_boost, $entry_boost)))">

<!-- Map our color and draw our box -->
<MTKRVsetval mycolor="hsv($hue, 0.5, $activity)">
<MTKRVcircle edge="mul(add($activity, 1.0),$edgesize, 2.0)" x="$x" y="$y"
edgecolor="$mycolor" fillcolor="$mycolor">
<MTKRVcircle edge="max(1,min(8,mul(sub(1.0, $activity),$edgesize)))" x="$x" y="$y"
edgecolor="$mycolor" fillcolor="$mycolor" layer="1">

</MTKRVloop2>
<MTKRVsetval y="add($y, $vspacing)">
</MTKRVloop1>
</MTKRVisualization>

Per-Entry Category Bar


This is derived from the weird boxy thing.  The base idea here is that we create a bar showing the relative proportion of the various categories in the system.  However, that's boring overall info.  So we punch it up a notch by making the category that the current entry belongs to be brighter and double the height of the other categories in the bar.  It's important to note that because we currently don't support any form of sorting, the categories are ordered by their natural ordering as they come from the database.  I wouldn't be surprised if this was the order I added them in, but I don't know and have no time right now.  Added a variant that uses client side image maps now.

Lab Version (modify the id = # part to get a particular entry):
<MTKRVisualization width="400" height="30" scale="auto">
<MTKRVsetval x="0">
<MTKRVsetset entry="/entries[id = 2]">

<MTKRVloop name="curcat" query="/categories">
<MTKRVsetval postcount="count(/entries[category/id = $curcat/id])">

<MTKRVif test="$entry/category/id = $curcat/id">
<MTKRVsetval height="4" bright="0.8">
<MTElse>
<MTKRVsetval height="2" bright="0.5">
</MTElse>
</MTKRVif>

<MTKRVrect left="$x" y="0" width="$postcount" height="$height" edgecolor="color('black')"
 fillcolor="hsv(position_percent_zero(), 0.5, $bright)" layer="1">

<MTKRVsetval x="add($x, $postcount)">
</MTKRVloop>
</MTKRVisualization>
Individual Entry Archive (set the filename, use mtenv('entry') instead of a global access):
<MTKRVisualization width="400" height="30" scale="auto"
 filename_dyn="concat('archives/%Y/%m/', mtenv('entry')/basename, '-vis.png')">
<MTKRVsetval x="0">
<MTKRVsetset entry="mtenv('entry')">

<MTKRVloop name="curcat" query="/categories">
<MTKRVsetval postcount="count(/entries[category/id = $curcat/id])">

<MTKRVif test="$entry/category/id = $curcat/id">
<MTKRVsetval height="4" bright="0.8">
<MTElse>
<MTKRVsetval height="2" bright="0.5">
</MTElse>
</MTKRVif>

<MTKRVrect left="$x" y="0" width="$postcount" height="$height" edgecolor="color('black')"
fillcolor="hsv(position_percent_zero(), 0.5, $bright)" layer="0">

<MTKRVsetval x="add($x, $postcount)">
</MTKRVloop>
</MTKRVisualization>
Individual Entry Archive with client-side image map
<MTKRVisualization width="400" height="30" scale="auto"
filename_dyn="concat('archives/%Y/%m/',
mtenv('entry')/basename, '-vis.png')"
imagemap="catmap">
<MTKRVsetval x="0">
<MTKRVsetset entry="mtenv('entry')">

<MTKRVloop name="curcat" query="/categories">
<MTKRVsetval postcount="count(/entries[category/id = $curcat/id])">

<MTKRVif test="$entry/category/id = $curcat/id">
<MTKRVsetval height="4" bright="0.8">
<MTElse>
<MTKRVsetval height="2" bright="0.5">
</MTElse>
</MTKRVif>

<MTKRVrect left="$x" y="0" width="$postcount" height="$height" edgecolor="color('black')"
fillcolor="hsv(position_percent_zero(), 0.5, $bright)" layer="1"
url="concat(mtenv('blog')/archive_url,
$curcat/label, '/index.', mtenv('blog')/file_extension)">

<MTKRVsetval x="add($x, $postcount)">
</MTKRVloop>
</MTKRVisualization>

Weird Entry Boxy Thing



This is a pretty simple one.  It creates squares whose size is a clamped linear interpolation based on the number of comments, with 0 comments resulting in a box size of 10, and 5 comments (or more) in a box size of 50.  These are horizontally stacked.  The colors just form a continuous hue-variation.  We also draw the boxes twice; one of them is just fodder for the blur filter.  Then we apply shading to the whole thing.  Note that auto-scaling (with padding) is used, which is why the squares come out like rectangles.

Lab Version:
<MTKRVisualization width="400" height="50" scale="auto" padall="20" padtop="10" padbottom="10">
<MTKRVsetval x="0" y="0">

<MTKRVfilter name="blur" sigma="4.0" layer="0">
<MTKRVfilter name="shade" gray="0" layer="1">

<MTKRVloop query="/entries">
<MTKRVsetval edgeSize="lerp(comment_count, 0, 5, 10, 50)">
<MTKRVsetval x="add($x, div($edgeSize, 2))">
<!-- Background Thing -->
<MTKRVsquare edge="$edgeSize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent(), 0.5, 0.5)" layer="0">
<!-- Foreground Thing -->
<MTKRVsquare edge="$edgeSize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent(), 0.5, 0.5)" layer="1">
<MTKRVsetval x="add($x, div($edgeSize, 2))">
</MTKRVloop>
</MTKRVisualization>
Weekly Version (add filename and change source of data to mtenv entries):
<MTKRVisualization width="400" height="50" scale="auto" padall="20" padtop="10" padbottom="10"
 filename="archives/%Y/%m/%d-week/vis.png">
<MTKRVsetval x="0" y="0">

<MTKRVfilter name="blur" sigma="4.0" layer="0">
<MTKRVfilter name="shade" gray="0" layer="1">

<MTKRVloop query="mtenv('entries')">
<MTKRVsetval edgeSize="lerp(comment_count, 0, 5, 10, 50)">
<MTKRVsetval x="add($x, div($edgeSize, 2))">
<!-- Background Thing -->
<MTKRVsquare edge="$edgeSize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent(), 0.5, 0.5)" layer="0">
<!-- Foreground Thing -->
<MTKRVsquare edge="$edgeSize" x="$x" y="$y" edgecolor="color('black')"
fillcolor="hsv(position_percent(), 0.5, 0.5)" layer="1">
<MTKRVsetval x="add($x, div($edgeSize, 2))">
</MTKRVloop>
</MTKRVisualization>


Copyright 2004, Andrew Sutherland