Web Datavis researcher by day, Indie Game designer by night
html`${clock(now, local_coords)}`
html`${clock(now, local_coords, {size, color_day, color_night, color_day_ticks, color_night_ticks, color_border, color_hand_hours, color_hand_minutes, color_hand_seconds})}`
/*html`${
example_coords.map(coords => `<div style="display: inline-block;">${clock(now, coords, {size: 200})}<div style="text-align: center; font-family: sans-serif; font-weight: bold;">${coords.label}</div></div>`).join('')
}`*/
example_coords = [
{label: 'Helsinki', latitude: 60.192059, longitude: 24.945831},
{label: 'Rome', latitude: 41.902782, longitude: 12.496366},
{label: 'Lima', latitude: -12.046374, longitude: -77.042793},
{label: 'Tokyo', latitude: 35.652832, longitude: 139.839478},
{label: 'Sydney', latitude: -33.865143, longitude: 151.209900}
]
function clock(datetime, coords, options) {
options = options || {}
let size = options.size || 640
let color_day = options.color_day || 'white'
let color_night = options.color_night || 'black'
let color_day_ticks = options.color_day_ticks || 'black'
let color_night_ticks = options.color_night_ticks || 'white'
let color_border = options.color_border || '#CCC'
let color_hand_hours = options.color_hand_hours || '#888'
let color_hand_minutes = options.color_hand_minutes || '#333'
let color_hand_seconds = options.color_hand_seconds || 'red'
let sun = suncalc.getTimes(datetime, coords.latitude, coords.longitude)
let sunrise_angle = (new Date(sun.sunrise) - d3.timeDay(datetime)) / 864e5 * 2 * Math.PI
let sunset_angle = (new Date(sun.sunset) - d3.timeDay(datetime)) / 864e5 * 2 * Math.PI
let clip_uid = DOM.uid("clip")
return `<svg width="${size}" height="${size}" viewBox="50 50 500 500" style="display: inline-block;">
<defs>
<clipPath id="${clip_uid.id}">
<path d="${(d3.arc().innerRadius(0).outerRadius(225).startAngle(sunrise_angle).endAngle(sunset_angle))()}"/>
</clipPath>
</defs>
<g transform="translate(300,300)">
<g>
<circle r="225" fill="${color_night}"/>
${ticks(color_night_ticks)}
</g>
<g clip-path="${clip_uid}">
<circle r="225" fill="${color_day}"/>
${ticks(color_day_ticks)}
</g>
<circle r="230" stroke-width="18" fill="none" stroke="${color_border}"/>
<g transform="rotate(${(datetime - d3.timeDay(datetime)) / 864e5 * 360})">
<path d="M-13,47h26l-3,-186h-17z" fill="${color_hand_hours}"/>
</g>
<g transform="rotate(${(datetime - d3.timeHour(datetime)) / 36e5 * 360})">
<path d="M-9,40h18l-3,-220h-12z" fill="${color_hand_minutes}"/>
</g>
<g transform="rotate(${(datetime - d3.timeMinute(datetime)) / 6e4 * 360})">
<line y1="50" y2="-200" stroke="${color_hand_seconds}" stroke-width="4" />
<circle r="7" fill="${color_hand_seconds}" />
</g>
</g>
</svg>`
}
suncalc.getTimes(now, local_coords.latitude, local_coords.longitude)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
