2d:null 2e:["$","title",null,{"children":"“La terre est bleue comme une orange” | Julien Colot | Observable"}] 33:T837,function zoom( projection, { // Capture the projection’s original scale, before any zooming. scale = projection._scale === undefined ? (projection._scale = projection.scale()) : projection._scale, scaleExtent = [0.8, 100000] } = {} ) { let v0, q0, r0, a0, tl; const zoom = d3 .zoom() .scaleExtent(scaleExtent.map((x) => x * scale)) .on("start", zoomstarted) .on("zoom", zoomed); function point(event, that) { const t = d3.pointers(event, that); if (t.length !== tl) { tl = t.length; if (tl > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); zoomstarted.call(that, event); } return tl > 1 ? [ d3.mean(t, (p) => p[0]), d3.mean(t, (p) => p[1]), Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]) ] : t[0]; } function zoomstarted(event) { v0 = versor.cartesian(projection.invert(point(event, this))); q0 = versor((r0 = projection.rotate())); } function zoomed(event) { projection.scale(event.transform.k); const pt = point(event, this); const v1 = versor.cartesian(projection.rotate(r0).invert(pt)); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); mutable boundingBox = [ projection.invert([0, 0]), projection.invert([height, width]) ]; // For multitouch, compose with a rotation around the axis. if (pt[2]) { const d = (pt[2] - a0) / 2; const s = -Math.sin(d); const c = Math.sign(Math.cos(d)); q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1); } projection.rotate(versor.rotation(q1)); // In vicinity of the antipode (unstable) of q0, restart. if (delta[0] < 0.7) zoomstarted.call(this, event); } return Object.assign( (selection) => selection .property("__zoom", d3.zoomIdentity.scale(projection.scale())) .call(zoom), { on(type, ...options) { return options.length ? (zoom.on(type, ...options), this) : zoom.on(type); } } ); }34:T107f,chart = { const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context); function render(land, hexagons) { context.clearRect(0, 0, width, height); context.beginPath(); path(sphere); context.fillStyle = "#fff"; context.fill(); context.beginPath(); context.fillStyle = "#000"; context.fill(); context.beginPath(); path(land); context.fillStyle = "#000"; context.fill(); hexagons.features.forEach((cell) => { context.beginPath(), (context.fillStyle = cell.properties.color), path(cell), context.fill(); }); context.closePath(), context.fill(); context.strokeStyle = "rgba(0,0,0,0.05)"; context.strokWidth = 1; context.beginPath(), path(nightCircle), (context.fillStyle = "rgba(0,0,0,0.05)"), context.fill(); context.beginPath(), path(astronomicalTwighlightCircle), (context.fillStyle = "rgba(0,0,0,0.05)"), context.fill(); context.beginPath(), path(nauticalTwighlightCircle), (context.fillStyle = "rgba(0,0,0,0.05)"), context.fill(); context.beginPath(), path(civilTwighlightCircle), (context.fillStyle = "rgba(0,0,0,0.05)"), context.fill(); context.beginPath(), path(sunCircle), (context.fillStyle = "#ffed97"), context.fill(); context.beginPath(), path(sunHaloCircle), (context.fillStyle = "#ffed9733"), context.fill(); context.fillStyle = "rgba(255,255,255,1)"; // Legends // Rects for background context.beginPath(); context.rect(5, 5, 550, 60); context.fill(); context.translate(width - 300, 10); context.beginPath(); context.rect(5, 5, 280, 155); context.fill(); context.fillStyle = "rgba(0,0,0,0.05)"; context.beginPath(), context.arc(210, 85, 65, 0, 2 * Math.PI), context.fill(); context.beginPath(), context.arc(210, 85, 50, 0, 2 * Math.PI), context.fill(); context.beginPath(), context.arc(210, 85, 35, 0, 2 * Math.PI), context.fill(); context.beginPath(), context.arc(210, 85, 20, 0, 2 * Math.PI), context.fill(); // Sun context.beginPath(), (context.fillStyle = "#ffed9733"), context.arc(125, 115, 20, 0, 2 * Math.PI), context.fill(); context.beginPath(), (context.fillStyle = "#ffed97"), context.arc(125, 115, 5, 0, 2 * Math.PI), context.fill(); context.beginPath(); context.strokeWidth = 1; context.strokeStyle = "rgba(0,0,0,0.3)"; context.setLineDash([1, 1]); context.moveTo(130, 20); context.lineTo(210, 20); context.moveTo(130, 35); context.lineTo(210, 35); context.moveTo(130, 50); context.lineTo(210, 50); context.moveTo(130, 65); context.lineTo(210, 65); context.moveTo(90, 92); context.lineTo(120, 92); context.lineTo(125, 97); context.stroke(); context.font = "10px Arial"; (context.fillStyle = "rgba(0,0,0,0.5)"), context.fillText("Sunset", 90, 23); context.fillText("Civil twilight", 70, 38); context.fillText("Nautical twilight", 52, 53); context.fillText("Astronomical twilight", 31, 68); context.fillText("Solar noon", 35, 93); context.translate(300 - width, -10); context.fillText("Sun elevation", 18, 20); d3.range(0, 181, 10).forEach((angle) => { context.beginPath(), (context.fillStyle = color((angle - 90) / 180)), context.rect(15 + (50 * angle) / 18, 25, 30, 12), context.fill(); (context.fillStyle = "rgba(0,0,0,0.5)"), context.fillText(`${angle - 90}°`, 22 + (50 * angle) / 18, 50); }); } const node = d3 .select(context.canvas) .call( zoom(projection) .on("zoom.render", () => render(land110, hexagons(1))) .on("end.render", () => render(land50, hexagons(2))) ) .call(() => render(land50, hexagons(3))) .on("mousemove", (event) => mouseMove(event, this)) .node(); node.style.position = "absolute"; node.style.left = "0px"; node.style.top = "0px"; node.style.opacith = "0.5"; container.replaceChildren(); container.appendChild(node); }35:[{"id":"efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","href":"https://static.observableusercontent.com/files/efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","name":"land-50m.json","type":"application/octet-stream","lastModified":1734169248260.138,"size":545534},{"id":"eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","href":"https://static.observableusercontent.com/files/eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","name":"land-110m.json","type":"application/octet-stream","lastModified":1734169248260.138,"size":55207}] 31:{"id":"58581fb028592632","slug":"la-terre-est-bleue-comme-une-orange","title":"“La terre est bleue comme une orange”","thumbnail":"5346258debc2eb2df514d383608233a41350daef5139dbad5b538d7a87e29d29","access_level":"public","create_time":"$D2024-12-14T09:40:48.260Z","update_time":"$D2025-08-02T21:31:48.727Z","view_time":null,"first_public_time":"$D2024-12-20T23:42:41.533Z","fork":{"id":"1ea380bf05fbf68c","slug":"versor-zooming","title":"Versor Zooming","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":6,"starred":false,"owner":{"type":"team","id":"f87b0703ad54ffa6","login":"jcolot","name":"Julien Colot","avatar_url":"https://avatars-next.observableusercontent.com/ba9beb9ccb70f12b5745e7c39a5aabf0cb84b33ed9b0c2641246e502727584eb","tier":"starter_2024"},"version":932,"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}],"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"“La terre est bleue comme une orange”","cells":[{"id":0,"value":"# “La terre est bleue comme une orange”\n*― Paul Éluard*\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"This notebook allows to follow the sun. \n\nThis is still a work-in-progress, come back soon for more! \n\nThe title is from a poem from Paul Éluard, it translates to “the Earth is blue like an orange”.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"viewof projectionName = Inputs.select(\n new Map([\n [\"Orthographic\", \"geoOrthographic\"],\n [\"Azimuthal Equal-Area\", \"geoAzimuthalEqualArea\"],\n [\"Mercator\", \"geoMercator\"]\n ]),\n { label: \"Projection\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"viewof time = Inputs.button(\"Reset north\", {\n value: null,\n reduce: () => {\n const [lambda, phi, gamma] = projection.rotate();\n mutable projection = d3[projectionName]()\n .precision(0.1)\n .rotate([lambda, 0, 0]);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"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 = Object.assign([-122.4194, 37.7749], {\n timeZone: \"America/Los_Angeles\"\n });\n form.o.value = formatLocation(form.value);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"mouseMove = {\n const tooltip = html`\n \n Hello\n

`;\n document.body.appendChild(tooltip);\n\n return function mouseMove(event) {\n const t = d3.pointers(event, this);\n const coords = projection.invert(t[0]);\n const projectedCoords = projection(coords);\n if (\n Math.abs(projectedCoords[0] - t[0][0]) < 2 &&\n Math.abs(projectedCoords[1] - t[0][1]) < 2\n ) {\n console.log(\"here\");\n tooltip.style.display = \"block\";\n tooltip.style.top = `${event.pageY - 40}px`;\n tooltip.style.left = `${event.pageX - 10}px`;\n tooltip.style.fontSize = \"10px\";\n tooltip.style.padding = \"5px 10px\";\n tooltip.style.fontFamily = \"sans-serif\";\n tooltip.innerHTML = `lat: ${coords[1]}, lng: ${coords[0]}`;\n } else {\n tooltip.style.display = \"none\";\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"mutable boundingBox = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"mutable projection = d3[projectionName]().precision(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3\n .geoPath(projection.fitWidth(width, sphere))\n .bounds(sphere);\n const dy = Math.ceil(y1 - y0),\n l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale((projection.scale() * (l - 200)) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"land50 = FileAttachment(\"land-50m.json\").json().then(world => topojson.feature(world, world.objects.land))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"land110 = FileAttachment(\"land-110m.json\").json().then(world => topojson.feature(world, world.objects.land))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"versor = require(\"versor@0.0.4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"hexagons = (level) => ({\n type: \"FeatureCollection\",\n features: h3\n .getRes0Cells()\n .map((i) => h3.cellToChildren(i, level))\n .flat()\n .map((d) => {\n const [lat, lng] = h3.cellToLatLng(d);\n const position = SunCalc.getPosition(new Date(), lat, lng);\n let cellColor = d3.color(color(position.altitude / (Math.PI / 2)));\n cellColor.opacity = 0.5;\n cellColor = cellColor.toString();\n return {\n type: \"Feature\",\n properties: {\n id: d,\n pentagon: h3.isPentagon(d),\n center: h3.cellToLatLng(d),\n color: cellColor,\n position\n },\n geometry: {\n type: \"Polygon\",\n coordinates: [h3.cellToBoundary(d, true).reverse()]\n }\n };\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"// 0.83 is to account for refraction ~= 0.57 and radius of Sun in degree ~= 0.27\nnightCircle = d3\n .geoCircle()\n .radius(90 - 0.83)\n .center(antipode(sun))()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"astronomicalTwighlightCircle = d3\n .geoCircle()\n .radius(90 - 18)\n .center(antipode(sun))()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"nauticalTwighlightCircle = d3\n .geoCircle()\n .radius(90 - 12)\n .center(antipode(sun))()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"civilTwighlightCircle = d3\n .geoCircle()\n .radius(90 - 6)\n .center(antipode(sun))()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"now = {\n let i = 0;\n const now = new Date();\n yield now;\n\n while (true) {\n await Promises.delay(10000);\n const now = new Date();\n yield now;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"sun = {\n const day = new Date(+now).setUTCHours(0, 0, 0, 0);\n const t = solar.century(now);\n const longitude = ((day - now) / 864e5) * 360 - 180;\n return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"d3.geoCircle().radius(90).precision(20).center([10, 80])()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"solarLongitude = {\n return solar.meanLongitude(solar.century(new Date())) % 360;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"// sun is represented with a solid angle close to it's solid angle as seen from earth. We don't bother about small variation between aphelion and perihelion\nsunCircle = d3\n .geoCircle()\n .radius(0.53 / 2)\n .center(sun)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"sunHaloCircle = d3.geoCircle().radius(3).center(sun)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"antipode = ([longitude, latitude]) => [longitude + 180, -latitude]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"h3 = require(\"h3-js@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"color = d3.scaleSequential(d3.interpolateRdBu).domain([1, -1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"SunCalc = require(\"suncalc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"solar = require(\"solar-calculator@0.3/dist/solar-calculator.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"