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.

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. .tooltip { position: absolute; font-family: monospace; pointer-events: none; background: silver; color: black; /* width: 400px; */ text-align: left; border-radius: 6px; padding: 5px 5px; left: 50%; margin-left: -60px; z-index: 1; } .

This is a follow up to last month’s post on same name. There are few changes made to the chart. 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. 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.

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.