Visualization: Post grouped by years

Once in a while we stumble into something interesting while we are not looking for it. This is a post on how I came across a chart while going through an online course, the experience in replicating the chart, the lessons I learnt.

The instructor of the course - Course: Data Visualization Fundamentals and Best Practices by ObservableHQ. While going through his website I found this interesting chart - Blog Calendar.

The discovery

Displaying his blog posts over the years in a chart was something I’m seeing for the first time. Since then even during his class I was seeing it how it was built and imagining how it would look for my blog. During the time provide for the final assignment, I doubled down and spent time on exploring tools to recreate the chart.

Learning by doing

Learning by doing is what works for me. I tend to forget a lot and in a quick time. Also, data visualization is something that I need some inspiration to work with.

The blog calendar is,

• new and intuitive,
• can be added to my blog, and
• do and learn something different than data cleansing and rearranging, which is my day job.

Creating a bar chart or pie chart doesn’t give the zing, as they’re quite commom and at times often over used. This chart is a modified bar chart, yet it stands apart from the regular bar chart. Thus, I took up the replication of the chart.

Failure 1: ObservableHQ

As I come across the chart while learning a course on Observable, the recency bias kicked in. I opened a new notebook and started with building the chart. The plan is to create a JSON with year and corresponding blog post dates. I am embarrassed to realize that I didn’t even knew how to define a JSON object in the notebook, let alone using Plot or any other modules.

Failure 2: R language - ggplot

I prefer to use R for creating charts, for example the income tax projection is built using rmarkdown. The ggplot which is my go to library in R doesn’t provision a way to build the blog calendar. At least I don’t know how to take next step after trying it for a while.

Another realization, I’m not that well versed in R language that I thought of myself. That’s the end of another attempt towards the chart.

Going back to drawing board - a step on right direction

After the couple of failures, I went back to my notepad. While drawing the chart in white paper I realized this is nothing but a stack of long rectangles along with small circles imposed on them. At the basic level, this chart can be implemented using SVG.

See the Pen Blog calendar by Dheepak (@dheepak_g) on CodePen.

Through the SVG, we can create the chart. But to make it manageable, we need to make it through some language like D3 or Python.

Failure 3: Python - Pycairo

As we made sure the SVG can give us desired result, we are back track afetr couple of failed attempts.

Python being my preferred language to do anything, apart from querying the DB, chose to develop SVG using Python. The ecosystem has quite a few libraries which can manipulate SVG. To begin with I chose PyCairo. I couldn’t find the documents or examples to maek the chart. As usual, this too was abandoned.

Tasting success through svgwrite

svgwrite is a module which helps us write SVG objects. This module allows us to have hyperlinks , Tooltip and etc.,

Steps to create the chart.

1. Let’s have variables with
   1. list of years - this will give us the horizontal lines.
   2. A dictionary with year as key and post published date list as value of the key
   3. Another dictionary wih published date as key and post’s title & URL as it’s value
2. For each year we draw a line with proportional length. The line in our chart is $$ length of line = { {365} \over 20} $$
3. For each year, corresponding post published date is converted into day of year, and it is plotted proportionally on the line.
4. The URL of post is used in the hyperlink and the title is used in tooltip.
5. The whole chart is enclosed in a rectangle, with our favourite sepia back ground.
6. Saving the SVG file and embedding in the webpage.

The result is this chart - Post grouped by years

Dreaded colour combination

My dressing sense is popular for wrong reasons, among my friends. The colour combination is something that I am not good at. Shopping for dress is second worse thing after the public speaking. I dragged my wife to get the colour combination right, at the least the colour she suggested is better than the one I previously had.

Some learnings

As with any thing we do, there are quite a few learnings through this charting. Thanks to stackoverflow community, Github issue discussions for sorting out my doubts and giving me some learnings to take forward with. Some of them are

1. Programming is abstract. But building SVG is intuitive. It’s like stacking a shape over another. Visually pleasing as well.
2. If you are of thought that the Geometry is no longer useful. Be ready to get shocke. Geometry plays a key role. Cartesian coordinate system is a foundation on which SVG objects are built up on.
3. SVG looks like an image or picture, but it’s an object. Eventhough markdown and HTML allows us to embed SVG just like an image, it’s better to make use of object tag to have its hyperlinks, tool tips and etc intact and functioning.
4. Object tag must be closed like - <object blah blah /> </object>

Things to do

1. The chart comes out as we expected. But the generation involves manual work. To err is human, so removing the manual dependency is paramount.
2. Python’s svgwrite is doing what it is expected of. But the library is not actively developed, its in maintenance mode.
3. D3 is built to tinker with SVGs, so learning D3js might need to be restarted.

See also

• Visualization: Post grouped by years - D3 - v3
• Visualization: Post grouped by years - D3 - v2
• Visualization: Post grouped by years - D3