3e:null 3f:["$","title",null,{"children":"Plotting Sunlight | Julien Colot | Observable"}] 45:Td27,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) => SunCalc.getPosition(d, latitude, longitude).altitude, r: 7, fill: "#ffed97", strokeWidth: 2, stroke: "rgba(255,255,255,1)" }), 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]), ] }); }46: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]) ] }); }47: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(); }; }48:Ta65,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; } }); // SunCalc (new versions) returns altitude in degrees 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; } return { start, ...(extremum != null ? { 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; }49:[] 43:{"id":"4527c17bf89af16f","slug":"plotting-sunlight","title":"Plotting Sunlight","thumbnail":"c329fd7991231b076af0ee8551fbd297c2f005b283f0d7ef41ff4f3c93752a24","access_level":"public","create_time":"$D2024-12-18T15:27:55.520Z","update_time":"$D2026-09-30T12:25:02.159Z","view_time":null,"first_public_time":"$D2024-12-18T15:27:55.520Z","has_unpublished_edits":null,"fork":{"id":"0d45e0add5ef6050","slug":"zooming-large-datasets-with-observable-plot","title":"Zooming Large Datasets with Observable Plot","owner":{"id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024","bio":"Data scientist and front-end developer at Jetpack.ai"},"version":1111,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bdc1cf58f834078","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":null,"bio":"Data scientist and front-end developer at Jetpack.ai"}],"members":[{"type":"individual","id":"0bdc1cf58f834078","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":null,"role":"editor"},{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plotting Sunlight","cells":[{"id":0,"value":"# Plotting Sunlight\nYour daily dose of vitamin [D3](https://d3js.org)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1022,"value":"swatches({ color: timesLegendColorScale })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"Boring technical details... ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"plotWidth = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"plotHeight = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"initialAltitudeData = fetchAltitudeData(\n initialXDomain[0],\n initialXDomain[1],\n latitude,\n longitude\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"const initialTimesData = fetchTimesData(initialXDomain[0], initialXDomain[1]);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"latitude = location[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"longitude = location[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"import * as SunCalcModule from \"npm:suncalc\";\nconst SunCalc = SunCalcModule.default ?? SunCalcModule;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"color = d3.scaleSequential(d3.interpolateRdBu).domain([90, -90])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"import tzlookupModule from \"npm:tz-lookup\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"const timezone = (() => {\n try {\n return tzlookupModule(latitude, longitude);\n } catch (e) {\n return \"Etc/GMT\";\n }\n})();","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"import dayjsBase from \"npm:dayjs\";\nimport dayjsTimezone from \"npm:dayjs/plugin/timezone\";\nimport dayjsUtc from \"npm:dayjs/plugin/utc\";\ndayjsBase.extend(dayjsTimezone);\ndayjsBase.extend(dayjsUtc);\nconst dayjs = dayjsBase;","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"colorAlpha = function (value, alpha) {\n return color(value).replace(\"rgb\", \"rgba\").replace(\")\", `, ${alpha})`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"const dbg = {\n keys: Object.keys(SunCalc),\n pos: SunCalc.getPosition(new Date(\"2026-06-21T12:00:00Z\"), 50.83, 4.4),\n times: SunCalc.getTimes(new Date(\"2026-06-21T12:00:00Z\"), 50.83, 4.4)\n};\ndisplay(dbg);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 44:"$43:body"