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