Sparkling wok

I've been working on the Wok since mid-2010 (the first commit in the git history was on August 13), even if it was officially made public only on January 1, 2011.

Since then, I've been working on-and-off it for 14 years, with periods of frequent activity and others where months went by without anything going on. I have an approximate idea about the ebbs and tides of these period of activities from the commit history of the repository holding the Wok: it's only approximate because the history only tells me when I committed something, and at times I have worked on something for days (or even longer) before adding it to the repository (it's not very wise, because it's easier to lose work, but for these writings of mine I tend to commit only when something is ready, in most cases1), but this is something that I'm still curious about that I've actually written a git chart command to plot the commit frequency history for me.

I've been thinking sporadically about adding this plot to the Wok itself, in a way that isn't too prominent, and I think I've finally found the right idea in the form of a Tufte-style sparkline that you can admire on the main index page. To produce this sparkline, I extended my git chart command to produce a sparkline using Unicode Block Elements: after grouping the commits per month, each month with at least one commit prints a block ranging from the one-eighth block ▁ to the full-height block █ (a no-break space is used when no commits were made the whole month), giving us something like this (note: the sparkline in this post will not be updated, in contrast to the one in the home page):

▃​▁​▂​▂​▄​▇​▃​▁​▂​ ​▄​▂​▁​▁​▁​▂​▄​▃​▂​▂​▇​█​▂​▄​▄​▆​▃​▂​▁​▅​▃​▂​▁​▁​▁​▂​▂​▂​▁​▁​ ​▂​▂​▁​ ​ ​▂​▃​▁​▂​▁​ ​ ​▁​ ​▁​▁​ ​▁​▂​▂​▁​▁​ ​▃​▁​ ​▁​▁​▁​▁​▂​ ​▁​▁​▁​▁​ ​ ​ ​ ​▁​ ​▁​▁​▁​▁​ ​ ​▁​ ​ ​▁​▁​ ​ ​ ​ ​▁​ ​▁​ ​ ​▁​▁​▁​▁​▁​▂​▂​▁​▁​▁​▁​▁​▄​▁​▁​▁​▁​▂​▂​▁​▂​▁​ ​▁​▁​▁​▁​ ​▂​ ​▁​ ​ ​▁​▁​ ​ ​▁​▁​▁​ ​ ​▁​ ​▁​▂​▂​▂​▂​▂​▁​▁​▁​▄​▁​▁​▂​▂​▁​▁​▁​▁​▂​▁​▂​▅​▂

The results are … satisfactory, but I must say I'm not entirely happy with them. The sparkline serves the purpose of highlighting the overall trend of commit behavior, but it lacks any kind of temporal reference. In console, git chart also outputs some kind of temporal axis with each year spanning 12 characters, and I could add it to the HTML, but this poses a problem when the sparkline doesn't fit in one line: the sparkline and timeline would need to be interleaved. This is actually possible to achieve in CSS, playing around with line height and positioning, something like:

.interleave { position: relative; padding-bottom: 1lh }
.interleave p {
  font-family:monospace;
  line-height: 300%;
}
.interleave p::first-child { margin-top: .5lh }
.interleave p+p {
  position:absolute;
  top: 0;
}

but getting things to wrap at the right place across browsers is non-trivial (even with word-break: break-all) and adding centering to the business only makes things even more fragile.

After getting to all the trouble of trying to make it work, I realized that actually adding the timeline under the sparkline would have made it too heavy anyway, so there wasn't much to gain by actually doing it (in a sense, the sparkline alone is more elegant) but at the same time I have a feeling of dissatisfaction: it could convey so much more information —even if hidden at first sight!

There are many ways in which such information could be conveyed.

For starters, instead of allowing wrapping after any block with a ZWSP, the zero-width space could be added only after each (solar) year.

Furthermore, each solar year could be wrapped in a span or abbr element with the year as title. But once we do that, why not highlight the block and make the actual year visible as an overlay on hover? Why not provide a tooltip for each month with the actual number of commits there?

And while we're at it, why not add a sparkline to each subsection of the wok, to see when that particular section was worked on? (OK, looks like I'll have to get myself scripting …)

UPDATE: a few hours later, I can say that making the sparklines interactive, and available for all category index pages in addition to the home page, wasn't too much effort. I did have to hack my git chart script to produce HTML output basically tuned for the Wok, and I did create a shell script that allows me to update all the index sparklines because it would be exceedingly boring to do it by hand, but what I wasted the most time on has actually been … styling, which is admittedly something I generally suck at in general, but at the same time fascinates me, because of the challenge of (ab)using CSS to get the results I'm seeking (which is still not always possible).

What we do have now is a “year highlight” on hover, with the year specified below, and an HTML+CSS tooltip showing the actual value (number of commits) for each element of the sparkline (in addition to the browser's own tooltip in the form YYYY-MM: C where C is the number of commits). It's probably overdone, but I actually like having this information at hand.

The only “real” downside is that the last element of some of the sparkline is bound to be potentially off by a few commits, unless I run a sparklines' update after each commit —which I don't plan to do. There are other ways I could explore (such as auto-generating an XML on the server, and then importing it via XSLT like I do in my profile page for the Fediverse RSS links, or like I've discussed here), but honestly I think I'll be OK with the minor discrepancy: as I've already mentioned, it's only an approximate indicator of my Wok activity anyway, so there's no need to worry about it being exact every time.