30:Tf1a,chart = { const cx = width; const cy = height; 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"); svg.append("path") .attr("d", path(graticule)) .attr("fill", "none") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.2); svg.append("path") .attr("d", path(outline)) .attr("fill", "none") .attr("stroke", "currentColor"); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const hour = svg.append("g") .selectAll("g") .data(d3.range(24)) .join("g"); hour.append("path") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2) .attr("d", hour => path({ type: "LineString", coordinates: d3.utcDays(start, end).map(day => { return solar.position(d3.utcHour.offset(day, hour)); }) })); hour.append("text") .datum(hour => d3.utcHour.offset(mid, hour)) .attr("dy", "-1em") .attr("transform", date => `translate(${projection(solar.position(date))})`) .text(formatHour); const moonPath = svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 2); const moonHour = svg.append("g") .selectAll("g") .data(d3.range(24)) .join("g"); moonHour.append("circle") .attr("fill", "black") .attr("r", 2); moonHour.append("text") // write large-stroke white font in the background. .attr("dy", "-0.4em") .attr("stroke", "white") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("fill", "none") .clone(true) // write the black font on top of white. .attr("stroke", null) .attr("fill", "black"); const sunPath = svg.append("path") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2); const sunHour = svg.append("g") .selectAll("g") .data(d3.range(24)) .join("g"); sunHour.append("circle") .attr("fill", "black") .attr("r", 3); sunHour.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 update(date) { const start = d3.utcHour.offset(solar.noon(date), -12); const end = d3.utcHour.offset(start, 24); sunHour.data(d3.utcHours(start, end)); sunPath.attr("d", path({type: "LineString", coordinates: d3.utcMinutes(start, end).map(solar.position)})); sunHour.attr("transform", d => `translate(${projection(solar.position(d))})`); sunHour.select("text:first-of-type").text(formatHour); sunHour.select("text:last-of-type").text(formatHour); const moonStart = d3.utcHour.offset(date, 0); const moonEnd = d3.utcHour.offset(moonStart, 24); moonHour.data(d3.utcHours(moonStart, moonEnd)); moonHour.attr("transform", d => `translate(${ projection([(180 + lunar(d).azimuth*(180/3.141)), lunar(d).altitude*(180/3.141)] )})`); moonPath.attr("d", path( {type: "LineString", coordinates: d3.utcMinutes(moonStart, moonEnd) .map(d => [180 + lunar(d).azimuth*(180/3.141), lunar(d).altitude*(180/3.141)])} )); moonHour.select("text:first-of-type").text(formatHour); moonHour.select("text:last-of-type").text(formatHour); } return Object.assign(svg.node(), {update}); }31:[] 2e:{"title":"Solar & Lunar paths in 2021 at your location","cells":[{"id":984,"value":"viewof title = md`\n# Solar & Lunar paths in 2021 at your location\n\nThe default location is *Stavanger, Norway*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof location = {\n const form = html``;\n const formatLocation = ([x, y]) => [\n `${Math.abs(y).toFixed(4)}°${y > 0 ? \"N\" : \"S\"}`,\n `${Math.abs(x).toFixed(4)}°${x > 0 ? \"E\" : \"W\"}`\n ].join(\", \");\n form.b.onclick = async event => {\n form.value = await new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(\n ({coords: {longitude, latitude}}) => resolve([longitude, latitude]),\n reject\n );\n form.o.value = \"Locating…\";\n });\n form.o.value = formatLocation(form.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = Object.assign([5.7180, 58.9791]);\n form.o.value = formatLocation(form.value);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof date = Scrubber(d3.utcDays(new Date(Date.UTC(2021, 0, 1)), new Date(Date.UTC(2022, 0, 1))),\n {\n format: date => date.toLocaleString(\"en\", {month: \"long\", day: \"numeric\", timeZone: \"UTC\"}),\n delay: 70\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"md`\n-----\n## Code\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"start = d3.utcYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1010,"value":"end = d3.utcYear.offset(start)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1006,"value":"mid = d3.utcMonth.offset(start, 6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":937,"value":"lunar = (date) => suncalc.getMoonPosition(date, location[1], location[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"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":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"outline = d3.geoCircle().radius(90).center([0, 90])()","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"graticule = d3.geoGraticule().stepMinor([15, 10])()","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"formatHour = d => d.toLocaleString(\"en\", {hour: \"numeric\", timeZone: location.timeZone})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"formatMonth = d => d.toLocaleString(\"en\", {month: \"long\", timeZone: location.timeZone})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"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([180, d]))\n .attr(\"x\", ([x]) => x)\n .attr(\"y\", ([, y]) => y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"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":17,"value":"scale = (width - 120) * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"width = 954 + 28","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"update = chart.update(date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"md` \n## Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"solar = (await require(\"solar-calculator@0.2\"))(location)","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"suncalc = require(\"suncalc\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}