2b:null 2c:["$","title",null,{"children":"Clustered Twitter Logos | Tyler Freeman | Observable"}] 31:T65f,chart = { replay; const nodes = points(); const simulation = d3.forceSimulation(nodes) .force("x", d3.forceX(width / 2).strength(0.0051)) .force("y", d3.forceY(height / 2).strength(0.0051)) .force("cluster", forceCluster()) .force("collide", forceCollide()); const svg = d3.select(DOM.svg(width, height)); // const node = svg.append("g") // .selectAll("circle") // .data(nodes) // .join("circle") // .attr("cx", d => d.x) // .attr("cy", d => d.y) // .attr("fill", d => color(d.data.group)) // //.attr('fill', d => `url(#twitter${d.data.group})`) // .call(drag(simulation)) const RADIUS_SCALE = 130; const node = svg.append("g") .selectAll("svg") .data(nodes) .join("svg") .attr("x", d => d.x - d.r) .attr("y", d => d.y - d.r) .call(drag(simulation)); node.append("use") .attr("width", d => d.r * 2) .attr("height", d => d.r * 2) .attr("transform", d => `scale(${d.r / RADIUS_SCALE} ${d.r / RADIUS_SCALE})`) // .attr("href", d => color(d.data.group)) .attr('href', d => `#twitter${d.data.group}G`) // node.append('image') // .attr('href', 'Logo%20black.svg'); node.transition() .delay((d, i) => Math.random() * 500) .duration(750) .attrTween("r", d => { const i = d3.interpolate(0, d.r); return t => d.r = i(t); }); simulation.on("tick", () => { // console.log('tick') node .attr("x", d => d.x - d.r) .attr("y", d => d.y - d.r); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:T4ac,points = () => { const leaves = pack().leaves(); // console.log(leaves); const avgRadius = d3.mean(leaves, d => d.r); const minRadius = d3.min(leaves, d => d.r); const maxRadius = d3.max(leaves, d => d.r); const xGrid = d3.range(0, width, avgRadius * 1.7); const newPoints = []; for (let x of xGrid) { const yGrid = d3.range(0, height, avgRadius * 1.7); for (let y of yGrid) { const rNoise = Math.abs(noise.noise2d(x, y)); // const xAvoidCenter = (sigmoid(x / width * 10 - 5) - 0.5); const xAvoidCenter = 0;//(Math.tan(x)); // console.log("xAvoidCenter", x, xAvoidCenter); const split = width / 3; const splitH = height / 3; const isInCenter = x > split && x < split * 2 && y > splitH && y < splitH * 2; newPoints.push({ data: { group: 'Disavowed', value: -Math.log(Math.random()) }, x: isInCenter ? constrain(x, width) : x, y: isInCenter ? constrain(y, height) : y, r: minRadius + (maxRadius - minRadius) * rNoise }); } } return leaves.map(d => { return { ...d, y: d.y - width / 8 }; }).concat(newPoints); }33:T159a, 34:T4ea,function forceCollide() { const alpha = 0.4; // fixed for greater rigidity! const padding1 = 2; // separation between same-color nodes const padding2 = 6; // separation between different-color nodes const paddingDisavowed = null; //6; let nodes; let maxRadius; function force() { const quadtree = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { const r = d.r + maxRadius; const nx1 = d.x - r, ny1 = d.y - r; const nx2 = d.x + r, ny2 = d.y + r; quadtree.visit((q, x1, y1, x2, y2) => { if (!q.length) do { if (q.data !== d) { const r = d.r + q.data.r + (d.data.group == 'Disavowed' && paddingDisavowed ? paddingDisavowed : d.data.group === q.data.data.group ? padding1 : padding2); let x = d.x - q.data.x, y = d.y - q.data.y, l = Math.hypot(x, y); if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l, d.y -= y *= l; q.data.x += x, q.data.y += y; } } } while (q = q.next); return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); } } force.initialize = _ => maxRadius = d3.max(nodes = _, d => d.r) + Math.max(padding1, padding2); return force; }35:[] 2f:{"id":"a782250324573bd0","slug":"clustered-twitter-logos","title":"Clustered Twitter Logos","thumbnail":"d2266e3b2fe4bce4a3f3179c035fb122100fcf722c6e684c736f81743d7cab7f","access_level":"public","create_time":"$D2022-03-27T00:51:59.618Z","update_time":"$D2022-03-27T18:13:05.439Z","view_time":null,"first_public_time":"$D2022-03-27T18:13:27.893Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8b65e48bfb44caff","login":"odbol","name":"Tyler Freeman","avatar_url":"https://avatars-next.observableusercontent.com/165ccf6af623257f3c7d6cb85dcc9e18d4d298c832b96de954053960005eda90","tier":"starter_2024"},"version":643,"publish_version":643,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8c19499204182cc","login":"odbol","name":"Tyler Freeman","avatar_url":"https://avatars-next.observableusercontent.com/165ccf6af623257f3c7d6cb85dcc9e18d4d298c832b96de954053960005eda90","tier":null}],"members":[{"type":"individual","id":"b8c19499204182cc","login":"odbol","name":"Tyler Freeman","avatar_url":"https://avatars-next.observableusercontent.com/165ccf6af623257f3c7d6cb85dcc9e18d4d298c832b96de954053960005eda90","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Clustered Twitter Logos","cells":[{"id":291,"value":"md`# Clustered Twitter Logos\n\nFlorked from Clustered Bubbles. Added a bunch more nodes surrounding the cluster, and changed the circles to twitty logos (using some embedded SVGs and <use>)\n\nA “cluster” force attracts each group of nodes towards its weighted centroid, while a “collide” force prevents nodes from overlapping. The latter is a custom implementation of [d3.forceCollide](https://github.com/d3/d3-force/blob/master/README.md#collision) that uses different distances to separate nodes of the same group versus different groups.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof replay = html`