30:Te1a,renderAltitudePlot = (data, xDomain) => { let plotType = "areaY"; if (xDomain[1].getTime() - xDomain[0].getTime() <= 100 * 86400e3) { plotType = "lineY"; } const yDomain = [-90, 90]; return Plot.plot({ width: plotWidth, height: plotHeight, className: "plot", x: { domain: xDomain }, y: { domain: yDomain, grid: true }, marginLeft: 16, marks: [ () => htl.svg` ${d3.range(20).map((d) => { return htl.svg.fragment``; })} `, ...(plotType === "areaY" ? [ Plot.area(data, { clip: true, x1: "start", x2: "end", y1: "min", y2: "max", fill: "url(#gradient)", opacity: 0.7, channels: { period: { value: ({ start, end }) => formatPeriod(start, end), label: "period" } }, tip: { format: { period: (d) => d, x: false, y1: (d) => ` ${d.toPrecision(4)}° `, y2: (d) => ` ${d.toPrecision(4)}° `, stroke: false } }, curve: "step" }) ] : []), ...(plotType === "lineY" ? [ Plot.lineY(data, { clip: true, x: ({ start, end }) => new Date( start.getTime() + (end.getTime() - start.getTime()) / 2 ), y: ({ min, max, extremum }) => { return extremum ?? (max + min) / 2; }, stroke: "url(#gradient)", strokeWidth: 3, opacity: 0.7, curve: "catmull-rom", channels: { period: { value: ({ start, end }) => formatPeriod(start, end), label: "period" }, angle: { value: (d) => d.min, label: "angle" } }, tip: { format: { period: (d) => d, x: false, y: false, stroke: false } } }) ] : []), Plot.dot([new Date()], { clip: true, x: (d) => d, y: (d) => (360 * SunCalc.getPosition(d, latitude, longitude).altitude) / (Math.PI * 2), r: 7, fill: "#ffed97", strokeWidth: 2, stroke: "rgba(255,255,255,1)" }), Plot.dot([new Date()], { x: (d) => d, y: (d) => (360 * SunCalc.getPosition(d, 50, 0).altitude) / (Math.PI * 2), r: 0.53 / 2, fill: "#ffed97" }), Plot.axisX({ label: "" }), Plot.axisY({ tickSize: 0, // don’t draw ticks dx: 38, // offset right dy: -6, // offset up lineAnchor: "bottom", tickFormat: (d, i, _) => `${d}°` }), Plot.gridY({ strokeDasharray: "0.75,2", strokeOpacity: 0.5 }), Plot.ruleY([0]), ] }); }31:Tb55,renderTimesPlot = (data, xDomain) => { console.log(data); const yDomain = [0, 86400]; return Plot.plot({ width: plotWidth, height: plotHeight, className: "times-plot", x: { domain: xDomain }, y: { domain: yDomain }, marginLeft: 16, marks: [ Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: 0, y2: "nauticalDawn", fill: color(-90), opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "dawn", y2: "nauticalDawn", fill: color(-45), opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "dawn", y2: "sunrise", fill: color(-30), opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "sunrise", y2: "sunriseEnd", fill: "orange", opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "sunriseEnd", y2: "sunsetStart", fill: "#ffed97", opacity: 0.2, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "sunsetStart", y2: "sunset", fill: color(45), opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "sunset", y2: "dusk", fill: color(-30), opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "nauticalDusk", y2: "dusk", fill: color(-45), opacity: 0.5, curve: "step" }), Plot.rect(data, { clip: true, x1: "start", x2: "end", y1: "nauticalDusk", y2: 86400, fill: color(-90), opacity: 0.5, curve: "step" }), Plot.dot([new Date()], { clip: true, x: (d) => d, y: (d) => dayjs.utc(dayjs.utc(d).tz(timezone).format().slice(0, 19)).unix() % 86400, r: 7, fill: "#ffed97", strokeWidth: 2, stroke: "rgba(255,255,255,1)" }), Plot.axisX({ label: "" }), Plot.axisY({ tickFormat: (d) => dayjs.utc(d * 1000).format("HH:mm"), dx: 45, // offset right dy: -6, // offset up, tickSize: 0, // don’t draw ticks ticks: d3.range(0, 86400, 3600) }), Plot.gridY({ strokeDasharray: "0.75,2", strokeOpacity: 1, ticks: d3.range(0, 86400, 3600) }), Plot.ruleY([0]) ] }); }32:T550,zoomablePlot = { return function ({ initialData, initialXDomain, renderPlot, fetchData }) { const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear(); let data = initialData; const insertPlot = (data, xDomain) => { const chart = renderPlot(data, xDomain); container.html("").append(() => chart); xScale.range(chart.scale("x").range).domain(chart.scale("x").domain); yScale.range(chart.scale("y").range).domain(chart.scale("y").domain); return [ xScale .copy() .range(chart.scale("x").range) .domain(chart.scale("x").domain) ]; }; const zoomed = (e) => { const transform = e.transform; const xDomain = Array.from( initialXScale.range(), (v) => new Date(initialXScale.invert(transform.invertX(v))) ); const data = fetchData(xDomain[0], xDomain[1], latitude, longitude); insertPlot(data, xDomain); }; const div = d3.create("div"); const container = div .attr("style", "width: min-content") .append("svg") .attr("width", plotWidth) .attr("height", plotHeight) .append("g"); const [initialXScale] = insertPlot(initialData, initialXDomain); const zoom = d3.zoom().scaleExtent([0.5, 500]).on("zoom", zoomed); div.call(zoom); return div.node(); }; }33:Tab9,function fetchAltitudeData(start, end, latitude, longitude) { let step = 24; let unit = "utcHour"; if (new Date(end).getTime() - new Date(start).getTime() < 86400e3 * 100) { step = 30; unit = "utcMinute"; } if (new Date(end).getTime() - new Date(start).getTime() < 86400e3 * 15) { step = 10; unit = "utcMinute"; } if (new Date(end).getTime() - new Date(start).getTime() <= 86400e3) { step = 600; unit = "utcSecond"; } start = new Date(start); start = new Date( start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0 ); end = new Date(end); end = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0); end = new Date(end.getTime() + 86400e3 + 1); const data = d3[unit] .range(new Date(start), new Date(end), step) .map((date) => { const start = date; const end = d3[unit].offset(date, step); let nadir; let solarNoon; [-86400e3, 0, 86400e3].forEach((offset) => { const times = SunCalc.getTimes( new Date(start.getTime() + offset), latitude, longitude ); if ( start.getTime() < times.solarNoon.getTime() && times.solarNoon.getTime() < end.getTime() ) { solarNoon = times.solarNoon; } if ( start.getTime() < times.nadir.getTime() && times.nadir.getTime() < end.getTime() ) { nadir = times.nadir; } }); const startPosition = SunCalc.getPosition(start, latitude, longitude); const endPosition = SunCalc.getPosition(end, latitude, longitude); let extremum; let extremumTime; let max = Math.max(startPosition.altitude, endPosition.altitude); if (solarNoon) { max = SunCalc.getPosition(solarNoon, latitude, longitude).altitude; extremum = max; extremumTime = solarNoon; } let min = Math.min(startPosition.altitude, endPosition.altitude); if (nadir) { min = SunCalc.getPosition(nadir, latitude, longitude).altitude; extremum = min; extremumTime = nadir; } min = (360 * min) / (2 * Math.PI); max = (360 * max) / (2 * Math.PI); extremum = extremum ? (360 * extremum) / (2 * Math.PI) : null; return { start, ...(extremum ? { extremum } : {}), ...(extremumTime ? { extremumTime } : {}), end, min, max }; }); const min = data.reduce((curr, prev) => { return curr.min < prev.min ? curr : prev; }).min; const max = data.reduce((curr, prev) => { return curr.max > prev.max ? curr : prev; }).max; data.min = min; data.max = max; return data; }34:[] 2e:{"title":"Plotting Sunlight","cells":[{"id":0,"value":"# Plotting Sunlight\nYour daily dose of vitamin [D3](https://d3js.org)","pinned":false,"hidden":false,"mode":"md"},{"id":584,"value":"viewof location = {\n const form = html``;\n const formatLocation = ([x, y]) =>\n [\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 = [4.4, 50.83];\n form.o.value = formatLocation(form.value);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"The following plot displays the altitude of the sun in degrees at various latitude and longitude (locate yourself above!) and for various time of the year (zoom and pan!)","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"{\n const container = htl.html`

zoomable

`;\n\n const plot = zoomablePlot({\n initialData: initialAltitudeData,\n initialXDomain,\n renderPlot: renderAltitudePlot,\n fetchData: fetchAltitudeData\n });\n container.appendChild(plot);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"The following plot displays the different solar phases of the day for a given location (locate yourself above!), taking into account the local time (you might see breaks in the curves if your timezone applies time saving...). Note that the sun is represented bigger than it's actual angular size (about 0.53 degrees) for sake of visibility.","pinned":false,"hidden":false,"mode":"md"},{"id":1022,"value":"swatches({ color: timesLegendColorScale })","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"{\n const container = htl.html`

zoomable

`;\n\n const plot = zoomablePlot({\n initialData: initialTimesData,\n initialXDomain,\n renderPlot: renderTimesPlot,\n fetchData: fetchTimesData\n });\n container.appendChild(plot);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"Boring technical details... ","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"plotWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"plotHeight = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"formatPeriod = (start, end) => {\n const durationInHours = (end - start) / (1000 * 60 * 60); // Duration in hours\n if (durationInHours === 24) {\n return d3.utcFormat(\"%b %d, %Y\")(start); // Format only the date\n } else {\n return `${d3.utcFormat(\"%b %d, %Y %H:%M\")(start)} to ${d3.utcFormat(\n \"%H:%M\"\n )(end)}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"initialXDomain = [\n new Date(Date.now() - (365 + 30) * 86400e3),\n new Date(Date.now() + 86400e3 * 30)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"initialAltitudeData = fetchAltitudeData(\n initialXDomain[0],\n initialXDomain[1],\n latitude,\n longitude\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"function fetchTimesData(start, end) {\n return timesData.filter(\n (d) =>\n d.start.getTime() > start.getTime() - 86400e3 * 3 &&\n d.end.getTime() < end.getTime() + 86400e3 * 3\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"timesData = {\n return d3.utcDay\n .range(\n new Date(Date.now() - 365 * 86400e3 * 2),\n new Date(Date.now() + 365 * 86400e3 * 2),\n 1\n )\n .map((date) => {\n const times = SunCalc.getTimes(date, latitude, longitude);\n const localTimes = {};\n Object.keys(times).forEach((k) => {\n localTimes[k] =\n dayjs\n .utc(dayjs.utc(times[k]).tz(timezone).format().slice(0, 19))\n .unix() % 86400;\n });\n localTimes.start = dayjs.utc(times.solarNoon).startOf(\"day\").toDate();\n localTimes.end = dayjs.utc(times.solarNoon).endOf(\"day\").toDate();\n return localTimes;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"initialTimesData = fetchTimesData(\n new Date(\"2023-12-01\"),\n new Date(\"2025-02-01\")\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"latitude = location[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"longitude = location[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"SunCalc = require(\"suncalc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"color = d3.scaleSequential(d3.interpolateRdBu).domain([90, -90])","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"import { getTimezones } from \"@jcolot/time-zone-service\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"timezone = {\n const timezones = await getTimezones(longitude, latitude);\n return timezones?.[0].tzid ?? \"Etc/GMT\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"dayjs = {\n const dayjs = await require(\"dayjs\");\n const timezone = await require(\"dayjs/plugin/timezone\");\n const utc = await require(\"dayjs/plugin/utc\");\n dayjs.extend(timezone);\n dayjs.extend(utc);\n\n return dayjs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1007,"value":"timesLegendColorScale = d3.scaleOrdinal(\n [\"Night\", \"Nautical twighlight\", \"Civil twighlight\", \"Sunset/Sunrise\", \"Day\"],\n [\n colorAlpha(-90, 0.6),\n colorAlpha(-30, 0.6),\n colorAlpha(-15, 0.6),\n colorAlpha(30, 0.6),\n \"#ffed9766\"\n ]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1010,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"colorAlpha = function (value, alpha) {\n return color(value).replace(\"rgb\", \"rgba\").replace(\")\", `, ${alpha})`);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}