Sunsets 🌞

This is a live simulation of the sunset from Cave Hill in Belfast. If you don’t see the sun, it might be because it isn’t the afternoon/evening in Belfast. You can use the controls to skip hours, and speed up for multiple sunsets!

sunsets model

The sunsets calculang model replicates numbers from the awesome SunCalc by Volodymyr Agofonkin.

coordinates (default=Cave Hill)

//viewof point = worldMapCoordinates([-5.9537511, 54.647343]) // cave hill
viewof point = location({value: [-5.9537511, 54.647343], label: "Co-ords"})

Co-ords

6.0° W, 54.6° N

point = Array(2) [-5.9537511, 54.647343]

title =  d3.timeFormat('%B')(current_time.date)

embed(calcuvizspec({
  models: [main],
  input_cursors: [{
        lat_in:point[1], lng_in:point[0], obj_in:'sun', date_in: new Date(current_time.date)//:date_fns.addSeconds(new Date()
      }],
  mark: {type:'point',size:2000,filled:true,tooltip:true, clip:clip2},
  encodings: {
    y: {grid: false,name: 'altitude_obj', type:'quantitative', scale: {zero: false, domain: [0,1]}},
    x: {grid:false,name: 'azimuth_obj', type: 'quantitative', scale: {zero: false, domain: [0,2]}},
    detail: {name:'date_in', domain: [new Date(current_time.date)]}
    /*color: {name: 'date_in', sort:'ascending', type: 'quantitative', legend:true, domain: 
  d3.timeHour.range(
    new Date(d).setHours(clip2 ? 13 : 0),
    new Date(d).setHours(clip2? 21 : 24),
    1
  ),}*///_.range(-60,24*60,30).map(d => date_fns.addMinutes(new Date(date_in), d))},
    // row: additional months ..?
  },
  width:500 * (clip ? 1 : 0.5),
  height:400 * (clip ? 1 : 0.5),
  spec_post_process: s => { /*s.encoding.color.timeUnit = 'hours';*/ s.title = title; s.titleFontSize = 40;
                           s.encoding.color = {value:'orange'};
                           /*s.encoding.color.scale = {"scheme": "lightmulti"};*/ return s }
}), {actions:true, config: {view: {fill:'#efefff'}}})

title = "July"

Save as SVGSave as PNGView SourceView Compiled VegaOpen in Vega Editor

controls 🕹️

actions = true

Inputs.bind(timeButtons({frameInterval: 50, step: 20000, speed: 1}), viewof current_time)

actions = true

1×

md`<br/>*-or-*`

-or-

viewof current_time = timeSliders({value: new Date(), width: 600, withUtcSlider: true})


viewof clip = Inputs.toggle({label: "clip", value: true})
viewof clip2 = Inputs.toggle({label: "clip2", value: true})
import { range, dayOfYear, timeSliders, location, timeButtons, currentLocationButton} from "@roelandschoukens/inputs"

Local time

Day

Year

UTC offset

current_time = Object {date: 2025-07-11T10:02:30.023Z, utc_offset: -0, local: 1752228150023}

clip

clip = true

clip2

clip2 = true

  import {range as range, dayOfYear as dayOfYear, timeSliders as timeSliders, location as location, timeButtons as timeButtons, currentLocationButton as currentLocationButton} from "@roelandschoukens/inputs"

import { calcuvizspec, calcudata } from "@declann/little-calcu-helpers"
embed = require('vega-embed');

main = require('https://calcy-quarty-vizys-online.pages.dev/models/heavens/sunsets.js')

introspection_fetch = await fetch(`https://calcy-quarty-vizys-online.pages.dev/models/heavens/sunsets.introspection.json`)

introspection = introspection_fetch.json({typed:true})

introspection_nomemo_fetch = await fetch(`https://calcy-quarty-vizys-online.pages.dev/models/heavens/sunsets-nomemo.introspection.json`)

introspection_nomemo = introspection_nomemo_fetch.json({typed:true})

inputs = Object.values(introspection.cul_functions).filter(d => d.reason == 'input definition').map(d => d.name).sort()

formulae = Object.values(introspection.cul_functions).filter(d => d.reason == 'definition').map(d => d.name)

// formulae excluding pure inputs
formulae_not_inputs = Object.values(introspection.cul_functions).filter(d => d.reason == 'definition' && inputs.indexOf(d.name+'_in') == -1).map(d => d.name)

  import {calcuvizspec as calcuvizspec, calcudata as calcudata} from "@declann/little-calcu-helpers"

embed = ƒ(…)

main = Module {date: ƒ(…), lat: ƒ(…), lng: ƒ(…), dayMs: ƒ(…), J1970: ƒ(…), J2000: ƒ(…), rad: ƒ(…), e: ƒ(…), lw: ƒ(…), phi: ƒ(…), julian_1: ƒ(…), l: ƒ(…), b: ƒ(…), right_ascension: ƒ(…), declination: ƒ(…), dec: ƒ(…), azimuth: ƒ(…), altitude: ƒ(…), sidereal_time: ƒ(…), obj: ƒ(…), …}

introspection_fetch = Response {}

introspection = Object {cul_functions: Object, cul_links: Array(64), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_date\" [cul_scope_id=0,name=date,cul…_obj\" [value=\"[object Object]\",label=\"call -\"]\n}\n"}

introspection_nomemo_fetch = Response {}

introspection_nomemo = Object {cul_functions: Object, cul_links: Array(64), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_date\" [cul_scope_id=0,name=date,cul…_obj\" [value=\"[object Object]\",label=\"call -\"]\n}\n"}

inputs = Array(7) ["b_in", "date_in", "dec_in", "l_in", "lat_in", "lng_in", "obj_in"]

formulae = Array(29) ["date", "lat", "lng", "dayMs", "J1970", "J2000", "rad", "e", "lw", "phi", "julian_1", "l", "b", "right_ascension", "declination", "dec", "azimuth", "altitude", "sidereal_time", "obj", …]

formulae_not_inputs = Array(22) ["dayMs", "J1970", "J2000", "rad", "e", "lw", "phi", "julian_1", "right_ascension", "declination", "azimuth", "altitude", "sidereal_time", "solar_mean_anomaly", "equation_of_center", "perihelion_of_earth", "ecliptic_longitude", "declination_L0", "right_ascension_L0", "H", …]