31:T43e,function type(data, recur) { if (data === null || data === undefined) { return ""; } else if (data instanceof HTMLElement || data instanceof SVGElement) { return data; } else if ( Array.isArray(data) && !Array.isArray(data[0]) && !(data[0] instanceof HTMLElement || data[0] instanceof SVGElement) && typeof data[0] === "object" ) { const keys = Object.keys(data[0]); return [ keys.map(k => html`${k}`), ...data.map(d => keys.map(k => d[k])) ].map(recur); } else if (Array.isArray(data)) { return data.map(recur); } else if (data instanceof Map) { return Array.from(data).map(([key, value]) => recur([html`${key}`, value]) ); } else if (data instanceof Set) { return Array.from(data).map(recur); } else if (typeof data === "object") { return Object.entries(data).map(([key, value]) => recur([html`${key}`, value]) ); } else if (typeof data === "number") { return html`

${data.toFixed(2)}

`; } else { return data; } }32:[{"id":"cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","href":"https://static.observableusercontent.com/files/cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","name":"flare-2.json","type":"application/json","lastModified":1606165473224.275,"size":11634}] 2f:{"title":"Recursive typed table (sketch!)","cells":[{"id":0,"value":"md`# Recursive typed table (sketch!)\n\nGoal: Handle arbitrarily nested data. Let custom renderers register based on the type of the data. Recur.\n\nkinda like a treemap inspector? idk\n\nTodo\n- somehow line stuff up lol\n- try fitting contents to container instead of vice versa, so it fills fixed amount of space\n- let you select from it!!\n- merge keys of array of objects with dif keys\n- small multiples visualization registered type example\n- timeseries sparkline example (like, if it's an array with date and value keys for each row, plot a little timeseries)\n- use grid instead of flexbox for 2D alignment? or… actual tables?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`---\n\n## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"function render(row = false) {\n return function(data) {\n return html`

\n ${type(data, render(!row))}\n

`;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`---\n\n## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"render()([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"render(true)([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"render()([[1, 2, 3], [4, 5, 6], [7, 8, 9]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"render(true)([[1, 2, 3], [4, 5, 6], [7, 8, 9]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"render(true)([\n [1, 2, 3],\n [1, 2, 3, 4],\n [1, 2, 3, 4, 5],\n [\n [\"alpha\", \"bravo\"],\n [\"charlie\", \"delta\"],\n [\"echo\", \"foxtrot\"],\n [\"golf\", \"hotel\"]\n ]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"render()([\n { first: \"Toph\", last: \"Tucker\", age: 30 },\n { first: \"Willy\", last: \"Tucker\", age: 28 },\n { first: \"Toby\", last: \"Tucker\", age: 12 },\n { first: \"Grace\", last: \"Tucker\", age: 6 }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"render()({\n name: \"Toph\",\n numbers: new Set([1, 2, 3, 4, 5, 6, 7, 8, 9]),\n props: new Map([[\"alive\", true], [\"height\", `6'2\"`], [\"eyes\", \"blue\"]]),\n circle: svg``\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"render()(await FileAttachment(\"flare-2.json\").json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"render()(getRandomNested(5, 3, Math.random))","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"render()(\n getRandomNested(4, 4, () =>\n Math.random() > .5 ? Math.random() : Math.random() > .5 ? [1, 2, 3] : \"Toph\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"render()(\n getRandomNested(4, 4, () =>\n Math.random() > .5\n ? svg``\n : Math.random() > .5\n ? Array(Math.ceil(Math.random() * 4))\n .fill(true)\n .map(\n () =>\n svg``\n )\n : svg``\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"function getRandomNested(n, levels, fn) {\n return Array(n)\n .fill(true)\n .map(levels ? () => getRandomNested(n, levels - 1, fn) : fn);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"import {president} from \"@tophtucker/election-2020-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"render()(president.data.races[0])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}