2a:null 2b:["$","title",null,{"children":"Daytime latitude | Néstor Andrés Peña | Observable"}] 30:Td28,canvas = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, width / 2 + 100]) .attr("style", "background: #111"); let rot = (day / 365) * 360; projection.rotate(darRotacion([rot, 0])); let path = d3.geoPath(projection); svg .append("g") .attr("transform", `translate(${600} ${450})`) .append("text") .text("Daytime length") .attr("fill", "white") .attr("font-family", "Kanit") .attr("font-size", 30); ["0-3", "3-6", "6-9", "9-12", "12-15", "15-18", "18-21", "21-24"].forEach( (i, t) => { const temp = svg .append("g") .attr("transform", `translate(${600 + t * 65} ${500})`); temp .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 10) .attr("fill", () => z(i)); temp .append("text") .text(i + " h") .attr("y", 30) .attr("fill", "white") .attr("font-family", "Kanit") .attr("font-size", 12); } ); const barras = svg .append("g") .attr("class", `barras`) .attr("transform", `translate(${340} ${275}) scale(1)`); barras .append("g") .selectAll("g") .data( d3 .stack() .keys([ "0-3", "3-6", "6-9", "9-12", "12-15", "15-18", "18-21", "21-24" ])(data) ) .join("g") .attr("fill", (d) => z(d.key)) .selectAll("path") .data((d) => d) .join("path") .attr("d", arc); const paises = svg .append("g") .attr("class", `poly_earth`) .attr("transform", `translate(${100} ${150}) scale(.5)`); paises .append("circle") .attr("cx", 480) .attr("cy", 250) .attr("r", 300) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 1); paises .selectAll("path") .data(mundo.features) .join("path") .attr("fill", "none") .attr("class", "paises") .attr("stroke-width", 1) .attr("stroke", "#999") .attr("d", d3.geoPath(projection)); path = d3.geoPath(projection_dos); const paises_dos = svg .append("g") .attr("class", `poly_earth_bertin`) .attr("transform", `translate(${600} ${90}) scale(.5)`); paises_dos .selectAll(".franjas") .data(graticule) .join("path") .attr("fill", (d) => { const lat = d.properties.lat; const data_temp = data.find((t) => t.lat === lat); // console.log(data_temp); return getColor(data_temp); }) .attr("class", "franjas") .attr("d", d3.geoPath(projection_dos)); paises_dos .selectAll(".paises") .data(mundo.features) .join("path") .attr("fill", "#111") // .attr("fill-opacity", 0.9) .attr("class", "paises") .attr("stroke-width", 1) .attr("stroke", "#999") .attr("d", d3.geoPath(projection_dos)); svg .append("g") .attr("transform", `translate(50, ${width / 2 + 50})`) .call( d3.axisBottom().scale(x_scale).ticks().tickFormat(d3.timeFormat("%b")) ); svg .append("g") .attr("transform", `translate(50, ${width / 2 + 40})`) .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", () => { return x_scale(getDayOfYear(day)); }) .attr("height", 5) .attr("fill", "#fff"); return svg.node(); }31:[] 2e:{"id":"c33d72e921f34f30","slug":"daytime-latitude","title":"Daytime latitude","thumbnail":"a8413e35570ff545af9284cf864cb741e544a1869b64c4c03130ad90ca295f65","access_level":"public","create_time":"$D2023-04-22T16:45:49.089Z","update_time":"$D2023-04-28T15:09:44.678Z","view_time":null,"first_public_time":"$D2023-04-22T16:45:49.089Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"01062053fabb03ae","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":"starter_2024"},"version":573,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a42999b55e39bcd","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":null}],"members":[{"type":"individual","id":"6a42999b55e39bcd","login":"nestorandrespe","name":"Néstor Andrés Peña","avatar_url":"https://avatars-next.observableusercontent.com/d99a6c701ad1b2e42bbbc506b9ebf12e4a4fc10974ce5750f7fed982e443fd07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Daytime latitude","cells":[{"id":0,"value":"# Daytime latitude","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"getDayLength = (d, lat) => {\n var P = Math.asin(\n 0.39795 *\n Math.cos(\n 0.2163108 + 2 * Math.atan(0.9671396 * Math.tan(0.0086 * (d - 186)))\n )\n );\n\n var resp =\n 24 -\n (24 / Math.PI) *\n Math.acos(\n (Math.sin((0.8333 * Math.PI) / 180) +\n Math.sin((lat * Math.PI) / 180) * Math.sin(P)) /\n (Math.cos((lat * Math.PI) / 180) * Math.cos(P))\n );\n if (resp > 24) resp = 24;\n if (P < 0) {\n if (isNaN(resp)) {\n if (lat > 0) return 0;\n else return 24;\n } else return resp;\n } else {\n if (isNaN(resp)) {\n if (lat > 0) return 24;\n else return 0;\n } else return resp;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"// viewof day = Inputs.range([1, 365], { label: \"Day\", step: 1 })\nviewof day = Scrubber(\n Array.from({ length: 365 }, (_, i) => i),\n { loop: false, delay: 50 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"function getDayOfYear(day) {\n var date = new Date(2022, 0, day);\n return date;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"darRotacion = (coor) => {\n return [-coor[0], -coor[1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":428,"value":"x_scale = d3\n .scaleTime()\n .range([0, width - 100])\n .domain([new Date(2022, 0, 1), new Date(2022, 11, 31)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"getColor = (item) => {\n let resp = 0;\n\n [\"0-3\", \"3-6\", \"6-9\", \"9-12\", \"12-15\", \"15-18\", \"18-21\", \"21-24\"].forEach(\n (i) => {\n if (Math.ceil(item[i]) === 3 || Math.ceil(item[i]) === 2) resp = i;\n }\n );\n\n return z(resp);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"graticule = {\n let resp = [];\n for (var i = 90; i > -90; i-=5) {\n for (var l = -180; l < 180; l += 10) {\n resp.push(generateBlockLat(l, i));\n }\n }\n return resp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"generateBlockLat = (l, i) => {\n return {\n type: \"Feature\",\n properties: {\n lat: i\n },\n geometry: {\n coordinates: [\n [\n [l, i],\n [l + 10, i],\n [l + 10, i - 5],\n [l, i - 5],\n [l, i]\n ]\n ],\n type: \"Polygon\"\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"data = {\n let resp = [];\n for (var i = 90; i > -90; i--) {\n let value = getDayLength(day, i);\n let steps = calculateSteps(value);\n resp.push({\n value: value,\n lat: i,\n \"0-3\": steps >= 0 && steps < 1 ? value : 3,\n \"3-6\": steps >= 1 && steps < 2 ? value - 3 : steps > 1 ? 3 : 0,\n \"6-9\": steps >= 2 && steps < 3 ? value - 3 * 2 : steps > 2 ? 3 : 0,\n \"9-12\": steps >= 3 && steps < 4 ? value - 3 * 3 : steps > 3 ? 3 : 0,\n \"12-15\": steps >= 4 && steps < 5 ? value - 3 * 4 : steps > 4 ? 3 : 0,\n \"15-18\": steps >= 5 && steps < 6 ? value - 3 * 5 : steps > 5 ? 3 : 0,\n \"18-21\": steps >= 6 && steps < 7 ? value - 3 * 6 : steps > 6 ? 3 : 0,\n \"21-24\": steps >= 7 && steps < 8 ? value - 3 * 7 : steps > 6 ? 3 : 0\n });\n }\n return resp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"function calculateSteps(value) {\n return Math.floor(value / 3);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"projection = d3.geoOrthographic().scale(300)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"projection_dos = d3.geoConicEquidistant()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"mundo = d3.json(\n \"https://gist.githubusercontent.com/nestorandrespe/ac4c33022872c39d55da9b645527de2b/raw/7d848fb5faa553e9b8f6dfcf0279c3852c3dc0d4/World%2520contours%2520low.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"innerRadius = 155","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"outerRadius = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"arc = d3\n .arc()\n .innerRadius((d) => y(d[0]))\n .outerRadius((d) => y(d[1]))\n .startAngle((d) => x(d.data.lat))\n .endAngle((d) => x(d.data.lat) + x.bandwidth())\n .padAngle(0.01)\n .padRadius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"x = d3\n .scaleBand()\n .domain(data.map((d) => d.lat))\n .range([0, Math.PI])\n .align(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"z = d3\n .scaleOrdinal()\n .domain([\"0-3\", \"3-6\", \"6-9\", \"9-12\", \"12-15\", \"15-18\", \"18-21\", \"21-24\"])\n .range([\n \"#d3d8df\",\n \"#98abc5\",\n \"#8a89a6\",\n \"#7b6888\",\n \"#6b486b\",\n \"#a05d56\",\n \"#d0743c\",\n \"#ff8c00\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.value)])\n .range([innerRadius, outerRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"d3 = require(\"d3@6\", \"d3-geo@2\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"