User Interface to Indicate Posting Activity

Orderly grid of squares representing dates which are grouped by month with a gradation of colors on each square that indicate in heat map fashion how frequently I post to my website.

In addition to the sparkline graphs I’ve got in the sidebar of my website, I’ve recently been looking at alternate ways to indicate the posting activity on my own website.

An example of a sparkline graph on Boffosocko.com. A blue line indicates the comment posting velocity and an orange line indicates the comment velocity.
“Monthly activity over 5 years” for both posting activity as well as commenting activity on my website.

Calendar Heatmaps

Yesterday I was contemplating calendar heatmaps which are probably best known from the user interface of GitHub which relatively shows how active someone is on the website. I’ve discovered that JetPack for WordPress provides a similar functionality on the back end (in blue instead of green), but sadly doesn’t make it available for display on the front end of websites. I’ve filed a feature request to see if it’s something they’d work on in the future, so if having something like this seems useful to you, please click through and give the post a +1.

Orderly grid of squares representing dates which are grouped by month with a gradation of colors on each square that indicate in heat map fashion how frequently I post to my website.
A screen capture of what my posting “velocity” looks like on the back end of my website. The darkest squares indicate 30+ posts in a day while the next darkest indicate between 15-30 posts. My “streak” is far longer than this chart indicates. I obviously post a LOT.

Circular Widthmaps

Today I saw a note that led me to the Internet Archive which I know has recently had a redesign. I’m not sure if the functionality I saw was part of this redesign, but it’s pretty awesome. I’m not sure quite what to call this sort of circular bar chart given what it does, but circular widthmap seems vaguely appropriate. Here’s a link to the archive.org page for my website that shows this cool UI, screencaptures of which also appear below: http://web.archive.org/web/sitemap/https://www.boffosocko.com/

Instead of using color gradations to indicate a relative number of posts, the UI is measuring things via width in ever increasing concentric circles. The innermost circle indicates the root domain and successive levels out add additional paths from my site. Because I’m using dated archive paths, there’s a level of circle by year (2019, 2018, 2017, etc.) then another level outside that by months (April 2019, March 2019, etc.), and finally the outermost circle which indicates individual posts. As a result, the width of a particular year or month indicates relatively how active that time frame was on my website (or at least how active Archive.org thinks it was based on its robot crawler.)

Of course the segments on the circles also measure things like categories and tags on my site as well along with the date based archives. Thus I can gauge how often I use particular categories for example.

I’ll also note that in the 2018 portion of the circle for July 11th, I had a post that slashdotted my website when it took off on Hacker News. That individual day is represented as really wide on that circular ring because it has an additional concentric circle outside of it that represents the hundreds of comment URL fragments for that post. So one must keep in mind that things in some of the internal rings aren’t as relative because they may be heavily affected by portions of content further out on the ring.

Interface that presents concentric circles with archived links of a website. The center circle is the domain itself while outside portions of the circle include archive pages, categories, pages, posts, and other portions of a site.
My website posting activity (and a little more) from 2018 and before according to the Internet Archive.
Interface that presents concentric circles with archived links of a website. The center circle is the domain itself while outside portions of the circle include archive pages, categories, pages, posts, and other portions of a site.
My website posting activity (and a little more) from April 2019 and before according to the Internet Archive.

How awesome would it be if this were embed-able and usable on my own website?

5 thoughts on “User Interface to Indicate Posting Activity”

  1. I enjoyed the idea of these heatmaps and charting. I added the sparkline graph last week after I saw them on Chris’s website. I may create a separate web site page to keep these. I don’t know how useful they are, but they are just cool. I would also love a way to display some of the JetPack graphs.These are the yearly JetPack stats from 2010, the year Automattic first offered the, to 2019.
    2013 was the best year for this website.But I get more “responses” that I did in earlier years. I suspect more of these are from semantic responses on other platforms, Facebook, Twitter, Instagram since. It’s, and the time I started using some of the IndieWeb software.Below is the Internet Archive graph for 2018, compared to 2012. Traffic has fallen off.
    2013 Internet Archive Circular Widthmaps
    2018 Internet Archive Circular Widthmaps

Leave a Reply

Your email address will not be published. Required fields are marked *