Vega clocks time zones PoC (Does not include Daylight saving time!)

timezones.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "Timezones (Standard time only!)"
  "description": "This does not account for Daylight Savings time.",
  "autosize": "pad",
  "signals": [
    {"name": "centerX", "init": "100/2"},
    {"name": "centerY", "init": "100/2"},
    {"name": "radiusRef", "init": "min(100,100)*0.8"},
    {"name": "sizeFactor", "init": "radiusRef/400"},
    {"name": "outerRadius", "init": "radiusRef/2"},
    {"name": "innerRadius", "init": "radiusRef/2 - (10 * sizeFactor)"},
    {
      "name": "currentDate",
      "init": "now()",
      "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}]
    }
  ],
  "data": [
    {
      "name": "tz",
      "values": [
        {"zone": "America/St_Johns", "offset_std": -210},
        {"zone": "Asia/Tokyo", "offset_std": 540},
        {"zone": "America/New_York", "offset_std": -300},
        {"zone": "Australia/Sydney", "offset_std": 600}
      ]
    },
    {
      "name": "hours",
      "transform": [
        {"type": "sequence", "start": 0, "stop": 12, "step": 1, "as": "hour"},
        {
          "type": "formula",
          "expr": "centerX - cos(PI/2 + (datum.hour * PI/6)) * (outerRadius - (outerRadius-innerRadius)/2)",
          "as": "x"
        },
        {
          "type": "formula",
          "expr": "centerY - sin(PI/2 + (datum.hour * PI/6)) * (outerRadius - (outerRadius-innerRadius)/2)",
          "as": "y"
        },
        {
          "type": "formula",
          "expr": "centerX - cos(PI/2 + (datum.hour * PI/6)) * (innerRadius - 25 * max(sizeFactor, 0.4))",
          "as": "xHour"
        },
        {
          "type": "formula",
          "expr": "centerY - sin(PI/2 + (datum.hour * PI/6)) * (innerRadius - 25 * max(sizeFactor, 0.4))",
          "as": "yHour"
        }
      ]
    },
    {
      "name": "minutes",
      "transform": [
        {"type": "sequence", "start": 0, "stop": 60, "step": 1, "as": "minute"},
        {
          "type": "formula",
          "expr": "centerX - cos(PI/2 + (datum.minute * PI/30)) * (outerRadius - (outerRadius-innerRadius)/3)",
          "as": "x"
        },
        {
          "type": "formula",
          "expr": "centerY - sin(PI/2 + (datum.minute * PI/30)) * (outerRadius - (outerRadius-innerRadius)/2)",
          "as": "y"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "hourScale",
      "domain": {"data": "hours", "field": "hour"},
      "range": [0, {"signal": "2*PI"}]
    },
    {
      "name": "minutesScale",
      "domain": {"data": "minutes", "field": "minute"},
      "range": [0, {"signal": "2*PI"}]
    }
  ],
  "layout": {"bounds": "flush", "padding": 200, "columns": 4},
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "clocks",
          "data": "tz",
          "groupby": ["zone", "offset_std"]
        }
      },
      "sort": {"field": "datum.zone", "order": "ascending"},
      "title": {"text": {"signal": "parent.zone"}, "frame": "group"},
      "signals": [
        {
          "name": "timezoneDate",
          "init": "utcOffset('minutes', currentDate, parent.offset_std)",
          "on": [
            {
              "events": {"signal": "currentDate"},
              "update": "utcOffset('minutes', currentDate, parent.offset_std)"
            }
          ]
        },
        {
          "name": "currentHour",
          "init": "utchours(utcOffset('minutes', currentDate, parent.offset_std))+utcminutes(utcOffset('minutes', currentDate, parent.offset_std))/60",
          "on": [
            {
              "events": {"signal": "timezoneDate"},
              "update": "utchours(timezoneDate)+utcminutes(timezoneDate)/60"
            }
          ]
        },
        {
          "name": "currentMinute",
          "init": "minutes(currentDate)+seconds(currentDate)/60",
          "on": [
            {
              "events": {"signal": "timezoneDate"},
              "update": "utcminutes(timezoneDate)+utcseconds(timezoneDate)/60"
            }
          ]
        },
        {
          "name": "currentSecond",
          "init": "seconds(currentDate)",
          "on": [
            {
              "events": {"signal": "currentDate"},
              "update": "seconds(currentDate)"
            }
          ]
        }
      ],
      "marks": [
        {
          "type": "arc",
          "encode": {
            "enter": {
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "startAngle": {"value": 0},
              "endAngle": {"signal": "2*PI"},
              "outerRadius": {"signal": "outerRadius"},
              "fill": {"value": "transparent"},
              "stroke": {"value": "black"}
            }
          }
        },
        {
          "type": "arc",
          "encode": {
            "enter": {
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "startAngle": {"value": 0},
              "endAngle": {"signal": "2*PI"},
              "outerRadius": {"signal": "innerRadius"},
              "fill": {"value": "#FCFCFC"},
              "opacity": {"value": 0.6},
              "stroke": {"value": "black"}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "minutes"},
          "encode": {
            "enter": {
              "size": {"signal": "pow(2*sizeFactor, 2)"},
              "x": {"field": "x"},
              "y": {"field": "y"},
              "angle": {"signal": "datum.minute*6"},
              "shape": {"value": "m 0 -5 v 10"},
              "stroke": {"value": "black"}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "hours"},
          "encode": {
            "enter": {
              "size": {"signal": "pow(2*sizeFactor, 2)"},
              "angle": {"signal": "datum.hour*30"},
              "shape": {"value": "m -5 -5 h 10 l -5 10 l -5 -10 Z"},
              "x": {"field": "x"},
              "y": {"field": "y"},
              "fill": {"value": "black"}
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "hours"},
          "encode": {
            "enter": {
              "x": {"field": "xHour"},
              "y": {"field": "yHour"},
              "align": {"value": "center"},
              "baseline": {"value": "middle"},
              "text": {"signal": "datum.hour === 0 ? 12 : datum.hour"},
              "fontSize": {"signal": "25*max(sizeFactor, 0.4)"}
            }
          }
        },
        {
          "type": "symbol",
          "encode": {
            "enter": {
              "size": {"signal": "pow(2*sizeFactor, 2)"},
              "shape": {"value": "M 0 0 h-1 l 1 -160 l 1 160 h-1"},
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "fill": {"value": "red"},
              "stroke": {"value": "red"},
              "strokeSize": {"value": 2},
              "strokeCap": {"value": "round"}
            },
            "update": {"angle": {"signal": "currentSecond*6"}}
          }
        },
        {
          "type": "symbol",
          "encode": {
            "enter": {
              "size": {"signal": "pow(2*sizeFactor, 2)"},
              "shape": {
                "value": "M 0 0 h -2 l -5 -30 l 7 -120 l 7 120 l -5 30 h -2 "
              },
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "fill": {"value": "black"},
              "stroke": {"value": "grey"},
              "strokeCap": {"value": "round"},
              "strokeWidth": {"signal": "2* min(sizeFactor, 1)"}
            },
            "update": {"angle": {"signal": "currentMinute*6"}}
          }
        },
        {
          "type": "symbol",
          "encode": {
            "enter": {
              "size": {"signal": "pow(2*sizeFactor, 2)"},
              "shape": {
                "value": "M 0 0 h-3 l -4 -30 l 7 -80 l 7 80 l -4 30 h -3"
              },
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "fill": {"value": "black"},
              "stroke": {"value": "grey"},
              "strokeCap": {"value": "round"},
              "strokeWidth": {"signal": "2* min(sizeFactor, 1)"},
              "zIndex": {"value": 1}
            },
            "update": {"angle": {"signal": "currentHour*30"}}
          }
        },
        {
          "type": "arc",
          "encode": {
            "enter": {
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "startAngle": {"value": 0},
              "endAngle": {"signal": "2*PI"},
              "outerRadius": {"signal": "6*sizeFactor"},
              "fill": {"value": "black"},
              "stroke": {"value": "grey"},
              "zIndex": {"value": 1}
            }
          }
        },
        {
          "type": "arc",
          "encode": {
            "enter": {
              "x": {"signal": "centerX"},
              "y": {"signal": "centerY"},
              "startAngle": {"value": 0},
              "endAngle": {"signal": "2*PI"},
              "innerRadius": {"signal": "outerRadius"},
              "outerRadius": {"signal": "outerRadius + 14 * sizeFactor"},
              "fill": {"value": "#333"},
              "stroke": {"value": "grey"}
            }
          }
        }
      ]
    }
  ]
}