2f:T4d3,viewof date = { const start = new Date(Date.UTC(2019, 0, 1)); const end = new Date(Date.UTC(2020, 0, 1)); const n = d3.utcDay.count(start, end); const form = html``; let timer = null; form.i.oninput = event => { if (event && event.isTrusted && timer) form.b.onclick(); form.value = d3.utcDay.offset(start, form.i.valueAsNumber); form.o.value = form.value.toLocaleString("en", {month: "long", day: "numeric", timeZone: "UTC"}); }; form.b.onclick = () => { if (timer) { form.b.textContent = "Play"; timer.stop(); timer = null; } else { form.b.textContent = "Pause"; timer = d3.timer(() => { form.i.valueAsNumber = (form.i.valueAsNumber + 1) % n; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); }); } }; invalidation.then(() => timer.stop()); form.i.oninput(); form.b.onclick(); return form; }30:T1295,chart = { const longitude = location[0]; const latitude = location[1]; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("fill", "currentColor") .style("margin", "0 -14px") .style("display", "block"); const defs = svg.append("g").append("defs"); defs .append("clipPath") .attr("id", "horizonClip") .append("path") .attr("d", path(outline)); svg .append("path") .attr("d", path(graticule)) .attr("fill", "none") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.2) .attr("clip-path", "url(#horizonClip)"); svg .append("path") .attr("d", path(outline)) .attr("fill", "none") .attr("stroke", "currentColor"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const sunPath_background = svg .append("g") .attr("fill", "none") .attr("stroke", "#333333") .attr("stroke-dasharray", 3) .attr("stroke-width", 1) .attr("clip-path", "url(#horizonClip)"); const analemma_background = svg .append("g") .attr("stroke", "#333333") .attr("stroke-dasharray", 3) .attr("fill", "none") .attr("stroke-width", 1) .attr("clip-path", "url(#horizonClip)"); const sunPath_foreground = svg .append("g") .attr("fill", "none") .attr("stroke", "#333333") .attr("stroke-width", 2) .attr("clip-path", "url(#horizonClip)"); const analemma_foreground = svg .append("g") .attr("stroke", "#333333") .attr("fill", "none") .attr("stroke-width", 2) .attr("clip-path", "url(#horizonClip)"); const sunPath = svg .append("path") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2); const hour = svg.append("g").selectAll("g").data(d3.range(24)).join("g"); hour.append("circle").attr("fill", "black").attr("r", 2); hour .append("text") .attr("dy", "-0.4em") .attr("stroke", "white") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("fill", "none") .clone(true) .attr("stroke", null) .attr("fill", "black"); function updateDate(date) { const start = d3.utcHour.offset(solar.noon(date, longitude), -12); const end = d3.utcHour.offset(start, 24); sunPath.attr( "d", path({ type: "LineString", coordinates: d3 .utcMinutes(start, end) .map((t) => solar.apparentPosition(t, latitude, longitude)) }) ); hour.data(d3.utcHours(start, end)); hour.attr( "transform", (d) => `translate(${projection( solar.apparentPosition(d, latitude, longitude) )})` ); hour.select("text:first-of-type").text(formatHour); hour.select("text:last-of-type").text(formatHour); } function update(solar) { const ms = new Date(2014, -1, 1); const mm = new Date(2014, 5, 1); const me = new Date(2014, 11, 1); const sunPaths = (s, e) => { return d3.utcMonths(s, e).map((d) => { let start = d3.utcHour.offset(solar.noon(d, longitude), -12); let end = d3.utcHour.offset(start, 24); return { type: "LineString", coordinates: d3 .utcMinutes(start, end) .map((d) => solar.apparentPosition(d, latitude, longitude)) }; }); }; const analemmas = (s, e) => { let start = d3.utcMonth.offset(s, 1); let end = d3.utcMonth.offset(e, 1); return d3.range(24).map((h) => { return { type: "LineString", coordinates: d3 .utcDays(start, end) .map((d) => solar.apparentPosition( d3.utcHour.offset(d, h), latitude, longitude ) ) }; }); }; sunPath_foreground .selectAll("path") .data(sunPaths(ms, mm)) .join("path") .attr("d", (d) => path(d)); sunPath_background .selectAll("path") .data(sunPaths(mm, me)) .join("path") .attr("d", (d) => path(d)); analemma_foreground .selectAll("path") .data(analemmas(ms, mm)) .join("path") .attr("d", (d) => path(d)); analemma_background .selectAll("path") .data(analemmas(mm, me)) .join("path") .attr("d", (d) => path(d)); // hour.data(d3.utcHours(start, end)); // hour.attr("transform", d => `translate(${projection(solar.position(d))})`); // hour.select("text:first-of-type").text(formatHour); // hour.select("text:last-of-type").text(formatHour); } return Object.assign(svg.node(), { update }, { updateDate }); }31:T84a,solar = { const solar = await require("solar-calculator@0.3"); var J2000 = Date.UTC(2000, 0, 1, 12), abs = Math.abs, acos = Math.acos, asin = Math.asin, cos = Math.cos, max = Math.max, min = Math.min, sin = Math.sin, tan = Math.tan, epsilon = 1e-6, pi = Math.PI, tau = 2 * pi, radians = pi / 180, degrees = 180 / pi; function utcDay(date) { date = new Date(+date); date.setUTCHours(0, 0, 0, 0); return date; } solar.apparentPosition = function (date, latitude, longitude) { var x = longitude * radians, y = latitude * radians; var cy = cos(y), sy = sin(y); var centuries = (date - J2000) / (864e5 * 36525), theta = solar.declination(centuries) * radians, ctheta = cos(theta), stheta = sin(theta), azimuth = ((((date - utcDay(date)) / 864e5) * tau + solar.equationOfTime(centuries) * (tau / (24 * 60)) + x) % tau) - pi, zenith = acos(max(-1, min(1, sy * stheta + cy * ctheta * cos(azimuth)))), azimuthDenominator = cy * sin(zenith); if (azimuth < -pi) azimuth += tau; if (abs(azimuthDenominator) > epsilon) azimuth = (azimuth > 0 ? -1 : 1) * (pi - acos( max(-1, min(1, (sy * cos(zenith) - stheta) / azimuthDenominator)) )); if (azimuth < 0) azimuth += tau; // Correct for atmospheric refraction. var atmosphere = 90 - zenith * degrees; if (atmosphere <= 85) { var te = tan(atmosphere * radians); zenith -= ((atmosphere > 5 ? 58.1 / te - 0.07 / (te * te * te) + 0.000086 / (te * te * te * te * te) : atmosphere > -0.575 ? 1735 + atmosphere * (-518.2 + atmosphere * (103.4 + atmosphere * (-12.79 + atmosphere * 0.711))) : -20.774 / te) / 3600) * radians; } // Note: if zenith > 108°, it’s dark. //debugger; return [azimuth * degrees, 90 - zenith * degrees]; }; return solar; }32:[] 2d:{"title":"Sunpath Diagram","cells":[{"id":0,"value":"md`# Sunpath Diagram\nA combination of sunpath and analemma diagrams https://observablehq.com/@mbostock/solar-path, https://observablehq.com/@jwperakis/sunpath-diagram, and https://bl.ocks.org/mbostock/c5504ab3cd25f93af26a`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"solar2 = (await require(\"solar-calculator@0.2\"))(location)","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"solar2.noon(new Date())","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"solar.noon(new Date(), longitude)","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"solar.apparentPosition(new Date(), latitude, longitude)","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"solar2.position(new Date())","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"viewof location = r1==='usa' ? usaMapCoordinates({\n title: \"Choose a US Place\",\n width: 600,\n value: [-122.27, 37.87]\n}) : worldMapCoordinates({\n title: \"Choose a place\",\n width: 600,\n value: [166.668235,-77.846323]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"viewof r1 = radio({\n description: 'Please select a map',\n options: [\n { label: 'USA', value: 'usa' },\n { label: 'World', value: 'world' }\n ],\n value: 'usa'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"location","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"latitude = location[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"longitude = location[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"solar","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"formatMonth = d => d.toLocaleString(\"en\", {month: \"long\", timeZone: \"America/Los_Angeles\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"formatHour = d => d.toLocaleString(\"en\", {hour: \"numeric\", timeZone: \"America/Los_Angeles\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"width = 954 + 28","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"import {usaMapCoordinates, worldMapCoordinates, radio, nation, states} \n from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"scale = (width - 120) * 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"graticule = d3.geoGraticule().stepMinor([15, 10])()","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"outline = d3.geoCircle().radius(90).center([0, 90])()","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"projection = d3.geoProjection((x, y) => d3.geoStereographicRaw(x, -y))\n .scale(scale)\n .clipExtent([[0, 0], [width, height]])\n .rotate([0, -90])\n .translate([width / 2, height / 2])\n .precision(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"yAxis = g => g\n .call(g => g.append(\"g\")\n .selectAll(\"text\")\n .data(d3.range(10, 91, 10)) // every 10°\n .join(\"text\")\n .attr(\"dy\", \"0.35em\")\n .text(d => `${d}°`)\n .datum(d => projection([0, d]))\n .attr(\"x\", ([x]) => x)\n .attr(\"y\", ([, y]) => y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"xAxis = g => g\n .call(g => g.append(\"g\")\n .attr(\"stroke\", \"currentColor\")\n .selectAll(\"line\")\n .data(d3.range(360))\n .join(\"line\")\n .datum(d => [\n projection([d, 0]),\n projection([d, d % 10 ? -1 : -2])\n ])\n .attr(\"x1\", ([[x1]]) => x1)\n .attr(\"x2\", ([, [x2]]) => x2)\n .attr(\"y1\", ([[, y1]]) => y1)\n .attr(\"y2\", ([, [, y2]]) => y2))\n .call(g => g.append(\"g\")\n .selectAll(\"text\")\n .data(d3.range(0, 360, 10))\n .join(\"text\")\n .attr(\"dy\", \"0.35em\")\n .text(d => d === 0 ? \"N\" : d === 90 ? \"E\" : d === 180 ? \"S\" : d === 270 ? \"W\" : `${d}°`)\n .attr(\"font-size\", d => d % 90 ? null : 14)\n .attr(\"font-weight\", d => d % 90 ? null : \"bold\")\n .datum(d => projection([d, -4]))\n .attr(\"x\", ([x]) => x)\n .attr(\"y\", ([, y]) => y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"update = chart.update(solar)","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"updateDate = chart.updateDate(date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"// date = new Date(Date.UTC(2020, 12, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"d3.utcMonths(new Date(2014, -1, 1), new Date(2014, 11, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"data = d3[\"utcHour\"]\n .range(new Date(\"2025-01-01\"), new Date(\"2026-01-01\"), 24)\n .map((d) => {\n const noon = solar.noon(d, 30);\n const century = solar.century(noon);\n const dec = solar.declination(century);\n return { noon: solar.noon(d, 30), dec };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"Plot.line(data, {x: \"noon\", y: \"dec\"}).plot({y: {grid: true}})\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}