31:[] 2f:{"title":"Sun","cells":[{"id":0,"value":"# Sun","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"This protoype shows the passage of the sun over a pixelated Earth.\n\nThe image was developed for the Open Call of 'The Energy Show - Sun, Solar and Human Power' at the Het Nieuwe Instituut in Rotterdam.","pinned":false,"hidden":false,"mode":"md"},{"id":532,"value":"grid_cartogram = {\n let map = d3\n .create(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n \n let dx = (1 * (w - 2)) / xmax;\n let dy = (1 * (h - 2)) / ymax;\n\n map\n .selectAll(\"rect\")\n .data(pts)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x_scale(grid.cells[i][0]))\n .attr(\"y\", (d, i) => y_scale(grid.cells[i][1]))\n .attr(\"width\", dx)\n .attr(\"height\", dy)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", (d) => d[3])\n .attr(\"fill-opacity\", (d) => alt_scale(d[4]));\n\n map\n .selectAll(\"text\")\n .data(pts)\n .join(\"text\")\n .attr(\"x\", (d, i) => x_scale(grid.cells[i][0]) + 0.25 * dx)\n .attr(\"y\", (d, i) => y_scale(grid.cells[i][1]) + 0.62 * dy)\n .attr(\"font-size\", 8)\n .style(\"pointer-events\", \"none\")\n .text((d) => d[0]);\n\n return map.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"viewof compact = Inputs.range([0, 1], {\n value: 0.8,\n step: 0.1,\n label: \"Compactness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"viewof steps = Inputs.range([18, 36], {\n value: 24,\n step: 2,\n label: \"Grid Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"grid = await pointsToGrid(centroid, size, size, compact); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof table = Inputs.table(update.filter((d => d.name !== undefined)), {\n format: {\n color: (color) => html`

${color}

`,\n azimuth: (a) => html`${a}° →`,\n altitude: (a) => html`${a}° →`,\n },\n sort: \"altitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"static_pts = Object.keys(data).map((k) => [data[k].name, data[k].lat, data[k].lng, data[k].color, data[k].altitude])","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"pts = Object.keys(update).map((k) => [data[k].name, data[k].lat, data[k].lng, data[k].color, data[k].altitude])","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"centroid = static_pts.map((k) => [k[1], k[2]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"___\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"datum = {\n let datum = [];\n for (let lat of d3.range(-90, 90, steps).reverse()) {\n for (let lon of d3.range(-180, 180, steps).reverse()) {\n datum.push({\n longitude: lon,\n latitude: lat\n });\n }\n }\n\n cities.forEach((d) => {\n datum.push({\n capital: d[0],\n longitude: d[1],\n latitude: d[2]\n });\n });\n return datum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"data = {\n const obj = [];\n datum.forEach((value) => {\n const lng = parseFloat(value.longitude);\n const lat = parseFloat(value.latitude);\n const { azimuth, altitude } = getSunPosition(Date.now(), lng, lat);\n const d = 180 / Math.PI;\n const a = d * azimuth;\n const h = d * altitude;\n\n obj.push({\n name: value.capital,\n lng,\n lat,\n azimuth: a.toFixed(2),\n altitude: h.toFixed(2),\n color: getColor(h)\n });\n });\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"cities = [\n [\"Berlin\", 13.404954, 52.520008],\n [\"Rome\", 12.496365, 41.902782],\n [\"Baghdad\", 44.361488, 33.312805],\n [\"Tehran\", 51.388973, 35.689198],\n [\"Tokyo\", 139.691711, 35.689487],\n [\"Hong Kong\", 114.109497, 22.396427],\n [\"Seoul\", 126.977966, 37.566536],\n [\"Taipei\", 121.565414, 25.032969],\n [\"Shanghai\", 121.473701, 31.230391],\n [\"New York\", -74.005974, 40.712776],\n [\"Buenos Aires\", -58.381557, -34.603683],\n [\"Sao Paulo\", -46.633308, -23.550520],\n [\"Sydney\", 151.209900, -33.865143],\n [\"Melbourne\", 144.946457, -37.840935],\n [\"Honolulu\", -157.858093, 21.315603]\n].sort((a, b) => a[1] - b[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"update = {\n while (true) {\n let obj = [];\n await Promises.delay(1000);\n\n datum.forEach((value) => {\n const lng = parseFloat(value.longitude);\n const lat = parseFloat(value.latitude);\n const { azimuth, altitude } = getSunPosition(Date.now(), lng, lat);\n const d = 180 / Math.PI;\n const a = d * azimuth;\n const h = d * altitude;\n\n obj.push({\n name: value.capital,\n lng,\n lat,\n azimuth: a.toFixed(2),\n altitude: h.toFixed(2),\n color: getColor(h)\n });\n });\n yield obj;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"___\n### Methods","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"getPhase = (a, h) => {\n const time = a < 180 ? 'morning' : 'evening';\n return h < -18 ? 'night ' + (a < 180 ? '(after nadir)' : '(before nadir)') :\n h < -6 ? time + ' blue hour' :\n h < -0.833 ? time + ' twilight' :\n h < 6 ? time + ' golden hour' : \n 'day ' + (a < 180 ? '(before noon)' : '(after noon)');\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"getColor = (h) =>\n h < -18 ? '#74add1' :\n h < -6 ? '#abd9e9' :\n h < -0.833 ? '#e0f3f8' :\n h < 6 ? '#fee090' : '#ffffaa';","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"rotate = (deg) => `style=\"display: inline-block; transform: rotate(${deg}deg)\"`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"h = Math.ceil(width * screen.height / screen.width ) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"size = Math.sqrt(domain)","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"domain = datum.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"w = width < size ? width : 1000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"xmax = d3.max(grid.cells.map((o) => o[0])) + 1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"ymax = d3.max(grid.cells.map((o) => o[1])) + 1; ","pinned":true,"hidden":false,"mode":"ojs"},{"id":918,"value":"pad = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"x_scale = d3\n .scaleLinear()\n .domain([0, xmax])\n .range([pad, w - pad])","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"y_scale = d3\n .scaleLinear()\n .domain([0, ymax])\n .range([pad, h - pad])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"alt_scale = d3\n .scaleLinear()\n .domain([d3.min(data, d => parseFloat(d.altitude)), d3.max(data, d => parseFloat(d.altitude))])\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"___\n### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"import { getSunPosition } from \"@mourner/sun-position-in-900-bytes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"import { pointsToGrid } from \"@jwolondon/gridmap-allocation\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}