31:T46e,grid = (elts, options) => { if (!elts.length) return svg``; const { size, padding, width: maxWidth } = { padding: 20, width, ...options }; const { margin } = { margin: padding, ...options }; // row width and height include inter-row / inter-column padding // They are the padded value of options.size, or the widest / tallest element if option.size // is false-y const colWidth = (size || Math.max(...elts.map(e => e.width.baseVal.value))) + padding; const rowHeight = (size || Math.max(...elts.map(e => e.height.baseVal.value))) + padding; const cols = Math.min(elts.length, Math.floor(maxWidth / colWidth)); const rows = Math.ceil(elts.length / cols); let gridWidth = cols * colWidth - padding + 2 * margin; let gridHeight = rows * rowHeight - padding + 2 * margin; return svg``; }32:[{"id":"1fbdad91c1368aef37cc89245f85ae1c721712dcaa1bb13d7ad0bfaec4042cc7842020bf7624575f4d401ebac8a3287ce9c1932d91a441b2cc4f13397459691d","href":"https://static.observableusercontent.com/files/1fbdad91c1368aef37cc89245f85ae1c721712dcaa1bb13d7ad0bfaec4042cc7842020bf7624575f4d401ebac8a3287ce9c1932d91a441b2cc4f13397459691d","name":"earth_moon_yearly_422.csv","type":"text/csv","lastModified":1619107312346.958,"size":197180},{"id":"7874ca49d33c7c5f34546f656d15a67117f512cc7b57f14782a1abdc3e4f84340d1549c206f3b4b4590d8d1df6d4f4d299d09d34eda0996a6a8cd38b340a7839","href":"https://static.observableusercontent.com/files/7874ca49d33c7c5f34546f656d15a67117f512cc7b57f14782a1abdc3e4f84340d1549c206f3b4b4590d8d1df6d4f4d299d09d34eda0996a6a8cd38b340a7839","name":"earth_sun_yearly_422@1.csv","type":"text/csv","lastModified":1619107999608.893,"size":181249}] 2f:{"title":"Sun Distance to Earth Year Tiles","cells":[{"id":7,"value":"md`# Sun Distance to Earth Year Tiles\n\nData from de422 JPL ephemeris file: de422 (6k year from -3000 to 3000).\nThe different color palettes have different lenghts.. so leading to different seasonality patterns visible\n\nDay 23 of [30DayChartChallenge](https://twitter.com/30DayChartChall) - *tiles* time series\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"legend({\n color: color,\n title: \"Distance in AU ~ 150MKm (149598073 Km)\",\n tickFormat: \".4f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"md ` year -3000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"{\n let distances = Array.from(data.map(d =>d.value))\n let colors = Array(distances.length)\n .fill()\n .map((_,i) => color(distances[i]));\n let swatches = colors.map(\n c =>\n svg``\n );\n return grid(swatches, { width: squarewidth, padding: 0.1 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md ` year 3000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"viewof datasetRadio = radio({\n title: \"Sun & Moon Data\",\n description: \"\",\n options: [\n { label: 'Moon:', value: 0},\n { label: 'Sun:', value: 1 }\n \n ],\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof colorCodes = radio({\n title: \"Tile Colors\",\n description: \"\",\n options: [\n { label: 'IsleOfDogs1', value: 0},\n { label: 'IsleOfDogs2', value: 1 },\n { label: 'Zissou1', value: 2 },\n { label: 'Royal2', value: 3 },\n { label: 'Chevalier1', value: 4 }\n ],\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"md ` ---\n## Chart settings that .. change everything\n\n- keeping it square-ish: controlled via squarewidth\n- precision of the distances: how many distinct values go in the color scale\n- width of a tile is calculated based on the sqrt of the width and data length\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"squarewidth = d3.min([width, 700])","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"precision= d3.format(\".6f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"md ` getting square data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"side = d3.format(\".3f\")(squarewidth/squares)","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"squares = Math.sqrt(observations)","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"observations = data.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"colorLists = [[\"#9986A5\", \"#79402E\", \"#CCBA72\", \"#0F0D0E\", \"#D9D0D3\", \"#8D8680\"], [\"#EAD3BF\", \"#AA9486\", \"#B6854D\", \"#39312F\", \"#1C1718\"],[\"#3B9AB2\", \"#78B7C5\", \"#EBCC2A\", \"#E1AF00\", \"#F21A00\"],[\"#9A8822\", \"#F5CDB4\", \"#F8AFA8\", \"#FDDDA0\", \"#74A089\"],[\"#446455\", \"#FDD262\", \"#D3DDDC\", \"#C7B19C\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"color = d3.scaleSequential(\n d3.piecewise(d3.interpolateHsl, colorLists[colorCodes])\n).domain(\n d3.extent(data.map(d => d.value))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"data = datasets[datasetRadio]","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`---\n## Getting JPL Data\n\ndata imported via Skyfield lib in Python [github.com/terezaif/30DayChartChallenge_Collection2021](https://github.com/terezaif/30DayChartChallenge_Collection2021/blob/main/code/planets440.py)\n\nValues are read from the csvs with the precsion formatter!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"datasets =[moondata, sundata]","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"moondata = d3.csvParse(await FileAttachment(\"earth_moon_yearly_422.csv\").text(), ({date, distance}) => ({date: new Date(date), value: precision(distance)})).sort((a, b) => a.date - b.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"sundata = d3.csvParse(await FileAttachment(\"earth_sun_yearly_422@1.csv\").text(), ({date, distance}) => ({date: new Date(date), value: precision(distance)})).sort((a, b) => a.date - b.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"withBackground = (elt, options) => {\n let { size, color, padding } = { color: \"lightgray\", padding: 0, ...options };\n let w = elt.width.baseVal.value;\n let h = elt.height.baseVal.value;\n let paddedW = size || w + 2 * padding;\n let paddedH = size || h + 2 * padding;\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`---\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { sum } from \"@osteele/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"import {radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}