Vega spec from Sat Nov 02 2024

spec.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 600,
  "background": {"signal": "colors.backgroundColor"},
  "signals": [
    {
      "name": "colors",
      "value": {
        "backgroundColor": "white",
        "tickColor": "black",
        "ringColor": "white",
        "accentColor": "#BE2B50",
        "topColor": "#f9f9f7",
        "bottomColor": "lightgrey",
        "needleColor": "#666"
      }
    },
    {"name": "radius", "value": 200},
    {
      "name": "nowDate",
      "init": "now()",
      "on": [
        {"events": {"type": "timer", "throttle": 60000}, "update": "now()"}
      ]
    },
    {
      "name": "nowMinutes",
      "init": "hours(nowDate)*60 + minutes(nowDate)",
      "on": [
        {
          "events": {"type": "timer", "throttle": 60000},
          "update": "hours(nowDate)*60 + minutes(nowDate)"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "10min",
      "transform": [
        {"type": "sequence", "start": 0, "stop": 1440, "step": 10},
        {
          "type": "formula",
          "expr": "scale('minutes', datum.data)",
          "as": "angle"
        },
        {"type": "formula", "expr": "datum.data", "as": "value"}
      ]
    },
    {
      "name": "30min",
      "transform": [
        {"type": "sequence", "start": 0, "stop": 1440, "step": 30},
        {
          "type": "formula",
          "expr": "scale('minutes', datum.data)",
          "as": "angle"
        },
        {"type": "formula", "expr": "datum.data", "as": "value"}
      ]
    },
    {
      "name": "hours",
      "transform": [
        {"type": "sequence", "start": 0, "stop": 1440, "step": 60},
        {
          "type": "formula",
          "expr": "scale('minutes', datum.data)",
          "as": "angle"
        },
        {"type": "formula", "expr": "datum.data", "as": "value"}
      ]
    },
    {
      "name": "6hours",
      "transform": [
        {"type": "sequence", "start": 0, "stop": 1440, "step": 360},
        {
          "type": "formula",
          "expr": "scale('minutes', datum.data)",
          "as": "angle"
        },
        {"type": "formula", "expr": "datum.data", "as": "value"}
      ]
    }
  ],
  "scales": [
    {
      "name": "minutes",
      "type": "linear",
      "domain": [0, 1440],
      "range": [0, {"signal": "2*PI"}]
    }
  ],
  "marks": [
    {
      "type": "arc",
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"signal": "0"},
          "endAngle": {"signal": "2*PI"},
          "outerRadius": {"signal": "radius+3.5"},
          "stroke": {"signal": "colors.needleColor"},
          "fill": {"signal": "colors.ringColor"},
          "strokeWidth": {"value": 0.5}
        }
      }
    },
    {
      "type": "arc",
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"signal": "PI/2"},
          "endAngle": {"signal": "3*PI/2"},
          "outerRadius": {"signal": "radius-15"},
          "innerRadius": {"value": 0},
          "fill": {"signal": "colors.bottomColor"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    {
      "type": "arc",
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"signal": "3*PI/2"},
          "endAngle": {"signal": "5*PI/2"},
          "outerRadius": {"signal": "radius-15"},
          "innerRadius": {"value": 0},
          "fill": {"signal": "colors.topColor"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    {
      "type": "arc",
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"signal": "0"},
          "endAngle": {"signal": "2*PI"},
          "outerRadius": {"signal": "radius-15"},
          "innerRadius": {"signal": "radius-15.5"},
          "fill": {"signal": "colors.accentColor"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    {
      "type": "arc",
      "from": {"data": "10min"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"field": "angle"},
          "endAngle": {"field": "angle"},
          "outerRadius": {"signal": "radius+3"},
          "innerRadius": {"signal": "radius - 5"},
          "stroke": {"signal": "colors.tickColor"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    {
      "type": "arc",
      "from": {"data": "30min"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"field": "angle"},
          "endAngle": {"field": "angle"},
          "outerRadius": {"signal": "radius+3"},
          "innerRadius": {"signal": "radius - 10"},
          "stroke": {"signal": "colors.tickColor"},
          "strokeWidth": {"value": 1.5}
        }
      }
    },
    {
      "type": "arc",
      "from": {"data": "hours"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"field": "angle"},
          "endAngle": {"field": "angle"},
          "outerRadius": {"signal": "radius+3"},
          "innerRadius": {"signal": "radius - 15"},
          "stroke": {"signal": "colors.tickColor"},
          "strokeWidth": {"value": 2}
        }
      }
    },
    {
      "type": "arc",
      "from": {"data": "6hours"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"field": "angle"},
          "endAngle": {"field": "angle"},
          "outerRadius": {"signal": "radius+6"},
          "innerRadius": {"signal": "radius - 25"},
          "stroke": {"signal": "colors.accentColor"},
          "strokeWidth": {"value": 5}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "hours"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "radius": {"signal": "radius - 35"},
          "theta": {"field": "angle"},
          "text": {"signal": "(datum.value/60 +12) % 24"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"value": 15},
          "fill": {"signal": "colors.accentColor"},
          "font": {"value": "Avenir Next Condensed"},
          "fontWeight": {"value": "600"},
          "opacity": {"signal": "(datum.value/60 % 6 == 0 ) ? 1 : 0"},
          "angle": {"signal": "datum.angle * 180 / PI "}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "hours"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "radius": {"signal": "radius - 25"},
          "theta": {"field": "angle"},
          "text": {"signal": "(datum.value/60 +12) % 24"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"value": 12},
          "font": {"value": "Avenir Next Condensed"},
          "fill": {"signal": "colors.tickColor"},
          "opacity": {"signal": "(datum.value/60 % 6 != 0 ) ? 1 : 0"},
          "angle": {"signal": "datum.angle * 180 / PI "}
        }
      }
    },
    {
      "type": "symbol",
      "encode": {
        "enter": {
          "size": {"signal": "5.5"},
          "shape": {"value": "M 0 30 h-2 l 2 -200 l 2 200 h-2"},
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "fill": {"signal": "colors.needleColor"},
          "stroke": {"signal": "colors.needleColor"},
          "strokeSize": {"value": 2},
          "strokeCap": {"value": "round"}
        },
        "update": {"angle": {"signal": "nowMinutes*360/1440 - 180"}}
      }
    },
    {
      "type": "arc",
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"value": 0},
          "endAngle": {"signal": "2*PI"},
          "outerRadius": {"signal": "9"},
          "innerRadius": {"signal": "0"},
          "fill": {"signal": "colors.needleColor"}
        }
      }
    },
    {
      "type": "arc",
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "startAngle": {"value": 0},
          "endAngle": {"signal": "2*PI"},
          "outerRadius": {"signal": "5"},
          "stroke": {"signal": "colors.accentColor"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}