Created
October 29, 2024 03:58
-
-
Save nicolaskruchten/68e8345906064900d1df070633ad12c5 to your computer and use it in GitHub Desktop.
Vega spec from Mon Oct 28 2024
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$schema": "https://vega.github.io/schema/vega/v5.json", | |
"width": 600, | |
"height": 600, | |
"signals": [ | |
{"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": "PI/2"}, | |
"endAngle": {"signal": "3*PI/2"}, | |
"outerRadius": {"signal": "radius-15"}, | |
"innerRadius": {"value": 0}, | |
"fill": {"value": "lightgrey"}, | |
"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": {"value": "#f9f9f7"}, | |
"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": {"value": "#BE2B50"}, | |
"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+3.5"}, | |
"innerRadius": {"signal": "radius+3"}, | |
"fill": {"value": "#666"}, | |
"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": {"value": "black"}, | |
"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": {"value": "black"}, | |
"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": {"value": "black"}, | |
"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": {"value": "#BE2B50"}, | |
"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": {"value": "#BE2B50"}, | |
"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"}, | |
"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": {"value": "#666"}, | |
"stroke": {"value": "#666"}, | |
"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": {"value": "#666"} | |
} | |
} | |
}, | |
{ | |
"type": "arc", | |
"encode": { | |
"enter": { | |
"x": {"signal": "width / 2"}, | |
"y": {"signal": "height / 2"}, | |
"startAngle": {"value": 0}, | |
"endAngle": {"signal": "2*PI"}, | |
"outerRadius": {"signal": "6"}, | |
"innerRadius": {"signal": "0"}, | |
"stroke": {"value": "#BE2B50"}, | |
"strokeWidth": {"value": 2} | |
} | |
} | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment