2b:null 2c:["$","title",null,{"children":"Generative chart avatars | Toph Tucker | Observable"}] 31:T4fc,function genAvatar() { const c = document.createElement("canvas"); c.width = AVATAR_SIZE; c.height = AVATAR_SIZE; const ctx = c.getContext("2d"); const h1 = Math.floor(Math.random() * 360); const hDelta = Math.random() * 40 + 20; const h2 = h1 > 300 ? h1 - hDelta : h1 + hDelta; const s = Math.floor(Math.random() * 40) + 40; const l1 = Math.floor(Math.random() * 30) + 30; const l2 = Math.floor(Math.random() * 30) + 50; const r = AVATAR_SIZE / 2; const ang = Math.random() * Math.PI * 2; const cx = (Math.cos(ang) + 1) * r; const cy = (Math.sin(ang) + 1) * r; const gradCenter = [cx, cy, AVATAR_SIZE * 0.1]; const gradEdge = [cx, cy, AVATAR_SIZE * 1.1]; const gradient = ctx.createRadialGradient(...gradCenter, ...gradEdge); gradient.addColorStop(0, `hsl(${h1}, ${s}%, ${l1}%`); gradient.addColorStop(1, `hsl(${h2}, ${s}%, ${l2}%`); ctx.fillStyle = gradient; ctx.fillRect(0, 0, AVATAR_SIZE, AVATAR_SIZE); ctx.fillStyle = "black"; ctx.fillRect(gradCenter[0] - 3, gradCenter[1] - 3, 6, 6); ctx.fillRect(gradEdge[0] - 3, gradEdge[1] - 3, 6, 6); // Pick a random renderer to draw white chartlike shapes atop the gradient renderers[Math.floor(Math.random() * renderers.length)](ctx); return c.toDataURL("image/png"); }32:[] 2f:{"id":"4281455dee411577","slug":"generative-chart-avatars","title":"Generative chart avatars","thumbnail":"8b502dada1edba722a6cce86b86d12beb3f1acbf97960bf60d7ebc0ba38589e8","access_level":"public","create_time":"$D2022-04-01T06:04:58.462Z","update_time":"$D2026-08-19T16:07:04.015Z","view_time":null,"first_public_time":"$D2026-08-19T16:07:27.208Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":245,"publish_version":245,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Generative chart avatars","cells":[{"id":0,"value":"# Generative chart avatars\n\nBack in 2022, Michael and Dunstan did some [sketches](https://observablehq.com/@observablehq/avatar-blob-sketches) of generative user avatars to use when users didn’t have one. I sorta wanted to make them chart-themed… but I think I’m glad we stuck with just random colors!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"

\n ${reset !== null && null}\n ${d3.range(34).map(() => htl.html`

`)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":133,"value":"

\n ${reset !== null && null}\n ${d3.range(32).map(() => htl.html`

`)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":153,"value":"viewof reset = Inputs.button(\"Regenerate\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"AVATAR_SIZE = 460","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"renderers = [scatter, line, bar, pie, table]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"// Table cells randomly colored or not\ntable = ctx => {\n const PADDING = 4;\n const COL_WIDTH = AVATAR_SIZE / 3;\n const ROW_HEIGHT = AVATAR_SIZE / 10;\n const PROBABILITY_FILLED = 0.2;\n ctx.save();\n ctx.fillStyle = \"#ffffff\";\n for (let i = 0; i < AVATAR_SIZE; i += COL_WIDTH) {\n for (let j = 0; j < AVATAR_SIZE; j += ROW_HEIGHT) {\n if (Math.random() < PROBABILITY_FILLED) {\n ctx.fillRect(i + PADDING, j + PADDING, COL_WIDTH - PADDING * 2, ROW_HEIGHT - PADDING * 2);\n }\n }\n }\n ctx.restore();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"pie = ctx => {\n const MIN_ANGLE = 0.2\n const MAX_ANGLE = Math.PI / 2;\n ctx.save();\n ctx.fillStyle = \"#ffffff\";\n ctx.translate(AVATAR_SIZE / 2, AVATAR_SIZE / 2);\n const angle = Math.random()\n const arc = d3.arc();\n const startAngle = Math.random() * Math.PI * 2;\n const path = arc({\n innerRadius: 0,\n outerRadius: AVATAR_SIZE / 2 + 10, // \"+ 10\" pads so background doesn't peek through\n startAngle,\n endAngle: startAngle + MIN_ANGLE + Math.random() * MAX_ANGLE\n });\n ctx.fill(new Path2D(path));\n ctx.restore();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"scatter = ctx => {\n ctx.save();\n ctx.fillStyle = \"#ffffff\";\n for (let i = 0; i < 10; i++) {\n ctx.save();\n ctx.translate(Math.random() * AVATAR_SIZE, Math.random() * AVATAR_SIZE);\n ctx.rotate(Math.PI / 4)\n ctx.fillRect(0, 0, AVATAR_SIZE / 10, AVATAR_SIZE / 10);\n ctx.restore();\n }\n ctx.restore();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"line = ctx => {\n ctx.save();\n ctx.strokeStyle = \"#ffffff\";\n ctx.lineWidth = AVATAR_SIZE / 20;\n const data = getRandomWalk(7, 10, d3.randomNormal());\n const x = d3.scaleLinear(d3.extent(data, d => d[0]), [0, AVATAR_SIZE]);\n const y = d3.scaleLinear(d3.extent(data, d => d[1]), [AVATAR_SIZE * 0.8, AVATAR_SIZE * 0.2]);\n const line = d3.line().x(d => x(d[0])).y(d => y(d[1]));\n const path = new Path2D(line(data));\n ctx.stroke(path);\n ctx.restore();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"bar = (ctx) => {\n ctx.save();\n ctx.fillStyle = \"#ffffff\";\n const data = getRandomWalk(3, 3, d3.randomNormal());\n const x = d3.scaleBand(\n data.map((d) => d[0]),\n [AVATAR_SIZE * 0.1, AVATAR_SIZE * 0.9]\n ).padding(0.2);\n const y = d3.scaleLinear(\n [0, d3.max(data, (d) => d[1])],\n [AVATAR_SIZE, AVATAR_SIZE * 0.3]\n );\n for (const [x0, y0] of data) {\n ctx.fillRect(x(x0), y(y0), x.bandwidth(), y(0) - y(y0));\n }\n ctx.restore();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"// Gets `n` points starting at `initial` and changing by `delta()` each time\ngetRandomWalk = (n, initial, delta) => {\n const arr = [[0, initial]];\n for (let i = 1; i < n; i++) {\n const last = arr[arr.length - 1][1];\n arr.push([i, last + delta()]);\n }\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"