How to reset Deneb/vega count down timer

Question

I am using the dynamic count down timer from deneb as per Daniel Patrick marsh example. I have a table visual on a page which gets auto refreshed every 30 seconds via direct query. I want the deneb visual (countdown timer) to reset to 30 seconds when the page refreshes. How can I reset the counter signal to 30? The counter continues to count into negative numbers ( -1, -2, -3 etc) and continues. I am new to deneb/vega and can’t seem to figure this out.

56
{
 "data": [{ "name": "dataset" }],
 "signals": [
 {
 "name": "interval",
 "init": "10000"
 },
 {
 "name": "startTime",
 "init": "now()"
 },
 {
 "name": "counter",
 "init": "interval",
 "on": [
 {
 "events": {
 "type": "timer",
 "throttle": 10
 },
 "update": "round((interval - (now() - startTime))/1000)"
 }
 ]
 },
 {
 "name": "seconds",
 "update": "counter + ' second' + (counter == 1 ? '' : 's') + ' until next selection'"
 }
 ],
 "marks": [
 {
 "type": "text",
 "encode": {
 "enter": {
 "x": { "value": 0 },
 "y": { "signal": "height/2" },
 "baseline": {
 "value": "middle"
 }
 },
 "update": {
 "text": {
 "signal": "seconds"
 }
 }
 }
 }
 ],
 "config": {
 "text": {
 "font": "Segoe UI",
 "fontSize": 16,
 "fill": "#605E5C"
 }
 }
}

Answer 1

I think this solution will work for you:

• Starts at 30 seconds then automatically returns to 30 when it reaches 0.

• Does not display negative numbers.

• Original code structure preserved.

enter image description here

{
 "data": [{ "name": "dataset" }],
 "signals": [
 {
 "name": "interval",
 "init": "30000"
 },
 {
 "name": "startTime",
 "init": "now()",
 "on": [
 {
 "events": {"signal": "resetTrigger"},
 "update": "now()"
 }
 ]
 },
 {
 "name": "counter",
 "init": "interval",
 "on": [
 {
 "events": {
 "type": "timer",
 "throttle": 10
 },
 "update": "round((interval - (now() - startTime))/1000)"
 }
 ]
 },
 {
 "name": "resetTrigger",
 "value": 0,
 "on": [
 {
 "events": {
 "type": "timer",
 "throttle": 10
 },
 "update": "counter <= 0 ? resetTrigger + 1 : resetTrigger"
 }
 ]
 },
 {
 "name": "seconds",
 "update": "max(0, counter) + ' second' + (counter == 1 ? '' : 's') + ' until next selection'"
 }
 ],
 "marks": [
 {
 "type": "text",
 "encode": {
 "enter": {
 "x": { "value": 0 },
 "y": { "signal": "height/2" },
 "baseline": {
 "value": "middle"
 }
 },
 "update": {
 "text": {
 "signal": "seconds"
 }
 }
 }
 }
 ],
 "config": {
 "text": {
 "font": "Segoe UI",
 "fontSize": 16,
 "fill": "#605E5C"
 }
 }
}

• Yellowlab: This worked. Thanks. Although having trouble syncing Deneb refresh with the page refresh...always seems like the two are off slightly.