31: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 + 2) % n; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); }); } }; invalidation.then(() => timer.stop()); form.i.oninput(); form.b.onclick(); return form; }32:T1ba9,chart = { const cx = width / 2; const cy = height / 2; 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); /* first location */ const sunPath_background = svg.append("g") .attr("fill", "none") .attr("stroke", "#11111") .attr("stroke-dasharray", 3) .attr("stroke-width", 1) .attr("clip-path", "url(#horizonClip)"); const analemma_background = svg.append("g") .attr("stroke", targets_colors[1]) .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", "#111111") .attr("stroke-width", 2) .attr("clip-path", "url(#horizonClip)"); const analemma_foreground = svg.append("g") .attr("stroke", targets_colors[1]) .attr("fill", "none") .attr("stroke-width", 2) .attr("clip-path", "url(#horizonClip)"); const sunPath = svg.append("path") .attr("fill", "none") .attr("stroke", targets_colors[0]) .attr("stroke-width", 2); /* second location */ const sunPath2_background = svg.append("g") .attr("fill", "none") .attr("stroke", "none") .attr("stroke-dasharray", 5) .attr("stroke-width", 1) .attr("clip-path", "url(#horizonClip)"); const analemma2_background = svg.append("g") .attr("stroke", targets_colors[2]) .attr("stroke-dasharray", 5) .attr("fill", "none") .attr("stroke-width", 1) .attr("clip-path", "url(#horizonClip)"); const sunPath2_foreground = svg.append("g") .attr("fill", "none") .attr("stroke", "#333333") .attr("stroke-width", 2) .attr("clip-path", "url(#horizonClip)"); const analemma2_foreground = svg.append("g") .attr("stroke", targets_colors[2]) .attr("fill", "none") .attr("stroke-width", 2) .attr("clip-path", "url(#horizonClip)"); const sunPath2 = svg.append("path") .attr("fill", "none") .attr("stroke", targets_colors[3]) .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), -12); const end = d3.utcHour.offset(start, 24); sunPath.attr("d", path({type: "LineString", coordinates: d3.utcMinutes(start, end).map(solar.position)})); sunPath2.attr("d", path({type: "LineString", coordinates: d3.utcMinutes(start, end).map(solar2.position)})); 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); } function update(solar, solar2) { 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), -12); let end = d3.utcHour.offset(start, 24); return { type: "LineString", coordinates: d3.utcMinutes(start, end).map(solar.position) } }); } const sunPaths2 = (s, e) => { return d3.utcMonths(s, e).map(d => { let start = d3.utcHour.offset(solar2.noon(d), -12); let end = d3.utcHour.offset(start, 24); return { type: "LineString", coordinates: d3.utcMinutes(start, end).map(solar2.position) } }); } 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.position(d3.utcHour.offset(d, h))) } }); } const analemmas2 = (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 => solar2.position(d3.utcHour.offset(d, h))) } }); } /* first location */ 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)); /* second location */ sunPath2_foreground.selectAll("path") .data(sunPaths2(ms, mm)) .join("path") .attr("d", d => path(d)); sunPath2_background.selectAll("path") .data(sunPaths2(mm, me)) .join("path") .attr("d", d => path(d)); analemma2_foreground.selectAll("path") .data(analemmas2(ms, mm)) .join("path") .attr("d", d => path(d)); analemma2_background.selectAll("path") .data(analemmas2(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}); }33:[] 2f:{"title":"Sunpath Diagram Comparison","cells":[{"id":0,"value":"md`# Sunpath Diagram Comparison\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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`First location: ${swatches(targets_colors.slice(0,2))}\nSecond location: ${swatches(targets_colors.slice(2,4))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"viewof location = r1==='usa' ? usaMapCoordinates({\n title: \"Choose a US Place\",\n width: 200,\n value: [-122.27, 37.87]\n}) : worldMapCoordinates({\n title: \"Choose a place\",\n width: 300,\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: 'world'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"viewof location2 = r1==='usa' ? usaMapCoordinates({\n title: \"Choose a second US Place\",\n width: 200,\n value: [-71.05, 42.36]\n}) : worldMapCoordinates({\n title: \"Choose a second place\",\n width: 300,\n value: [0,0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"location","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"solar = (await require(\"solar-calculator@0.2\"))(location)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"solar2 = (await require(\"solar-calculator@0.2\"))(location2)","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":292,"value":"targets_colors = ['#00429d', '#3a8f99', '#c8004c', '#93003a']\n /* https://gka.github.io/palettes/#/4|d|00429d,00e18d|ff005e,93003a|1|1 */\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"update = chart.update(solar, solar2)","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":302,"value":"function swatches(colors) {\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;;\n const canvas = svg`