Problem

Organizing meeting across time-zones can lead to mis-communication of the meeting start-times, especially when daylight-saving-time changes are involed.

Solution

Show the Meeting Start Time AND the current Local Time at the Meeting Website.

var f = new Intl.DateTimeFormat([], {
  timeZone: 'Asia/Tokyo',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hourCycle: 'h23'
})
var setTime = () => document.getElementById('time').innerHTML = f.format(new Date())
setTime()
setInterval(() => setTime(), 1000)
</script>

Intl.DateTimeFormat creates a new Intl formatter. Time to be displayed: Asia/Tokyo. Displayed are only: hour, minute and second. The hourCycle' optionh23` sets the display to a 24h clock.

setTime is a function that sets the innerHTML of id element time to the current Date, formatted with the Intl date.

setTime() call the function once on load.

setInterval() repeatetly calls the setTime() function to update the clock.

Standard d3.zoom, pans to infinity:

this.zoom = d3.zoom()
  .scaleExtent([1/2, 100])
  .on("zoom", () => {
    g.attr("transform", d3.event.transform)
  })

Restrict pan to visible area, adjust padding (p):

this.zoom = d3.zoom()
  .scaleExtent([1/2, 100])
  .on("zoom", () => {
    var p = 0.95, e = d3.event.transform, w = this.width, h = this.height
    e.x = Math.min(Math.max(e.x, -w * e.k * p), w * p)
    e.y = Math.min(Math.max(e.y, -h * e.k * p), h * p)
    g.attr("transform", e)
  })

Vue 2.x, D3 5.0