Skip to content

Instantly share code, notes, and snippets.

@nickpeihl
Created April 12, 2023 15:24
Show Gist options
  • Save nickpeihl/ff99ed7cd48c79bf557e2b6cb330e60e to your computer and use it in GitHub Desktop.
Save nickpeihl/ff99ed7cd48c79bf557e2b6cb330e60e to your computer and use it in GitHub Desktop.
Vega clocks time zones PoC (Does not include Daylight saving time!)
{
"$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"}
}
}
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment