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.

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.