29:null 2a:["$","title",null,{"children":"Prototyping a 404 page | arrrrrmin | Observable"}] 2f:Ta12,function Chart() { const svg = d3.create("svg"); const g = svg.append("g"); g.node().appendChild(emoji); function render(width, data) { const height = width * (3 / 4); const x = d3 .scaleBand(d3.range(data.bins.length), [0, width]) .paddingInner(0.05); const y = d3.scaleLinear( [0, d3.max(data.bins.map((b) => b.length - 2))], [0, height] ); const empty = data.bins.filter((d, i) => i === data.location)[0]; svg .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); const eyeX = directionToLookAt(data); const t = svg.transition().duration(1000).ease(d3.easeCubic); g.selectAll("svg") .attr("width", x.bandwidth()) .attr("height", x.bandwidth()) .attr("rx", 5); // Only on initial load we already define the x location // This way our rect-moji drops in right location, without moving across the svg if (svg.selectAll("rect.bar")._groups[0].length === 0) { g.attr("transform", `translate(${x(data.location)}, 0)`); } g.transition(t * 0.25) .attr("transform", `translate(${x(data.location)}, ${height})`) .transition(t * 0.5) .attr( "transform", `translate(${x(data.location)}, ${height - x.bandwidth()})` ) .selectAll("rect.eye") .transition(t * 0.25) .attr("x", (_, i) => eyeX[i]); svg .selectAll("rect.bar") .data( data.bins .map((b, i) => ({ length: b.length, i: i })) .filter((d, i) => i != data.location) ) .join( (enter) => enter .append("rect") .attr("class", "bar") .attr("x", (b) => x(b.i)) .attr("width", x.bandwidth()) .attr("y", height) .attr("rx", 5) .transition(t * 0.9) .attr("y", (b) => height - y(b.length - 2)) .attr("height", (b) => y(b.length - 2) - y(0)) .attr("fill", "black"), (update) => update.call((update) => update .transition(t * 0.9) .attr("x", (b) => x(b.i)) .attr("width", x.bandwidth()) .attr("y", (b) => height - y(b.length - 2)) .attr("height", (b) => y(b.length - 2) - y(0)) ), (exit) => exit.call((exit) => exit .transition(t * 0.9) .attr("y", height) .remove() ) ); return svg.node(); } return { render }; }30:[] 2d:{"id":"1cbe16f09b6f0edb","slug":null,"title":"Prototyping a 404 page","thumbnail":"6733e967aa7396ac7a6e3762a7e7f10e741399249eef238fa880a1aacd460b0b","access_level":"public","create_time":"$D2026-05-25T15:50:50.911Z","update_time":"$D2026-05-26T16:05:25.886Z","view_time":null,"first_public_time":"$D2026-05-26T07:43:40.389Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bf7f41dec9ab27ef","login":"arrrrrmin","name":"arrrrrmin","avatar_url":"https://avatars-next.observableusercontent.com/3934e9691a64ace267f340064ab8a0df7e20d87c1ad792334529e142e0983faa","tier":"starter_2024"},"version":280,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4464ef62fb0b4c5","login":"arrrrrmin","name":"arrrrrmin","avatar_url":"https://avatars-next.observableusercontent.com/3934e9691a64ace267f340064ab8a0df7e20d87c1ad792334529e142e0983faa","tier":null}],"members":[{"type":"team","id":"bf7f41dec9ab27ef","login":"arrrrrmin","name":"arrrrrmin","avatar_url":"https://avatars-next.observableusercontent.com/3934e9691a64ace267f340064ab8a0df7e20d87c1ad792334529e142e0983faa","tier":"starter_2024","role":"editor"},{"type":"individual","id":"d4464ef62fb0b4c5","login":"arrrrrmin","name":"arrrrrmin","avatar_url":"https://avatars-next.observableusercontent.com/3934e9691a64ace267f340064ab8a0df7e20d87c1ad792334529e142e0983faa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Prototyping a 404 page","cells":[{"id":0,"value":"# Prototyping a 404 page\n\nA simple approach to my personal 404 page - __Lost in data__","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":201,"value":"viewof update = Inputs.button(\"Update\", {\n value: getData(),\n reduce: () => getData()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"vis.chart.render(900, update)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"vis = ({\n chart: Chart()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"settings = {\n const [min, max] = [0, 100];\n return {\n count: 404,\n min,\n max,\n random: d3.randomInt,\n location: d3.randomInt\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"function getData() {\n const random_data = Float64Array.from(\n { length: settings.count },\n settings.random(settings.min, settings.max)\n );\n const nbins = 12;\n const bins = d3\n .bin()\n .thresholds(d3.range(0, settings.max, settings.max / nbins))(random_data);\n const location = Float64Array.from(\n { length: 1 },\n settings.location(1, bins.length - 1)\n )[0];\n return { bins, location };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"function directionToLookAt(data) {\n const barSizeRight = data.bins[data.location + 1].length;\n const barSizeLeft = data.bins[data.location - 1].length;\n const eyes = d3.select(html`${emojiPath}`).selectAll(\"rect.eye\");\n let eyesX = d3.map(eyes, (e) => parseFloat(d3.select(e).attr(\"x\")));\n if (barSizeLeft > barSizeRight) {\n eyesX = eyesX.map((x) => x - 8);\n }\n return eyesX;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"emoji = html`${emojiPath}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"// Build a simple emoji in figma, copy the svg code and paste it here\n// Attributes for width and height are updated later\nemojiPath = `\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"