Redoing Obsidian's Graph View on the blog

Linking Category, Tags & posts in a network diagram

One thing I admire about Obsidian is its Graph view. I was imagining how it will look like if we make a similar graph view with the blogposts, its categories, and tags.

The similar graph is available in the Logseq as well. I was going through the Logseq’s repos to understand how the graph was built. It was using clojure which is beyond my knowledge.

IPL: Ways to see beyond Scoreboard - Part 2

To visual IPL results

Finally, it’s completed. The visualization is live now - visuals → ipl2025.

The learning from this activity is quite a long list.

  1. Visualization is easier compared to data collection & preparation.
  2. UI is scarier than the backend stuff like terminal or notebooks.
  3. Prototyping is very much important, especially for the hobby project.
  4. Iterative improvement is greater than aiming for a polished shiny thing.
  5. Presentation is key

1. Visualization is easier compared to data collection & preparation.

If you look at the chart it’s a combination of

IPL: Ways to see beyond Scoreboard

To visual IPL results

Data visualization is one field that has kept me captivated for some time now. The graphics published in sites like FT, Reuters, or NYT made me wonder why I don’t spend time on the skill.

The good volume and variety of data that is available is available all the time. Share market—daily; IPL—yearly. I find each of the cricket matches, no matter if they are Test, ODI, or T20, generates so much data. I tried once with the ODI World Cup; it’s not at all a good one. It’s been a couple of years, and I’m planning to visualize this IPL. My preferred tool is D3JS, and even with that, I’m limited to a few shapes.

Analog Clock

Built with ♥ using D3

First we started with a circle. The dial is composed of a bigger circle and a smaller one - a center point.

With the dial is in place, next step is to add arms of the clock. The end result should have 3 arms - depicting hours, minutes and seconds. To have quicker feedback we started with seconds arm.

Drawing the radius solves the initial position of seconds arm. However, to have the arm goes around the clock, we need to calculate (x,y) coordinates.

Index Movement - Visualization

Nifty50 over the months

Why?

To keep myself from overthinking or having negative thoughts, I should focus my energy on something creative. Also, the creativity should pique my curiosity. Essentially, I should spend time learning something. Personal finance is something that we monitor and learn about in a daily manner. The PF has a variety of numbers and data to deal with. It’s more like clay that allows you to come up with any sculpture.

Why Data Visualization

Why I chose to pursue a journey in Data Visualization? This post is an explainer to the above question.

What do I do for living?

Data Engineering is my day job. SQL and Python have fed me and kept me going for last decade. For the uninitiated, the work involves fetching data from several sources and loading into desired target. The source and target could be a database, API endpoint, or file.

Visualization: Post grouped by years - D3 - v3

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

Visualization: Post grouped by years - D3 - v2

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

Visualization: Post grouped by years - D3

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.

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.