Visual Site Map

This is a follow up to last month’s post on same name.

What’s new?

• Tooltip - Earlier, we were employing the browser’s native tooltip. With this update we have customised tooltip with publish date and categories along with the title of post.
• Transitions - On hovering the circles turns green and tooltip pops up.

Scope for improvement

This is a follow up to last month’s post on same name.

There are few changes made to the chart.

1. Today marker: Instead of drawing a full line for the current year, we are allowing the line to grow with passing day. This is a major change.
2. Transition: The trasnition effects are the major change here. Ironically, the amount of code change is minimum - tbh addition of 2 lines is all that’s needed.
3. Hyperlinks: All the hyperlinks are made colored with dark blue, as this is the default color in all browsers.
4. Tooltip: We have used title tag to implement the tooltip. This is not a major change or in other words the tooltip can be better. For that we have to go for CSS method, which is still a bit far from my reach.

Scope for improvement

This is an attempt to recreate the earlier created blog post through D3js.

I’m more of backend developer, working predominantly in Python + SQL. But, trying out JS is long time wish, which got fufilled through a Udemy course and some good imspiration.

The visuals can be improved vastly and can add few more options. But this post is to show the progress. Also, this is an attempt to conform that D3JS output can be hosted on our static site.

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.