Clocks and donuts Ideas for improvement Add a microsecond bar Add other visual feedback pulsing text scrolling in opposite direction Try developing a countdown clock click start and counts down from 5 minutes Pomodoro Timer Add weather ring as well grab weather information directly using fetch Different ring sizes not all equal or change in size depending on the time Add night and day mode Draw icon in the centre sun moon rotating Modularise the clock so you can draw multiple clocks at the same time next to each other each clock has different time timezone UK Germany China Redesign the clock so alarms can be set shows the time to alarm duration visually document body style height 700px workaround for async loading var promise await fetch https d3js org d3 v7 min js var d3script await promise text var script document createElement script script type text javascript script innerHTML d3script script async false document body appendChild script function getNumberPostfix d switch 10 d d 19 10 d 10 case 1 return st case 2 return nd case 3 return rd return th var formatSecs d3 timeFormat S seconds var formatMins d3 timeFormat M minutes var formatHrs d3 timeFormat H hours var formatDay d3 timeFormat A var formatDate function d return d getDate getNumberPostfix d getDate var formatMonth d3 timeFormat B returns ratio of the day into month e g 0 0 first day of month 1 0 last day of the month function getDayInMonth now d3 time days d3 time month date d3 time month ceil date length return now getDate 1 32 new Date now getYear now getMonth 32 getDate let mouse x 0 5 function fields var now new Date return index 7 text Clocky value mouse x index 6 text formatSecs now value now getSeconds 60 index 5 text formatMins now value now getMinutes 60 index 4 text formatHrs now value now getHours 24 index 3 text formatDay now value now getDay 7 index 2 text formatDate now value getDayInMonth now index 1 text formatMonth now value now getMonth 12 general information var width 600 var height 600 var radius Math min width height 1 9 var spacing 09 color setup var color d3 scaleLinear range hsl 180 60 50 hsl 180 60 50 interpolate function a b var i d3 interpolateString a b return function t return d3 hsl i t var arcBody d3 arc startAngle 0 endAngle function d return d value 2 Math PI innerRadius function d return d index radius outerRadius function d return d index spacing radius cornerRadius 6 var arcCenter d3 arc startAngle 0 endAngle function d return d value 2 Math PI innerRadius function d return d index spacing 2 radius outerRadius function d return d index spacing 2 radius var svg d3 select body append svg attr width width attr height height append g attr transform translate width 2 height 2 var field svg selectAll g data fields enter append g field append path attr class arc body field append path attr id function d i return arc center i attr class arc center field append text attr dy 35em attr dx 75em style text anchor start append textPath attr startOffset 50 attr class arc text attr xlink href function d i return arc center i Just for fun map the mouse cursor movement so moving the mouse move the last right Left side of the screen 0 and right side full 1 0 var svg d3 select body on mousemove function event mouse x event pageX document body clientWidth field each function d this _value d value data fields filter d d index 0 7 each function d d previousValue this _value transition ease d3 easeElastic duration 500 each fieldTransition function tick field each function d this _value d value data fields each function d d previousValue this _value transition ease d3 easeElastic duration 500 each fieldTransition setTimeout tick 1000 Date now 1000 function fieldTransition var field d3 select this transition field select arc body attrTween d arcTween arcBody style fill function d return color d value field select arc center attrTween d arcTween arcCenter field select arc text text function d return d text function arcTween arc return function d var i d3 interpolateNumber d previousValue d value return function t d value i t return arc d tick console log ready
var arcBody d3 arc startAngle 0 endAngle function d return d value 2 Math PI innerRadius function d return d index radius outerRadius function d return d index spacing radius cornerRadius 6 var arcCenter d3 arc startAngle 0 endAngle function d return d value 2 Math PI innerRadius function d return d index spacing 2 radius outerRadius function d return d index spacing 2 radius var svg d3 select body append svg attr width width attr height height append g attr transform translate width 2 height 2 var field svg selectAll g data fields enter append g field append path attr class arc body field append path attr id function d i return arc center i attr class arc center field append text attr dy 35em attr dx 75em style text anchor start append textPath attr startOffset 50 attr class arc text attr xlink href function d i return arc center i Just for fun map the mouse cursor movement so moving the mouse move the last right Left side of the screen 0 and right side full 1 0 var svg d3 select body on mousemove function event mouse x event pageX document body clientWidth field each function d this _value d value data fields filter d d index 0 7 each function d d previousValue this _value transition ease d3 easeElastic duration 500 each fieldTransition function tick field each function d this _value d value data fields each function d d previousValue this _value transition ease d3 easeElastic duration 500 each fieldTransition setTimeout tick 1000 Date now 1000 function fieldTransition var field d3 select this transition field select arc body attrTween d arcTween arcBody style fill function d return color d value field select arc center attrTween d arcTween arcCenter field select arc text text function d return d text function arcTween arc return function d var i d3 interpolateNumber d previousValue d value return function t d value i t return arc d tick console log ready