31:T11ac,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, svg_size, svg_size]); var chart = { node: svg.node() }; var defs = svg.append('defs') defs.append(hand_marker) svg.append("circle") .attr("r", svg_size / 2 - .5) .attr("cx", svg_size / 2) .attr("cy", svg_size / 2) .attr("stroke", "#aaa") .attr("fill", "#eee"); svg.append("circle") .attr("r", radius_t) .attr("cx", svg_size / 2) .attr("cy", svg_size / 2) .attr("stroke", "#aaa") .attr("fill", "#ddd"); svg.append("circle") .attr("r", radius) .attr("cx", svg_size / 2) .attr("cy", svg_size / 2) .attr("fill", "#8af") .attr("stroke", "none"); var clip_face = defs .append('clipPath') .attr('id', 'clip-face'); clip_face.append("circle") .attr("r", radius) .attr("cx", svg_size / 2) .attr("cy", svg_size / 2); var gClipped = svg.append("g") .attr('clip-path', 'url(#clip-face)'); var gSky = gClipped.append("g"); chart.skyGrid = gSky.append("path") .attr("fill", "none") .attr("stroke", "white") .attr("opacity", .3) .attr("stroke-width", 1); // celestial equator chart.skyEq = gSky.append("path") .attr("fill", "none") .attr("stroke", "white") .attr("opacity", 1) .attr("stroke-width", 1); // zenith chart.z_char = put_char(gSky, "Z").attr("fill", "#fff"); var gEarth = gClipped.append("g"); chart.gEarth = gEarth; chart.horizons = gEarth.append("g"); chart.earth_grid = gEarth.append("path") .attr("fill", "none") .attr("opacity", .3) .attr("stroke", "white") .attr("stroke-width", .5); chart.nadir_char = put_char(gEarth, "👤") .attr("font-size", 14); chart.s_char = put_char(gEarth, "S") .attr("font-size", 14).attr("fill", "#ec9"); chart.w_char = put_char(gEarth, "W") .attr("font-size", 14).attr("fill", "#ec9"); chart.n_char = put_char(gEarth, "N") .attr("font-size", 14).attr("fill", "#ec9"); chart.e_char = put_char(gEarth, "E") .attr("font-size", 14).attr("fill", "#ec9"); var gSun = gClipped.append("g"); // sun track for today (appx.) chart.sun_track = gSun.append("path") .attr("fill", "none") .attr("stroke", "#fe9") .attr("opacity", 1) .attr("stroke-width", 1) .attr("stroke-dasharray", [3, 10]); // moon track for today (appx.) chart.moon_track = gSun.append("path") .attr("fill", "none") .attr("stroke", "#777") .attr("opacity", 1) .attr("stroke-width", 1) .attr("stroke-dasharray", [3, 10]); // sidereal time hands // define hand length (for star) in image space: chart.sidereal_1 = gSun.append("path") .attr("fill", "none") .attr("stroke", "#444") .attr("opacity", 1) .attr("stroke-width", 1); chart.sidereal_2 = gSun.append("path") .attr("fill", "none") .attr("stroke", "#444") .attr("opacity", 1) .attr("stroke-width", 1); chart.star = gSun.append(star_shape); // ecliptic chart.ecliptic = gSun.append("g"); // horoscope chart.horoscope = gSun.append("g"); // dot in middle of hands svg.append("circle") .attr("r", 4) .attr("cx", svg_size / 2) .attr("cy", svg_size / 2) .attr("fill", "black"); // border of clock face (has to be above the earth and sky fills) svg.append("circle") .attr("r", radius) .attr("cx", svg_size / 2) .attr("cy", svg_size / 2) .attr("fill", "none") .attr("stroke", "black"); // mean solar time scale self.solar_time = new TimeScale(svg, radius, "#333", "#eee", d => roman_num(d), svg_size / 2); self.solar_time.g_labels.style('letter-spacing', '-0.0625625em') self.solar_time.g.append("g").attr("transform", `translate(-9, ${-radius - 23}) scale(${9/16})`).append(() => sun_shape(false, 1.5)); // local time scale chart.local_time = new TimeScale(svg, radius_t, "#777", "#fff", d => d, svg_size / 2); var gHands = svg.append("g"); // sun hand chart.sun_line = gHands.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("opacity", 1) .attr("stroke-width", 2) .attr("marker-end", "url(#hand-end)"); chart.sun = gHands.append("g").append(() => sun_shape(true, 1)); // moon hand // mean lunar time (without equation) chart.moon_line = gHands.append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("opacity", .7) .attr("stroke-width", 1.5); chart.moon = [gHands.append("circle"), gHands.append("path")] return chart; }32:T1022,update_chart = { var svg_earth_rot = `rotate(${flip_pole(-rot_clock_dial) * 360} ${svg_size/2} ${svg_size/2})`; chart.gEarth.attr("transform", svg_earth_rot); chart.skyGrid.datum(graticule_sky) .attr("d", sky_display == "Earth grid" ? path_earth : path_celestial) .attr("transform", sky_display == "Earth grid" ? svg_earth_rot : ""); chart.skyEq.datum(celestial_eq).attr("d", path_celestial); update_char(chart.z_char, projection_earth([0, 90])); update_char(chart.nadir_char, projection_earth([0, -90])); update_char(chart.s_char, projection_earth([0, -3])); update_char(chart.w_char, projection_earth([90, -3])); update_char(chart.n_char, projection_earth([180, -3])); update_char(chart.e_char, projection_earth([270, -3])); var sun_angle = sun_rot * 360; var moon_angle = moon_rot * 360; var sun = projection_celestial(sun_pos); var moon = projection_celestial(moon_pos); // sidereal time hands // define hand length (for star) in image space: var ecliptic_q1 = projection_celestial([180, 0]); var ecliptic_q2 = projection_celestial([ 90, axis_tilt]); var ecliptic_q4 = projection_celestial([-90, -axis_tilt]); var sid_line = hand_with_length([0, -pole_lookat], [0, 0], projection_celestial, radius - 15) var star = sid_line[1]; // mean solar time (without equation) // define length in image space var sun_line = hand_with_length([sun_angle, -pole_lookat], [sun_angle, 0], projection_celestial, radius - 17) chart.sidereal_1.datum(mk_path([ecliptic_q1, sid_line[1]])).attr("d", path_identity) chart.sidereal_2.datum(mk_path([ecliptic_q2, ecliptic_q4])).attr("d", path_identity) chart.sun_line.datum(mk_path(sun_line)).attr("d", path_identity) chart.moon_line.datum(mk_path([[0, -pole_lookat], [moon_angle, flip_pole(axis_tilt)]])) .attr("d", path_celestial) chart.sun.attr("transform", `translate(${sun[0] - 14}, ${sun[1] - 14}) scale(${14/16})`); var star_rot = 180 - 360 * flip_pole(sky_rot + rot_clock_dial); chart.star.attr("transform", `translate(${star[0] - 10} ${star[1] - 10}) scale(0.625) rotate(${star_rot} 16 16) `); update_moon_shape(chart.moon[0], chart.moon[1], moon, 12, 2, moon_phase) var mk_horizon = d3.geoCircle().radius(90).precision(10).center([0, -90]); var horizons_data = [ {a:0, fill:"#906850"}, {a:6, fill:"#786050"}, {a:12, fill:"#635850"}, {a:18, fill:"#4b4b50"} ] chart.horizons .selectAll("path") .data(horizons_data) .join("path") .attr("d", d => path_earth(mk_horizon.radius(90 - d.a)())) .attr("fill", d => d.fill) .attr("stroke", "black") .attr("opacity", 1) .attr("stroke-width", d => d.a == 0 ? 1 : .3); chart.earth_grid.datum(graticule).attr("d", path_earth) // it is important for performance that we avoid circles with a centre // near the pole *opposite of* the celestial pole we’re looking at. var mk_track = d3.geoCircle().radius(90).precision(10).center([0, pole_lookat]); chart.sun_track.datum(mk_track.radius(90 - flip_pole(sun_pos[1]))) .attr("d", path_celestial) chart.moon_track.datum(mk_track.radius(90 - flip_pole(moon_pos[1]))) .attr("d", path_celestial) chart.ecliptic .selectAll("path") .data(ecliptic) .join("path") .attr("d", path_celestial) .attr("fill", "none") .attr("stroke", "#fe9") .attr("opacity", 1) .attr("stroke-width", 1.5); chart.horoscope.selectAll("text") .data(horoscope) .join("text") .datum(d => d) .text(a => a.text) .attr("dy", ".4em") .attr("text-anchor", "middle") .attr("style", "fill: #fe9; stroke: black; stroke-opacity:30%; stroke-width: 3px; stroke-linejoin: round; paint-order: stroke fill") .attr("font-size", 18) .attr("x", a => a.p[0]) .attr("y", a => a.p[1]); var rot_clock_mirrored = -flip_pole(rot_clock_dial); self.solar_time.update(rot_clock_mirrored) var local_rot = rot_clock_mirrored + flip_pole((observer[0] / 360) - current_time.utc_offset / 24); chart.local_time.update(local_rot) }33:T7ad,TimeScale = { function _TimeScale(parent, radius, color, shadow_color, mk_text, canvas_offset) { this.color = color; this.shadow_color = shadow_color; this.mk_text = mk_text; this.canvas_offset = canvas_offset; this.radius = radius; this.g = parent.append("g"); this.g.attr("transform", `translate(${this.canvas_offset}, ${this.canvas_offset})`); this.g_labels = this.g.append("g") .attr("text-anchor", "middle") .attr("font-size", 16) .attr("fill", this.color) this.g_labels .selectAll("text") .data(d3.range(24)) .join("text") .datum(d => ({a: 2 * Math.PI / 24 * d, deg: 15*d, text: this.mk_text(d)}) ) .text(a => a.text) .attr("transform", a => `rotate(${180 + a.deg} 0 0)`) .attr("x", 0) .attr("y", -(this.radius + 8)); this.g.append("g") .attr("stroke", color) .selectAll("line") .data(d3.range(96)) .join("line") .datum(d => ({a:2 * Math.PI / 96 * d, l:(d & 3) == 0 ? 5 : 2.5})) .attr("x1", x => this.radius * Math.cos(x.a)) .attr("x2", x => (this.radius + x.l) * Math.cos(x.a)) .attr("y1", x => this.radius * Math.sin(x.a)) .attr("y2", x => (this.radius + x.l) * Math.sin(x.a)); } // separate cell so the chart itself doesn't become dependent on this _TimeScale.prototype.update = function(rot) { this.g.attr("transform", `translate(${this.canvas_offset}, ${this.canvas_offset}) rotate(${rot * 360})`); var shadow_color = this.shadow_color; var ra = (rot * 2 * Math.PI); function do_shadow(x) { var a = Math.PI + flip_pole(x.a) + 2 * Math.PI * rot; return `${Math.sin(a)*1.4}px ${Math.cos(a)*1.4}px 0.5px ${shadow_color}`; } this.g_labels .selectAll("text") .attr("transform", x => `rotate(${180 + flip_pole(x.deg)} 0 0)`) .style("text-shadow", do_shadow); } return _TimeScale; }34:T496,function sun_shape(use_color, stroke_width) { var rayP = [ // inner diameter "L", [10, 2.2], "C", // inside ray curve [13.3, 1.9], [13.3, 1.2], [15.5, 1.5], "C", // outside ray curve [13.5, -1.2], [12.0, -1.3], [10.0, -1.7] ]; var ray_path = []; const N = 14; for (var i = 0; i < N; ++i) { var th = i/N * 2 * Math.PI; var cs = Math.cos(th); var sn = Math.sin(th); rayP.forEach(p => { if (typeof p === 'string') { ray_path.push(p); } else { var x = p[0] * cs + p[1] * sn + 16; var y = p[0] * -sn + p[1] * cs + 16; ray_path.push(x.toFixed(2) + "," + y.toFixed(2)); } }); } ray_path[0] = "M"; const fill1 = use_color ? "#ffeecc" : "white"; const fill2 = use_color ? "#ffd600" : "white"; const stroke2 = use_color ? "#ddb200" : "#888"; return svg` ` }35:[] 2f:{"title":"Astronomical clock","cells":[{"id":0,"value":"md`# Astronomical clock`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"md`This clock is inspired by the [astronomical clock in Prague](https://en.wikipedia.org/wiki/Prague_astronomical_clock).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3278,"value":"time_buttons = Inputs.bind(timeButtons({frameInterval: 50, step: 20000, speed: (param('now', '0') == '0') ? 0 : 1}), viewof current_time)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2707,"value":"displayTime = {\n var sgn = current_time.utc_offset < 0 ? \"−\" : \"+\";\n var digits = Math.abs(current_time.utc_offset);\n var offsstr = sgn + pad(digits);\n var tstr = date_format.format(current_time.local);\n\n var sidereal_rot = 0.5 - sky_rot;\n sidereal_rot -= Math.floor(sidereal_rot);\n var d = Date.UTC(2020, 0, 1) + milliseconds_per_day * sidereal_rot;\n\n var ststr = sidereal_time_format.format(new Date(d));\n \n return md`Time: ${tstr} ${offsstr} ❊ Sidereal time: ${ststr}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"display = {\n var div = html`

`;\n div.appendChild(chart.node)\n div.style.resize = 'horizontal';\n div.style.width = svg_max_width+\"px\";\n div.style.maxWidth = '100%';\n div.style.minWidth = '100px';\n div.style.overflow = 'hidden';\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2732,"value":"viewof current_time = timeSliders({value: new Date(), width: 600, withUtcSlider: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2612,"value":"viewof observer = location({label: \"Observer\", value: prague, projectionFactory: d3.geoEquirectangular, width: 432, theme:\"bw-light\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"locationBtn = Inputs.bind(currentLocationButton(undefined, {now: param('here', '0') != '0', label: \" \"}), viewof observer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"viewof anchor = Inputs.radio([\"Sky\", \"Observer\", \"Mean solar time\"], {label: \"Fix rotation to:\", value: \"Observer\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2081,"value":"viewof sky_display = Inputs.radio([\"Sky grid\", \"Earth grid\", \"Constellations\", \"None\"], {label: \"Sky display:\", value: \"Earth grid\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"viewof sun_moon_mode = Inputs.radio(new Map([[\"Mean solar time\", \"clock\"], [\"Mean rotation on ecliptic\", \"ecliptic\"], [\"+ orbit eccentricity\", \"eqn\"]]), {label: \"Sun position:\", value: \"clock\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2186,"value":"{\n if (sun_moon_mode == \"clock\") { return md` `; }\n var e = sun_rot - sun_pos[0] / 360;\n e -= Math.round(e);\n var s = e * 24 * 60 * 60;\n var sgn = s < 0 ? \"−\" : \"+\";\n s = Math.abs(s);\n s = Math.round(s);\n var m = Math.floor(s / 60);\n s -= 60*m;\n return md`Displayed equation of time: ${sgn}${pad(m)}′${pad(s)}″`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"md`### About`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"md`The clock face shows a view of the sky and the ground in stereographic projection. The centre of this projection is the celestial south pole. If your location is on the southern hemisphere, this switches to the north pole. The time scales also change direction since the sun rotates counter-clockwise in this hemisphere.\n\nThe clock face shows:\n\n - Hand with the sun: mean solar time;\n - Hand with the star: sidereal time (position of vernal equinox);\n - Hand with the moon: moon orbit and phase of the moon (mean lunation only);\n - Yellow ring: zodiac and ecliptic;\n - Dark circles: horizon, and borders of civil, nautical and astronomical twilight.\n\nThe sun hand points to two time scales:\n\n - outer ring: local time\n - inner ring: mean solar time and sidereal time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"md`View at [current time and position](?here&now)\n\nEmbed: [current time and position](/embed/@roelandschoukens/astronomical-clock?cells=time_buttons%2CdisplayTime%2Cdisplay%2ClocationBtn%2Cupdate_chart&here&now)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2088,"value":"credit = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2572,"value":"md`*Fine print: we are ignoring the precession of the equinox, the irregularity of the moon orbit, and the rotation of Earth around the Earth/Moon barycenter. Moon position is only a rough approximation.*\n\n*Zodiac signs are about 1 off compared to the actual constellations but that is expected.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`--------------------------\n\n## Recipe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1863,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1295,"value":"md`### Default location`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3223,"value":"prague = [14.420917, 50.087008];","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`### Time and angles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"md`#### Default time`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1293,"value":"param = {\n var params = new URLSearchParams(html``.search)\n return function(key, def)\n {\n var v = params.get(key);\n if (v == null) return def;\n return v;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1218,"value":"md`#### length of day and year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"// Sidereal year\ndays_per_year = 365.256363","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"milliseconds_per_year = days_per_year * milliseconds_per_day","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"milliseconds_per_day = 86400 * 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"milliseconds_per_sidereal_day = milliseconds_per_year / (days_per_year + 1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"milliseconds_per_lunar_month = 29.530589 * milliseconds_per_day","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"md`#### Orbit parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"axis_tilt = 23.4","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"// Moment the mean solar time passes through the first point of Aries\n// (this is when the sidereal time at 0°E is the same as the mean solar time).\n// Due to equation of time this is about two days later than the equinox.\nequinox = Date.UTC(2020, 2, 22, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2350,"value":"// sun_rot value at perihelion (this is a point where the effect of\n// orbit eccentricity on equation of time is zero)\nsun_rot_perihelion = .784","pinned":true,"hidden":false,"mode":"ojs"},{"id":2525,"value":"// Time stamp of a new moon (according to mean lunation)\n// To get close to the average you should pick a new moon in\n// the longest or shortest lunar cycle.\nnew_moon = Date.UTC(2023, 8, 15, 1, 39)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1234,"value":"md`#### rotations\n\nRrotations are expressed in units of one full rotation, and the direction is correct for looking towards the south pole.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"// sun rotation relative to sky. 0 at vernal equinox\nsun_rot = (current_time.date.getTime() - equinox) / milliseconds_per_year","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"// sky rotation relative to earth\nsky_rot = (-sun_rot_epoch - current_time.date.getTime() / milliseconds_per_sidereal_day - observer[0] / 360) % 1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":2332,"value":"// Sky rotation at Unix epoch\n// at lon=0°E at 0 local time, sky_rot == -sun_rot so the sun\n// is exactly north\nsun_rot_epoch = -equinox / milliseconds_per_year;","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"moon_rot = (sun_rot + (current_time.date.getTime() - new_moon) / milliseconds_per_lunar_month) % 1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":2039,"value":"// declination of the point on the ecliptic with given longitude (λ)\ndeclination_on_ecliptic = λ => Math.asin(sin_axis_tilt * Math.sin(λ)) * 180 / Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":2051,"value":"// Calculates the ecliptic longitude (λ) of the point on the ecliptic\n// with a given right ascension (α)\n// α is derived (for the sun) from mean solar time.\nfunction rot_to_λ(rot)\n{\n var α = rot * Math.PI * 2;\n return Math.atan2(Math.sin(α), Math.cos(α) * cos_axis_tilt);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2384,"value":"// convert ecliptic coordinates to equatorial: (λ, β) to (α, δ)\necliptic_rotation = d3.geoRotation([0, 0, axis_tilt]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2413,"value":"ecliptic_rotation([0, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"sun_pos = {\n var angle = sun_rot * 360;\n if (sun_moon_mode == \"clock\")\n return [angle, declination_on_ecliptic(rot_to_λ(sun_rot))];\n else if (sun_moon_mode == \"ecliptic\")\n return ecliptic_rotation([angle, 0]);\n else // \"eqn\"\n // apply approximation from Wikipedia, ahem, the Astronomical Almanac\n // this has zero crossings at aphelion (↗) and perihelion (↘)\n var g = (sun_rot - sun_rot_perihelion) * 2 * Math.PI;\n angle += 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);\n return ecliptic_rotation([angle, 0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"// The moon orbit is not that regular, so just settle for\n// mean lunar time\nmoon_pos = [moon_rot * 360, declination_on_ecliptic(rot_to_λ(moon_rot))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"moon_phase = {\n var d = moon_rot - sun_rot;\n return d - Math.floor(d);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2037,"value":"sin_axis_tilt = Math.sin(Math.PI / 180 * axis_tilt)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2059,"value":"cos_axis_tilt = Math.cos(Math.PI / 180 * axis_tilt)","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"rot_clock_dial = (anchor == \"Observer\" ? 0 : anchor == \"Mean solar time\" ? -sky_rot - sun_rot - .50: -sky_rot + flip_pole(.25)) % 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"md`### Formats`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"date_format = Intl.DateTimeFormat(undefined, {\n timeStyle: \"short\",\n dateStyle: \"medium\",\n timeZone: \"UTC\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2927,"value":"sidereal_time_format = Intl.DateTimeFormat(undefined, {\n timeStyle: \"short\", timeZone: \"UTC\", hourCycle: 'h23'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2365,"value":"pad = n => (\"00\" + n).slice(-2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"function roman_num(d)\n{\n if (d == 0) return \"XII\";\n if (d == 12) return \"\"\n if (d > 12) d -= 12;\n \n var s = \"\";\n while (d >= 9)\n {\n s = s + \"X\";\n d -= 10;\n }\n if (d >= 5) // clocks usually have IIII for 4\n {\n s = s + \"V\";\n d -= 5;\n }\n while (d > 0)\n {\n s = s + \"I\";\n d -= 1;\n }\n while (d < 0)\n {\n s = s.substr(0, s.length - 1) + \"I\" + s.substr(s.length - 1, 1);\n d += 1;\n } \n return s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`### SVG draw metrics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"radius = .44 * svg_size","pinned":true,"hidden":false,"mode":"ojs"},{"id":1026,"value":"radius_t = .47 * svg_size","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"svg_size = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":2627,"value":"svg_max_width = +param(\"width\", 1024)","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`### Projections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"is_north_up = observer[1] <= 0 ? 1 : 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":2001,"value":"function flip_pole(n)\n{\n return is_north_up ? -n : n;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"pole_lookat = flip_pole(90)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"projection_celestial = {\n var rot = [(sky_rot + rot_clock_dial) * 360 + (1-is_north_up) * 180,\n pole_lookat];\n return d3.geoStereographic()\n .reflectX(true)\n .scale(svg_size / 4)\n .translate([svg_size / 2, svg_size / 2])\n .rotate(rot)\n .clipAngle(180 - 1e-4)\n .clipExtent([[0, 0], [svg_size, svg_size]])\n .precision(0.2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"projection_earth = d3.geoStereographic()\n .scale(svg_size / 4)\n .translate([svg_size / 2, svg_size / 2])\n .rotate([is_north_up * 180, Math.abs(observer[1])])\n .clipAngle(180 - 1e-4)\n .clipExtent([[0, 0], [svg_size, svg_size]])\n .precision(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"path_celestial = d3.geoPath(projection_celestial);","pinned":true,"hidden":false,"mode":"ojs"},{"id":959,"value":"path_identity = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"path_earth = d3.geoPath(projection_earth);","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"function mk_path(coords)\n{\n return {\n type: \"LineString\",\n coordinates: coords\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"md`### Shapes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"graticule = d3.geoGraticule().step([90, 90]).extent([[-180, -90], [179.99999, 0]])();","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"graticule_sky = {\n if (sky_display == \"None\") { return []; }\n \n if (sky_display == \"Constellations\")\n {\n var ofrohn_url = \"https://ofrohn.github.io/data/constellations.lines.json\";\n return d3.json(ofrohn_url);\n }\n \n return d3.geoGraticule().step([15, 15]).extent([[-180, -90], [179.99999, 90]])();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"ecliptic = {\n var c = d3.geoCircle().precision(10).center([-90 + 180 * is_north_up, -flip_pole(90 + axis_tilt)]);\n var l = [c.radius(89.5)(), c.radius(90.5)(), c.radius(75)()];\n for (var i = 0; i < 12; ++i)\n {\n var a = 30 * i;\n var rad = a * Math.PI / 180;\n l.push(mk_path([\n ecliptic_rotation([a, -flip_pole(.5)]),\n ecliptic_rotation([a, - flip_pole(15)])\n ]))\n }\n return l;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"function put_char(g, char)\n{\n return g.append(\"text\")\n .attr(\"dy\", \".4em\")\n .attr(\"text-anchor\", \"middle\")\n .text(char)}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1866,"value":"function update_char(ch_el, pos)\n{\n ch_el.attr(\"x\", pos[0])\n .attr(\"y\", pos[1]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":828,"value":"horoscope = {\n var chars = [\"♈\", \"♉\", \"♊\", \"♋\", \"♌\", \"♍\", \"♎\", \"♏\", \"♐\", \"♑\", \"♒\", \"♓\"]\n var h = [];\n for (var i = 0; i < 12; ++i)\n {\n var a = 15 + 30 * i;\n var rad = a * Math.PI / 180;\n h.push({\n p: projection_celestial(ecliptic_rotation([a, -flip_pole(7.5)])),\n text: chars[i] + \"\\uFE0E\" /* modifier: emoji black/white variant */\n })\n } \n return h;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"celestial_eq = d3.geoCircle().radius(90).precision(10).center([0, pole_lookat])();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1911,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1476,"value":"function hand_with_length(p1, p2, projection, length)\n{\n var p1 = projection(p1);\n var p2 = projection(p2);\n var dx = p2[0] - p1[0];\n var dy = p2[1] - p1[1];\n var scale = length / Math.hypot(dx, dy);\n return [p1, [p1[0] + scale * dx, p1[1] + scale * dy]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1320,"value":"function hand_marker()\n{\n return svg`\n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1405,"value":"test_marker = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, svg_size, 50])\n .style(\"background\", \"#8af\");\n\n var defs = svg.append('defs')\n defs.append(hand_marker)\n \n svg.append(\"path\").attr(\"d\", \"M5 1 L80,20\").attr(\"stroke\", \"black\").attr(\"fill\", \"none\").attr(\"stroke-width\", 2)\n .attr(\"marker-end\", \"url(#hand-end)\")\n \n \n svg.append(\"path\").attr(\"d\", \"M150 -4 L280,15\").attr(\"stroke\", \"black\").attr(\"fill\", \"none\").attr(\"stroke-width\", 8)\n .attr(\"marker-end\", \"url(#hand-end)\")\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"function update_moon_shape(circle, path, pos, size, border, phase)\n{\n circle\n .attr(\"r\", size - .5*border)\n .attr(\"cx\", pos[0])\n .attr(\"cy\", pos[1])\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1)\n .attr(\"fill\", \"#222\");\n var size_1 = size - border;\n var sin_th = Math.cos(Math.PI * 2 * phase);\n var x1 = size_1 * (phase <= .5 ? -1 : sin_th);\n var x2 = size_1 * (phase >= .5 ? 1 : -sin_th);\n path\n .attr(\"d\",\n `M${pos[0]} ${pos[1] - size_1}` +\n ` a ${Math.abs(x1)} ${size_1} 0 0 ${x1 <= 0 ? 0 : 1} 0 ${size_1*2}` +\n ` a ${Math.abs(x2)} ${size_1} 0 0 ${x2 > 0 ? 0 : 1} 0 ${-size_1*2}`)\n .attr(\"stroke\", \"none\")\n .attr(\"fill\", \"#eeeacc\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1682,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 800, 32]);\n var g = svg.append(\"g\");\n for (var i = 0; i <= 20; ++i)\n {\n update_moon_shape(g.append(\"circle\"), g.append(\"path\"), [96+16 + 32*i, 16], 14, 1, .05 * i)\n }\n g = svg.append(\"g\");\n g.append(star_shape);\n g = svg.append(\"g\").attr(\"transform\", \"translate(32, 0)\");\n g.append(() => sun_shape(false, 2));\n g = svg.append(\"g\").attr(\"transform\", \"translate(64, 0)\");\n g.append(() => sun_shape(true, 1));\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3107,"value":"star_shape = () => svg`\n\n \n \n \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3326,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"import { range, dayOfYear, timeSliders, location, timeButtons, currentLocationButton} from \"@roelandschoukens/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}