2c:null 2d:["$","title",null,{"children":"Collage of of r/layer | Christopher Pietsch | Observable"}] 32:T47f,{ const padding = 1 const radius =30 const height = width const context = DOM.context2d(width, height); const nodes = siblingsWithImage.map((d,i) => ({ id: d.id, x: d.x*100, y: d.y*100, distance: d.distance, image: d.image })) console.log(nodes) const simulation = d3.forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(strength).distanceMin(20)) //.force("x", d3.forceX().strength(strength*-1)) //.force("y", d3.forceY().strength(strength*-1)) //.force("collide", d3.forceCollide(5)) .force("center", d3.forceCenter(0,0)) .on("tick", ticked); function ticked(a) { context.clearRect(0, 0, width, height); context.save(); context.translate(width / 2, height / 2); for (const {x, y, image, distance} of nodes) { const radius = ra(distance) context.drawImage(image, x,y, radius, radius) //context.beginPath(); //context.arc(x, y, radius, 0, 2 * Math.PI); //context.fill(); } context.restore(); } try { yield context.canvas; yield invalidation; } finally { simulation.stop(); } }33:T69b,{ const extent = [d3.extent(siblings, d => +d.x), d3.extent(siblings, d => +d.y)] const width = 1920*1; const height = 1080*1; const x = d3.scaleLinear().domain(extent[0]).range([0, width]); const y = d3.scaleLinear().domain(extent[1]).range([0, height]); const points = d3.merge(siblings.map(d => [x(d.x),y(d.y)])); const n = points.length const radius = 128/3; console.log(points) const delaunay = new d3.Delaunay(points); const context = DOM.context2d(width, height); context.lineCap = "square"; for (let i = 0; i < 1200; ++i) { const voronoi = delaunay.voronoi([0, 0, width, height]); context.beginPath(); context.fillStyle = '#000000'; context.fillRect(0, 0, width, height); //context.clearRect(0, 0, width, height); //context.beginPath(); for (let i = 0; i < n; i += 2) { const cell = voronoi.cellPolygon(i >> 1); if (cell === null) continue; const x0 = points[i], y0 = points[i + 1]; const [x1, y1] = d3.polygonCentroid(cell); //console.log(x1,y1) //context.beginPath(); //console.log(i >> 1) const id = i >> 1 const entry = siblingsWithImage[id] if(entry) { //let radius = ra2(entry.distance) context.drawImage(entry.image, x1-radius/2,y1-radius/2, radius, radius) } //context.fillRect(x0, y0, 2,2); //context.stroke(); //context.moveTo(x0, y0); //context.lineTo(points[i] = x0 + (x1 - x0) * omega, points[i + 1] = y0 + (y1 - y0) * omega); points[i] = x0 + (x1 - x0) * omega, points[i + 1] = y0 + (y1 - y0) * omega } //context.fill(); yield context.canvas; delaunay.update(); } }34:[{"id":"b27b82caa41b13565049c7bcbdb00c267ba878865e9855006203377b50da6e06e321075e98b9a838013cb4dce047055da6ba1905edd9e320a9662515ed0d8582","href":"https://static.observableusercontent.com/files/b27b82caa41b13565049c7bcbdb00c267ba878865e9855006203377b50da6e06e321075e98b9a838013cb4dce047055da6ba1905edd9e320a9662515ed0d8582","name":"Screenshot_2019-12-04 Collage of of r layer Christopher Pietsch Observable.png","type":"image/png","lastModified":1575450230615.62,"size":671074}] 30:{"id":"6dcb7448c060af1c","slug":"collage-of-of-r-layer","title":"Collage of of r/layer","thumbnail":"3e3bcaff6ad344709f6c5344da961d2e5db13aeae972599689846ccce768424f","access_level":"public","create_time":"$D2019-10-01T17:28:50.972Z","update_time":"$D2019-12-04T09:34:00.902Z","view_time":null,"first_public_time":"$D2019-12-04T17:58:22.803Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"dbaac3ef74ea8f0c","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":"starter_2024"},"version":956,"publish_version":956,"role":null,"authored":false,"authors":[{"type":"individual","id":"42a00b3d53c425cb","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":null}],"members":[{"type":"individual","id":"42a00b3d53c425cb","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5caa94b3aa89c905","slug":"good","title":"good","owner":{"id":"dbaac3ef74ea8f0c","login":"cpietsch","name":"Christopher Pietsch"}},"type":"notebook","body":{"titling":"auto","title":"Collage of of r/layer","cells":[{"id":0,"value":"md`# Collage of of r/layer\nExplorations to build a tool to distribute tSNE in a nice way other then LAP-JV\nhttps://cpietsch.github.io/layerage \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof data = csvInput({\n crossOrigin: \"anonymous\",\n initialUrl: \"https://zeigma.com/layer/data/tsne-plot.csv\",\n formatter: d => ({id: d.id, x: +d.x, y: +d.y })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"viewof dataMeta = csvInput({\n crossOrigin: \"anonymous\",\n initialUrl: \"https://vikusviewer.fh-potsdam.de/layers/data/data.csv\",\n formatter: d => d\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"dataMeta","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"//data.map(d => data.filter(e => e.x === d.x && e.y === d.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"extent = [d3.extent(data, d => +d.x), d3.extent(data, d => +d.y)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"randomPoint = data[parseInt(Math.random()*data.length)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"randomPoint3 = data.find(d => d.id === \"5ju0jhggagm31\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"n = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"siblings = getSiblings(randomPoint, n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"//siblings.map(d => dataMeta.find(e => e.id === d.id)._layerId).toString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"function makeUrl(id){ return `https://vikusviewer.fh-potsdam.de/layers/data/png/128c/${id}.png`; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"function getSiblings(point, size){\n return data.map(d => {\n const distance = Math.hypot(d.x - point.x,d.y - point.y)\n return {\n ...d,\n distance\n }\n })\n .sort((a,b)=> a.distance - b.distance)\n .filter((d,i) => i < size)\n //.map(d => {\n // const url = `https://vikusviewer.fh-potsdam.de/layer/data/png/128c/${d.id}.png`;\n // const image = await loadImage(url)\n // return {...d, image}\n //})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"distanceExtent = d3.extent(siblings, d => d.distance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"ra = d3.scaleLinear()\n .domain(distanceExtent)\n .range([30, 20]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"ra2 = d3.scaleLinear()\n .domain(distanceExtent)\n .range([50, 10]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"loadImage(makeUrl(randomPoint.id))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"siblingsWithImage = {\n let sibs = []\n for(let d of siblings){\n const url = makeUrl(d.id);\n try {\n const image = await loadImage(url)\n sibs.push({...d, image})\n } catch(e){\n console.error(e);\n }\n }\n return sibs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"html`

\n ${siblings.map(d => \n `

`\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"canvas = {\n const height = width\n //const width = 1920\n const padding = -10\n const radius = 30\n const angle = Math.PI * (3 - Math.sqrt(5));\n const context = DOM.context2d(width, height);\n context.translate(width / 2, height / 2);\n for (let i = 1; i <= n; ++i) {\n const r = (radius + padding) * 1.2 * Math.sqrt(i);\n const a = i * angle;\n const x = r * Math.cos(a);\n const y = r * Math.sin(a);\n //context.beginPath();\n //context.arc(x, y, radius, 0, 2 * Math.PI);\n //context.fill();\n const url = `https://vikusviewer.fh-potsdam.de/layers/data/png/128c/${siblings[i-1].id}.png`;\n try {\n const image = await loadImage(url)\n context.drawImage(image, x,y, radius, radius)\n } catch (e) {\n \n }\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`using phyllotactic spiral like https://observablehq.com/@mbostock/doyle-spiral`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"canvas2 = {\n const height = width\n //const width = 1920\n const padding = 1\n const radius = 30\n const angle = Math.PI * (3 - Math.sqrt(5));\n const context = DOM.context2d(width, height);\n context.translate(width / 2, height / 2);\n for (let i = 1; i <= n; ++i) {\n const r = (radius + padding) * 1.2 * Math.sqrt(i);\n const a = i * angle;\n const x = r * Math.cos(a);\n const y = r * Math.sin(a);\n //context.beginPath();\n //context.arc(x, y, radius, 0, 2 * Math.PI);\n //context.fill();\n const url = `https://vikusviewer.fh-potsdam.de/layers/data/png/128c/${siblings[i-1].id}.png`;\n try {\n const image = await loadImage(url)\n const radius = ra2(siblings[i-1].distance)\n context.drawImage(image, x,y, radius, radius)\n } catch (e) {\n \n }\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"md`using d3 force`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"viewof strength = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md`using lloyds-algorithm from https://observablehq.com/@mbostock/lloyds-algorithm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"viewof omega = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber).toFixed(2)} ω`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`# utils`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"loadImage = src => {\n return new Promise((resolve, error) => {\n const image = new Image(); \n image.onload = _ => resolve(image)\n image.onerror = _ => error()\n image.src = src\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {fileInput} from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function csvInput({initialUrl, init, accept = \".csv\", formatter}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return fetch(url, init).then(response => {\n console.log(response)\n if (!response.ok) throw new Error(response.status + \" \" + response.statusText);\n return response.text();\n }).then(text => d3.csvParse(text, formatter))\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3\", \"d3-delaunay\", \"d3-polygon\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"