29:null 2a:["$","title",null,{"children":"Tips for asshole detection in social network patterns | Luke Whyte | Observable"}] 2f:T9dd,

See those circles in the graphic just below? That's them: the assholes. A veritable rats' nest of SuperRare shell accounts programmed to probe, exploit, and profit from vulnerabilities in our $RARE token tipping program.

The flashing circles were caught dead to rights in a wash trading scheme. Linked circles will go down by association. The lines represent NFT transactions between accounts. There's a lot of them, but also a decent chance the network boils down to a couple guys with a hot wallet in a basement.

Whatever the case, have a gander – zoom, drag, and hover – and then I'll meet you down below in a bit.

30:T1c7a,potentialFarmersGraph = { const container = html`

` const nodes = d3 .sort(potentialFarmerGraphNodes, (a, b) => d3.descending(a.weight, b.weight)) const links = potentialFarmerGraphEdges.map((link) => ({ ...link })) const communities = getCommunities(nodes) const simulation = d3 .forceSimulation(nodes) .force( 'collide', d3.forceCollide((d) => nodeRadiusScale(d.weight) + 3).iterations(3) ) .force( 'radial', customForceRadial( (d) => inverseNodeRadiusScale(d.weight), (d) => communities[d.community].x(), (d) => communities[d.community].y() ).strength((d) => 0.25) ) .force( 'link', d3 .forceLink(links) .distance((d) => linkDistanceScale(d.weight)) .strength((d) => { if (d.source.community === -1 || d.target.community === -1) { return linkStrengthScale(d.weight) } return linkStrengthScale(d.weight) }) .id( (node) => node.id ) ) .on('tick', () => { link .attr('x1', (d) => d.source.x) .attr('y1', (d) => d.source.y) .attr('x2', (d) => d.target.x) .attr('y2', (d) => d.target.y) node.attr('cx', (d) => d.x).attr('cy', (d) => d.y) }) const svg = d3 .select(container) .append('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('background-color', '#000') // Add a little depth to background const defs = svg.append('defs'); const radialGradient = defs.append('radialGradient') .attr('id', 'radial-gradient') .attr('cx', '50%') .attr('cy', '50%') .attr('r', '50%') .attr('fx', '50%') .attr('fy', '50%') radialGradient.append('stop') .attr('offset', '75%') .attr('stop-color', '#000') radialGradient.append('stop') .attr('offset', '100%') .attr('stop-color', '#111416') svg.append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'url(#radial-gradient)') .attr('fill-opacity', 0.7) // Set up the zoom functionality const g = svg.append('g') const zoom = d3 .zoom() .scaleExtent([0.1, 10]) .on('zoom', (event) => { g.attr('transform', event.transform.toString()) }) const initialScale = 0.75 const centerX = width / 2 const centerY = height / 2 svg.call( zoom.transform, d3.zoomIdentity .translate(centerX, centerY) .scale(initialScale) .translate(-centerX, -centerY) ) svg.call(zoom) // Apply the zoom behavior to the SVG const link = g .append('g') .selectAll('.link') .data(links) .enter() .append('line') .attr('class', 'link') .attr('stroke', '#6a6a59') .attr('stroke-opacity', (d) => d.source.community === -1 ? 0.3 : 1 ) .attr('stroke-width', (d) => linkWidthScale(d.weight) ) const node = g .append('g') .selectAll('.node') .data(nodes) .enter() .append('circle') .attr('class', 'node') .attr('class', (d) => d.countOfWorksHeldMoreThanOnce > 0 ? 'wash-trader' : '') .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', (d) => nodeRadiusScale(d.weight)) .attr('stroke', '#222222') .attr('stroke-width', 2.5) .attr('stroke-opacity', 0) .attr('fill', (d) => communities[d.community].color) .attr('fill-opacity', (d) => nodeOpacityScale(d.weight)) flash(g, communities) const infoBox = d3.select(container) .append('div') .classed('infobox-wrapper', true) .append('div') .classed('infobox', true) infoBox .append('div') .classed('infoboxtext', true) .text('||') infoBox .on('mouseenter', function() { d3.select('.infoboxtext') .style('font-size', '0.9em') .text('Zoom, drag & hover 🕵️') d3.select('.infobox') .style('transform', 'translateX(175px)') .style('padding-right', '25px') }) .on('mouseleave', function() { d3.select('.infobox') .style('transform', 'translateX(0px)') .style('padding-right', '12px') d3.select('.infoboxtext') .style('font-size', '0.8em') .text('||') }) const calcConviction = (d) => { if (d.conviction === 1) { return 'Very High' } if (d.conviction === 2) { return 'High' } if (communities[d.community].members.length > 5) { return 'Moderate' } return 'Low' } // tooltip const tooltip = new Tooltip({ element: d3.select(container) .append('div') .classed('tooltip', true), content: (d) => { const start = `` const avgUsd = d.avgTransactionAmountUsd === 0 ? '< $0.50' : '$' + d.avgTransactionAmountUsd const stats = `

Number of artwork transactions: ${d.transactionCount}
Avg amount spent/earned per transaction: ${avgUsd}
Number of other suspicious accounts traded with: ${d.transactedWithCount}
Number of artworks wash traded (directly): ${d.countOfWorksHeldMoreThanOnce}
Our conviction of guilt: ${calcConviction(d)}

` return start + stats }, }) node .on('mouseover', (event, d) => { tooltip.display(d); }) .on('mouseout', (event, d) => { tooltip.hide() }) .on('mousemove', event => { tooltip.move(event); }) return container }31:T8de,

1: Basics

Eligible users who are active on SuperRare and in our Warpcast channel will earn a daily allowance of $RARE they can tip to others on Farcaster.

2: Earning allowance

Allowance is earned by buying, selling, creating, and bidding on SR artworks, or working up to a high ranking community score in the Warpcast /SuperRare channel.

3: How to tip

You can tip your allowance to any SuperRare user with a linked Farcaster account. Just reply to one of their casts with the amount followed by "$RARE." Per example: "I love this idea! Here's 50 $RARE."

4: Claiming received tips

Tips are recorded offchain and the program is broken into seasons. At each season's end, received tips can be claimed through an airdrop on SuperRare.

32:T41d,The tipping program went live in May. It was built in three weeks and launched without a database. Engagement hockey-sticked immediately and, within 48 hours, we found ourselves simultaneously repairing and steering an ever accelerating ship. It took weeks to go from **CRITICAL** to **DUBIOUS AT BEST**, and even longer to realize the program was being programmatically exploited. July's wash trading scheme was a good one: Farmers discovered that buying or selling SuperRare artworks led to significant allowance boosts and the following pattern ensued: 1. Create a whole mess of bot/shell SuperRare accounts. 2. Buy cheap artworks and sell them back and forth to yourself. 3. Watch your allowance rise and tip it to yourself. Once we caught wind, I pulled transaction and Farcaster data, but quickly realized this task might be better suited for graph algorithms. Unfortunately, I didn't know shit about graph algorithms. What followed was a quick and dirty drive through the study of complex networks. The broad strokes of which I'll now relay.33:Ta62,degreeCentralityUndirected = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = 300 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) const mainGroup = svg .append('g') .attr('id', 'main') const linesGroup = mainGroup.append('g').attr('id', 'lines') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const radius = xLocalScale(0.05) const circles = [ { id: 0, x: xLocalScale(0.15), y: yScale(0.25), text: '2', color: d3.color('#003f5c').brighter(2) }, { id: 1, x: xLocalScale(0.15), y: yScale(0.75), text: '1', color: '#58508d' }, { id: 2, x: xLocalScale(0.5), y: yScale(0.5), text: '3', color: '#ff6361' }, { id: 3, x: xLocalScale(0.85), y: yScale(0.25), text: '1', color: '#ffa600' } ] const lines = [ { from: 0, to: 2, }, { from: 1, to: 0, }, { from: 1, to: 2, }, { from: 2, to: 3, }, ] circlesGroup .selectAll('circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('r', radius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .selectAll('text') .data(circles) .join((enter) => { enter .append('text') .attr('x', (d) => d.x) .attr('y', (d) => d.y) .attr('dy', '0.35em') .attr('text-anchor', 'middle') .style('color', '#000') .style('font-size', width < 768 ? '0.8em' : '1.2em') .text((d) => d.text) }) for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, radius) const endPoint = calculateEdgePoint(toP, fromP, radius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', '2px') .attr('stroke', '#ccc') .attr('stroke-opacity', 0.8) .attr('d', path) } return svg.node() }34:Tc49,degreeCentralityDirected = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = 300 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) const mainGroup = svg .append('g') .attr('id', 'main') // Define marker for arrows svg.append('defs') .append('marker') .attr('id', 'arrowhead') .attr('viewBox', '-0 -5 10 10') .attr('refX', 10) .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 6) .attr('markerHeight', 6) .attr('xoverflow', 'visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#ccc') .style('stroke', 'none') const linesGroup = mainGroup.append('g').attr('id', 'lines') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const radius = xLocalScale(0.05) const circles = [ { id: 0, x: xLocalScale(0.15), y: yScale(0.25), text: '1', color: d3.color('#003f5c').brighter(2) }, { id: 1, x: xLocalScale(0.15), y: yScale(0.75), text: '2', color: '#58508d' }, { id: 2, x: xLocalScale(0.5), y: yScale(0.5), text: '1', color: '#ff6361' }, { id: 3, x: xLocalScale(0.85), y: yScale(0.25), text: '1', color: '#ffa600' } ] const lines = [ { from: 0, to: 2, }, { from: 1, to: 0, }, { from: 2, to: 1, }, { from: 2, to: 3, }, { from: 0, to: 1, }, ] circlesGroup .selectAll('circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('r', radius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .selectAll('text') .data(circles) .join((enter) => { enter .append('text') .attr('x', (d) => d.x) .attr('y', (d) => d.y) .attr('dy', '0.35em') .attr('text-anchor', 'middle') .style('color', '#000') .style('font-size', width < 768 ? '0.8em' : '1.2em') .text((d) => d.text) }) for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, radius) const endPoint = calculateEdgePoint(toP, fromP, radius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', '2px') .attr('stroke', '#ccc') .attr('stroke-opacity', 0.8) .attr('marker-end', 'url(#arrowhead)') .attr('d', path) } return svg.node() }35:Tac6,betweenessCentrality = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = 300 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) const mainGroup = svg .append('g') .attr('id', 'main') const linesGroup = mainGroup.append('g').attr('id', 'lines') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const radius = xLocalScale(0.05) const circles = [ { id: 0, x: xLocalScale(0.15), y: yScale(0.25), text: '', color: d3.color('#003f5c').brighter(2) }, { id: 1, x: xLocalScale(0.15), y: yScale(0.75), text: '', color: '#58508d' }, { id: 2, x: xLocalScale(0.5), y: yScale(0.25), text: '', color: '#bc5090' }, { id: 3, x: xLocalScale(0.5), y: yScale(0.75), text: '3.5', color: '#ff6361' }, { id: 4, x: xLocalScale(0.85), y: yScale(0.75), text: '', color: '#ffa600' } ] const lines = [ { from: 0, to: 1, }, { from: 0, to: 2, }, { from: 1, to: 3, }, { from: 2, to: 3, }, { from: 3, to: 4, }, ] circlesGroup .selectAll('circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('r', radius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .selectAll('text') .data(circles) .join((enter) => { enter .append('text') .attr('x', (d) => d.x) .attr('y', (d) => d.y) .attr('dy', '0.35em') .attr('text-anchor', 'middle') .style('color', '#000') .style('font-size', width < 768 ? '0.8em' : '1.2em') .text((d) => d.text) }) for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, radius) const endPoint = calculateEdgePoint(toP, fromP, radius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', '2px') .attr('stroke', '#ccc') .attr('stroke-opacity', 0.8) .attr('d', path) } return svg.node() }36:T72b,

Blue <-> Purple: Shortest path does not pass thru Orange, 0 points
Blue <-> Pink: Shortest path does not pass thru Orange, 0 points
Blue <-> Yellow: 2 shortest paths, both pass through Orange, 2 / 2 = 1 point
Blue <-> Purple: Shortest path does not pass thru Orange, 0 points
Purple <-> Pink: 2 shortest paths, 1 passes through Orange, 1 / 2 = 0.5 points
Purple <-> Yellow: 1 shortest path, it passes through Orange, 1 / 1 = 1 points
Pink <-> Yellow: 1 shortest path, it passes through Orange, 1 / 1 = 1 points
Total score for Orange: 3.5

37:Tbb6,betweenessCentralityFlawed = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = 300 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) const mainGroup = svg .append('g') .attr('id', 'main') const linesGroup = mainGroup.append('g').attr('id', 'lines') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const radius = xLocalScale(0.05) const circles = [ { id: 0, x: xLocalScale(0.15), y: yScale(0.25), text: '', color: d3.color('#003f5c').brighter(2) }, { id: 1, x: xLocalScale(0.15), y: yScale(0.75), text: '', color: '#374c80' }, { id: 2, x: xLocalScale(0.3), y: yScale(0.5), text: '', color: '#7a5195' }, { id: 3, x: xLocalScale(0.5), y: yScale(0.5), text: '', color: '#7CC674' }, { id: 4, x: xLocalScale(0.7), y: yScale(0.5), text: '', color: '#ef5675' }, { id: 5, x: xLocalScale(0.85), y: yScale(0.25), text: '', color: '#ff764a' }, { id: 6, x: xLocalScale(0.85), y: yScale(0.75), text: '', color: '#ffa600' }, ] const lines = [ { from: 0, to: 1, }, { from: 0, to: 2, }, { from: 1, to: 0, }, { from: 1, to: 2, }, { from: 2, to: 3, }, { from: 3, to: 4, }, { from: 4, to: 5, }, { from: 4, to: 6, }, { from: 5, to: 6, }, ] circlesGroup .selectAll('circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('r', radius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .selectAll('text') .data(circles) .join((enter) => { enter .append('text') .attr('x', (d) => d.x) .attr('y', (d) => d.y) .attr('dy', '0.35em') .attr('text-anchor', 'middle') .style('color', '#000') .style('font-size', '1.2em') .text((d) => d.text) }) for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, radius) const endPoint = calculateEdgePoint(toP, fromP, radius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', '2px') .attr('stroke', '#ccc') .attr('stroke-opacity', 0.8) .attr('d', path) } return svg.node() }38:T40e,### Girvan-Newman algorithm By 2002, I was playing DOOM II over dial-up on a Compaq Presario: Clearly the future was now. Correspondingly, innovations in graph analysis were abundant: [Influence Maximization]](https://www.sciencedirect.com/science/article/pii/S2590005622000972), Google's [PageRank](https://en.wikipedia.org/wiki/PageRank), and [Spectral Clustering](https://en.wikipedia.org/wiki/Spectral_clustering), just to name just a few. In terms of community detection, arguably the era's most influential proposal was 2002's Girvan-Newman algorithm, which built upon Betweeness Centrality to maximize a network's **modularity score** – a quantitative measure indicating if the graph is well-divided into distinct communities. It does so by: 1. Calculating Betweeness – just like in Betweeness Centrality, but for edges instead of nodes. 2. Locating, and then removing, the most important edge in the network. 3. Repeating steps 1 and 2 until modularity optimizations cease or the desired number of communities is uncovered.39:Tb95,girvinNewman = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = 300 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) const mainGroup = svg .append('g') .attr('id', 'main') const linesGroup = mainGroup.append('g').attr('id', 'lines') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const radius = xLocalScale(0.05) const circles = [ { id: 0, x: xLocalScale(0.15), y: yScale(0.25), text: '', color: d3.color('#003f5c').brighter(2) }, { id: 1, x: xLocalScale(0.15), y: yScale(0.75), text: '', color: '#374c80' }, { id: 2, x: xLocalScale(0.3), y: yScale(0.5), text: '', color: '#7a5195' }, { id: 3, x: xLocalScale(0.5), y: yScale(0.5), text: 'Sad Boi', color: '#7CC674' }, { id: 4, x: xLocalScale(0.7), y: yScale(0.5), text: '', color: '#ef5675' }, { id: 5, x: xLocalScale(0.85), y: yScale(0.25), text: '', color: '#ff764a' }, { id: 6, x: xLocalScale(0.85), y: yScale(0.75), text: '', color: '#ffa600' }, ] const lines = [ { from: 0, to: 1, }, { from: 0, to: 2, }, { from: 1, to: 0, }, { from: 1, to: 2, }, { from: 4, to: 5, }, { from: 4, to: 6, }, { from: 5, to: 6, }, ] circlesGroup .selectAll('circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('r', radius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .selectAll('text') .data(circles) .join((enter) => { enter .append('text') .attr('x', (d) => d.x) .attr('y', (d) => d.y) .attr('dy', '0.35em') .attr('text-anchor', 'middle') .style('color', '#000') .style('font-size', width < 768 ? '0.4em' : '0.8em') .text((d) => d.text) }) for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, radius) const endPoint = calculateEdgePoint(toP, fromP, radius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', '2px') .attr('stroke', '#ccc') .attr('stroke-opacity', 0.8) .attr('d', path) } return svg.node() }3a:Tfe6,modularityPoor = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = xScale(1) < 768 ? 300 : 400 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('margin', '10px 0') const mainGroup = svg .append('g') .attr('id', 'main') // Define marker for arrows svg.append('defs') .append('marker') .attr('id', 'arrowhead') .attr('viewBox', '-0 -5 10 10') .attr('refX', 10) .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 6) .attr('markerHeight', 6) .attr('xoverflow', 'visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#ccc') .style('stroke', 'none') const linesGroup = mainGroup.append('g').attr('id', 'lines') const communitiesGroup = mainGroup.append('g').attr('id', 'communities') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const circleRadius = xLocalScale(0.033) const communityRadius = xLocalScale(0.12) const communities = [ { x: xLocalScale(0.13), y: yScale(0.26), color: d3.color('#003f5c').brighter(2), smallerCircleAngles: [135, 45, 225, 315], }, { x: xLocalScale(0.5), y: yScale(0.74), color: '#bc5090', smallerCircleAngles: [135, 45, 225, 315], }, { x: xLocalScale(0.87), y: yScale(0.26), color: '#ffa600', smallerCircleAngles: [135, 45, 270,], }, ] communitiesGroup .selectAll('circle.community') .data(communities) .join((enter) => { enter .append('circle') .attr('class', '.community') .attr('r', communityRadius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.2) }) // Function to convert angle to radians const toRadians = angle => angle * (Math.PI / 180) const circles = communities.reduce((acc, community) => { const { x, y, color, smallerCircleAngles } = community const pack = smallerCircleAngles.map((a, i) => ({ id: acc.length + i, x: x + (communityRadius / 2) * Math.cos(toRadians(a)), y: y + (communityRadius / 2) * Math.sin(toRadians(a)), color, })) return [...acc, ...pack] }, []) circlesGroup .selectAll('circle.circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('class', '.circle') .attr('r', circleRadius) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) const lines = [ { from: 1, to: 8, }, { from: 3, to: 10, }, { from: 3, to: 6, }, { from: 0, to: 4, }, { from: 7, to: 8, }, // { from: 1, to: 5, }, // { from: 6, to: 2, }, // { from: 4, to: 6, }, ] for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, circleRadius) const endPoint = calculateEdgePoint(toP, fromP, circleRadius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', 1.5) .attr('stroke', '#333') .attr('stroke-opacity', 0.6) .attr('marker-end', 'url(#arrowhead)') .attr('d', path) } return svg.node() }3b:T105b,modularityHigh = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = xScale(1) < 768 ? 300 : 400 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('margin', '10px 0') const mainGroup = svg .append('g') .attr('id', 'main') // Define marker for arrows svg.append('defs') .append('marker') .attr('id', 'arrowhead') .attr('viewBox', '-0 -5 10 10') .attr('refX', 10) .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 6) .attr('markerHeight', 6) .attr('xoverflow', 'visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#ccc') .style('stroke', 'none') const linesGroup = mainGroup.append('g').attr('id', 'lines') const communitiesGroup = mainGroup.append('g').attr('id', 'communities') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const circleRadius = xLocalScale(0.033) const communityRadius = xLocalScale(0.12) const communities = [ { x: xLocalScale(0.13), y: yScale(0.26), color: d3.color('#003f5c').brighter(2), smallerCircleAngles: [135, 45, 225, 315], }, { x: xLocalScale(0.5), y: yScale(0.74), color: '#bc5090', smallerCircleAngles: [135, 45, 225, 315], }, { x: xLocalScale(0.87), y: yScale(0.26), color: '#ffa600', smallerCircleAngles: [135, 45, 270,], }, ] communitiesGroup .selectAll('circle.community') .data(communities) .join((enter) => { enter .append('circle') .attr('class', '.community') .attr('r', communityRadius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.2) }) // Function to convert angle to radians const toRadians = angle => angle * (Math.PI / 180) const circles = communities.reduce((acc, community) => { const { x, y, color, smallerCircleAngles } = community const pack = smallerCircleAngles.map((a, i) => ({ id: acc.length + i, x: x + (communityRadius / 2) * Math.cos(toRadians(a)), y: y + (communityRadius / 2) * Math.sin(toRadians(a)), color, })) return [...acc, ...pack] }, []) circlesGroup .selectAll('circle.circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('class', '.circle') .attr('r', circleRadius) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) const lines = [ { from: 0, to: 1, }, { from: 0, to: 2, }, { from: 1, to: 2, }, { from: 1, to: 3, }, { from: 0, to: 3, }, { from: 4, to: 5, }, { from: 4, to: 6, }, { from: 5, to: 6, }, { from: 0, to: 1, }, { from: 8, to: 9, }, { from: 8, to: 10, }, { from: 9, to: 10, }, { from: 1, to: 6, }, ] for (let l of lines) { const fromCircle = circles[l.from] const toCircle = circles[l.to] const fromP = { x: fromCircle.x, y: fromCircle.y } const toP = { x: toCircle.x, y: toCircle.y } // Calculate new start and end points on the edge of the circles const startPoint = calculateEdgePoint(fromP, toP, circleRadius) const endPoint = calculateEdgePoint(toP, fromP, circleRadius) const path = d3.path() path.moveTo(startPoint.x, startPoint.y) path.lineTo(endPoint.x, endPoint.y) linesGroup .append('path') .attr('fill', 'none') .attr('stroke-width', 1.5) .attr('stroke', '#333') .attr('stroke-opacity', 0.6) .attr('marker-end', 'url(#arrowhead)') .attr('d', path) } return svg.node() }3c:Td9b,louvainOne = { const width = xScale(1) < 768 ? xScale(1) : xScale(0.75) const height = xScale(1) < 768 ? 300 : 400 const xLocalScale = d3.scaleLinear().domain([0, 1]).range([0, width]) const yScale = d3.scaleLinear().domain([0, 1]).range([0, height]) const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('margin', '10px 0') const mainGroup = svg .append('g') .attr('id', 'main') const linesGroup = mainGroup.append('g').attr('id', 'lines') const communitiesGroup = mainGroup.append('g').attr('id', 'communities') const circlesGroup = mainGroup.append('g').attr('id', 'circles') const innerRadius = xLocalScale(0.022) const outerRadius = xLocalScale(0.033) const communityRadius = xLocalScale(0.12) const communities = [ { x: xLocalScale(0.13), y: yScale(0.26), color: d3.color('#003f5c').brighter(2), smallerCircleAngles: [135, 45, 225, 315], }, { x: xLocalScale(0.5), y: yScale(0.74), color: '#bc5090', smallerCircleAngles: [135, 45, 225, 315], }, { x: xLocalScale(0.87), y: yScale(0.26), color: '#ffa600', smallerCircleAngles: [135, 45, 270,], }, ] communitiesGroup .selectAll('circle.community') .data(communities) .join((enter) => { enter .append('circle') .attr('class', '.community') .attr('r', communityRadius) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('stroke-width', 0) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0) }) // Function to convert angle to radians const toRadians = angle => angle * (Math.PI / 180) const circles = communities.reduce((acc, community) => { const { x, y, color, smallerCircleAngles } = community const pack = smallerCircleAngles.map((a, i) => ({ id: acc.length + i, x: x + (communityRadius / 2) * Math.cos(toRadians(a)), y: y + (communityRadius / 2) * Math.sin(toRadians(a)), color, })) return [...acc, ...pack] }, []) circlesGroup .selectAll('circle.outer-circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('class', '.outer-circle') .attr('r', outerRadius) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .selectAll('circle.inner-circle') .data(circles) .join((enter) => { enter .append('circle') .attr('id', (d) => `circle-${d.id}`) .attr('class', '.inner-circle') .attr('r', innerRadius) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke-width', 2) .attr('stroke', (d) => d.color) .attr('fill', (d) => d.color) .attr('fill-opacity', 0.6) }) circlesGroup .append('text') .attr('x', xLocalScale(0.5)) .attr('y', yScale(0.25)) .attr('dy', '0.35em') .attr('text-anchor', 'middle') .style('color', '#000') .style('font-size', width < 768 ? '0.6em' : '1em') .text('All alone in the world :(') return svg.node() }3d:T12db,allUserGraph = { const container = html`

` const nodes = d3 .sort(allUsersGraphNodes, (a, b) => d3.descending(a.weight, b.weight)) const links = allUsersGraphEdges.map((link) => ({ ...link })) const minNodeWeight = d3.min(allUsersGraphNodes, (node) => node.weight) const maxNodeWeight = d3.max(allUsersGraphNodes, (node) => node.weight) const minBetweeness = d3.min( allUsersGraphEdges, (link) => link.weight ) const maxBetweeness = d3.max( allUsersGraphEdges, (link) => link.weight ) const nodeRadiusScale = d3.scaleLog( [minNodeWeight, maxNodeWeight], width < 768 ? [2.5, 30] : [5, 60] ) const inverseNodeRadiusScale = d3.scaleLog( [maxNodeWeight, minNodeWeight], width < 768 ? [2.5, 30] : [5, 60] ) const nodeRadiusStrengthScale = d3.scaleLog( [minNodeWeight, maxNodeWeight], [0.1, 1] ) const nodeOpacityScale = d3.scaleLog( [minNodeWeight, maxNodeWeight], [0.6, 1] ) const linkDistanceScale = d3.scaleLinear( [minBetweeness, maxBetweeness], [20, 5] ) const linkStrengthScale = d3.scaleLinear( [minBetweeness, maxBetweeness], [0.2, 0.2] ) const linkWidthScale = d3.scaleLinear( [minBetweeness, maxBetweeness], [0.5, 1] ) const communities = getCommunities(nodes) const simulation = d3 .forceSimulation(nodes) .force( 'collide', d3.forceCollide((d) => nodeRadiusScale(d.weight) + 8).strength(1).iterations(3) ) .force( 'center', d3.forceCenter(xScale(0.5), yScale(0.5)) ) .force("charge", d3.forceManyBody().strength(-15).distanceMin(10).distanceMax(200)) .force( 'link', d3 .forceLink(links) .distance( (d) => communities[d.source.community].name === communities[d.target.community].name ? 5 : 10 ) .strength( (d) => communities[d.source.community].name === communities[d.target.community].name ? 0.8 : 0.2 ) .id( (node) => node.id ) ) .on('tick', () => { link .attr('x1', (d) => d.source.x) .attr('y1', (d) => d.source.y) .attr('x2', (d) => d.target.x) .attr('y2', (d) => d.target.y) node.attr('cx', (d) => d.x).attr('cy', (d) => d.y) }) const svg = d3 .select(container) .append('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('background-color', '#000') // Add a little depth to background const defs = svg.append('defs'); const radialGradient = defs.append('radialGradient') .attr('id', 'radial-gradient') .attr('cx', '50%') .attr('cy', '50%') .attr('r', '50%') .attr('fx', '50%') .attr('fy', '50%') radialGradient.append('stop') .attr('offset', '75%') .attr('stop-color', '#000') radialGradient.append('stop') .attr('offset', '100%') .attr('stop-color', '#111416') svg.append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'url(#radial-gradient)') .attr('fill-opacity', 0.7) // Set up the zoom functionality const g = svg.append('g') const zoom = d3 .zoom() .scaleExtent([0.1, 10]) .on('zoom', (event) => { g.attr('transform', event.transform.toString()) }) const initialScale = 0.7 const centerX = width / 2 const centerY = height / 2 svg.call( zoom.transform, d3.zoomIdentity .translate(centerX, centerY) .scale(initialScale) .translate(-centerX, -centerY) ) svg.call(zoom) // Apply the zoom behavior to the SVG const link = g .append('g') .selectAll('.link') .data(links) .enter() .append('line') .attr('class', 'link') .attr('stroke', '#6a6a59') .attr('stroke-opacity', 0.6) .attr('stroke-width', (d) => linkWidthScale(d.weight) ) const node = g .append('g') .selectAll('.node') .data(nodes) .enter() .append('circle') .attr('class', 'node') .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', (d) => d.weight > maxNodeWeight ? nodeRadiusScale(maxNodeWeight) * 1.5 : nodeRadiusScale(d.weight)) .attr('stroke', '#222222') .attr('stroke-width', 2.5) .attr('stroke-opacity', 0) .attr('fill', (d) => communities[d.community].color) .attr('fill-opacity', (d) => 0.6) return container }3e:T14e9,potentialFarmersNoPartitionsGraph = { const container = html`

` const nodes = d3 .sort(potentialFarmerGraphNodesNoPartitions, (a, b) => d3.descending(a.weight, b.weight)) const links = potentialFarmerGraphEdgesNoPartitions.map((link) => ({ ...link })) const minNodeWeight = d3.min(potentialFarmerGraphNodesNoPartitions, (node) => node.weight) const maxNodeWeight = d3.max(potentialFarmerGraphNodesNoPartitions, (node) => node.weight) const minBetweeness = d3.min( potentialFarmerGraphEdgesNoPartitions, (link) => link.weight ) const maxBetweeness = d3.max( potentialFarmerGraphEdgesNoPartitions, (link) => link.weight ) const nodeRadiusScale = d3.scaleLog( [minNodeWeight, maxNodeWeight], width < 768 ? [3, 40] : [6, 80] ) const inverseNodeRadiusScale = d3.scaleLog( [maxNodeWeight, minNodeWeight], width < 768 ? [3, 40] : [6, 80] ) const nodeRadiusStrengthScale = d3.scaleLog( [minNodeWeight, maxNodeWeight], [0.1, 1] ) const nodeOpacityScale = d3.scaleLog( [minNodeWeight, maxNodeWeight], [0.6, 1] ) const linkDistanceScale = d3.scaleLinear( [minBetweeness, maxBetweeness], [20, 5] ) const linkStrengthScale = d3.scaleLinear( [minBetweeness, maxBetweeness], [0.2, 0.2] ) const linkWidthScale = d3.scaleLinear( [minBetweeness, maxBetweeness], [0.6, 1] ) const communities = getCommunities(nodes) const simulation = d3 .forceSimulation(nodes) .force( 'collide', d3.forceCollide((d) => nodeRadiusScale(d.weight) + 8).strength(1).iterations(3) ) .force("center", d3.forceCenter(xScale(0.5), yScale(0.5))) .force( 'radial', customForceRadial( (d) => communities[d.community].members.length > 4 ? inverseNodeRadiusScale(d.weight) : Math.abs(communities[17].y()), (d) => communities[d.community].members.length > 4 ? xScale(0.5) + communities[d.community].x() : xScale(0.5), (d) => communities[d.community].members.length > 4 ? yScale(0.5) + communities[d.community].y() : yScale(0.5) ).strength(0.25) ) .force("charge", d3.forceManyBody().strength(-20)) .force( 'link', d3 .forceLink(links) .distance( (d) => communities[d.source.community].name === communities[d.target.community].name ? 5 : 10 ) .strength( (d) => communities[d.source.community].name === communities[d.target.community].name ? 0.5 : 0.2 ) .id( (node) => node.id ) ) .on('tick', () => { link .attr('x1', (d) => d.source.x) .attr('y1', (d) => d.source.y) .attr('x2', (d) => d.target.x) .attr('y2', (d) => d.target.y) node.attr('cx', (d) => d.x).attr('cy', (d) => d.y) }) const svg = d3 .select(container) .append('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('background-color', '#000') // Add a little depth to background const defs = svg.append('defs'); const radialGradient = defs.append('radialGradient') .attr('id', 'radial-gradient') .attr('cx', '50%') .attr('cy', '50%') .attr('r', '50%') .attr('fx', '50%') .attr('fy', '50%') radialGradient.append('stop') .attr('offset', '75%') .attr('stop-color', '#000') radialGradient.append('stop') .attr('offset', '100%') .attr('stop-color', '#111416') svg.append('rect') .attr('width', '100%') .attr('height', '100%') .attr('fill', 'url(#radial-gradient)') .attr('fill-opacity', 0.7) // Set up the zoom functionality const g = svg.append('g') const zoom = d3 .zoom() .scaleExtent([0.1, 10]) .on('zoom', (event) => { g.attr('transform', event.transform.toString()) }) const initialScale = 0.3 const centerX = width / 2 const centerY = height / 2 svg.call( zoom.transform, d3.zoomIdentity .translate(centerX, centerY) .scale(initialScale) .translate(-centerX, -centerY) ) svg.call(zoom) // Apply the zoom behavior to the SVG const link = g .append('g') .selectAll('.link') .data(links) .enter() .append('line') .attr('class', 'link') .attr('stroke', '#6a6a59') .attr('stroke-opacity', 0.7) .attr('stroke-width', (d) => linkWidthScale(d.weight) ) const node = g .append('g') .selectAll('.node') .data(nodes) .enter() .append('circle') .attr('class', 'node') .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', (d) => d.weight > maxNodeWeight ? nodeRadiusScale(maxNodeWeight) * 1.5 : nodeRadiusScale(d.weight)) .attr('stroke', '#222222') .attr('stroke-width', 2.5) .attr('stroke-opacity', 0) .attr('fill', (d) => communities[d.community].color) .attr('fill-opacity', (d) => 0.6) return container }3f:T533,

"... a little like a biologist putting his experimental animals through a hamburger machine and looking at every hundredth cell through a microscope; anatomy and physiology get lost, structure and function disappear, and one is left with cell biology... If our aim is to understand people’s behavior rather than simply to record it, we want to know about primary groups, neighborhoods, organizations, social circles, and communities; about interaction, communication, role expectations, and social control."

40:T17fc,getCommunityPositioning = ( communityMetadata ) => { if (!communityMetadata.length) { return communityMetadata } // Base badding around each community const communityPadding = 60 // Number of communities to place on outer edge of each circle before moving out concentrically const numOfCommunitiesInFirstCircle = 18 const numOfCommunitiesInOuterCircles = 10 // Centers of the SVG const centerX = xScale(0.5) const centerY = yScale(0.5) //Pluck out the biggest community const [centerCommunity, ...remainingCommunities] = communityMetadata // Split the remainingCommunties into two arrays with one representing the first circle, and the 2nd the remaining const firstCircle = remainingCommunities.slice(0, numOfCommunitiesInFirstCircle) const outerCircles = remainingCommunities.slice(numOfCommunitiesInFirstCircle) // Jumple the order of the top half so the larger communities are not all positioned next to one another const { shuffledFirstCircle } = firstCircle.reduce((acc, md) => { const randomIndex = Math.floor(Math.random() * acc.orig.length) const updatedOrig = [...acc.orig] updatedOrig.splice(randomIndex, 1) return { shuffledFirstCircle: [...acc.shuffledFirstCircle, acc.orig[randomIndex]], orig: updatedOrig, } }, { shuffledFirstCircle: [], orig: firstCircle }) // Assign the biggest community to the position in the center and calc its radius for circle offsets const centerCommunityRadius = d3.packEnclose(d3.packSiblings(centerCommunity.radii)).r const centerCommunityPosition = { ...centerCommunity, x: () => xScale(0.5), y: () => yScale(0.5) } // Create an object with keys for each of the community indicies on of the first circle and set their offset to the edge of // the center community's radius. This will allow us to position the communities w/o overlap. As we move out into // additional concentric circles, we'll expand the offsets in each position relative to the radius of the preceding circle // community in the corresponding positions const radiusOffsets = Array(numOfCommunitiesInFirstCircle) .fill(centerCommunityRadius + communityPadding * 2) .reduce((acc, ro, i) => ({ ...acc, [i]: ro, }), {}) // Assign positions for the first circle of communities const { firstCirclePositions, updatedRadialOffsets } = shuffledFirstCircle.reduce((acc, metadata, index, coll) => { // radius offset for this communities position const offset = acc.updatedRadialOffsets[index] // edge case bail out if (typeof offset !== 'number' || metadata.name === -1) { return { updatedRadialOffsets: { ...acc.updatedRadialOffsets, }, firstCirclePositions: [ ...acc.firstCirclePositions, { ...metadata, x: () => xScale(Math.random()), y: () => yScale(Math.random()), }, ], } } // Get the radius of all community nodes packed together const radius = d3.packEnclose(d3.packSiblings(metadata.radii)).r // The distance of this community from the center of SVG const distanceFromCenter = offset + radius // Calculate angle for positioning the communities coordinates in radians const angle = (index / numOfCommunitiesInFirstCircle) * 2 * Math.PI // Calculate the X and Y positions based on the angle const x = centerX + distanceFromCenter * Math.cos(angle) const y = centerY + distanceFromCenter * Math.sin(angle) return { updatedRadialOffsets: { ...acc.updatedRadialOffsets, [index]: distanceFromCenter + communityPadding }, firstCirclePositions: [ ...acc.firstCirclePositions, { ...metadata, x: () => x, y: () => y, }, ], } }, { firstCirclePositions: [], updatedRadialOffsets: radiusOffsets }) // With the outer circles, we only want communities positioned with the angles from the following // indexes of the first circle (avoiding the most verticle as 0 ~= 3 o'clock) const outerCircleAngleIndexes = [0, 1, 2, 7, 8, 9, 10, 11, 16, 17] const { outerCirclePositions } = outerCircles.reduce((acc, metadata, index, coll) => { // Adjust the index so it maps to corresponding positions from the first circle const adjustedIndex = outerCircleAngleIndexes[index % numOfCommunitiesInOuterCircles] // radius offset for this communities position const offset = acc.outerRadialOffsets[adjustedIndex] // edge case bail out if (typeof offset !== 'number' || metadata.name === -1) { return { outerRadialOffsets: acc.outerRadialOffsets, outerCirclePositions: [ ...acc.outerCirclePositions, { ...metadata, x: () => xScale(Math.random()), y: () => yScale(Math.random()), }, ], } } // Get the radius of all community nodes packed together const radius = d3.packEnclose(d3.packSiblings(metadata.radii)).r // The distance of this community from the center of SVG const distanceFromCenter = offset + radius // So the circles look more natural, offset the community angles a little const angleOffset = index / numOfCommunitiesInOuterCircles / 2 // Calculate angle for positioning the communities coordinates in radians const angle = ((adjustedIndex / numOfCommunitiesInFirstCircle) + angleOffset) * 2 * Math.PI // Calculate the X and Y positions based on the angle const x = centerX + distanceFromCenter * Math.cos(angle) const y = centerY + distanceFromCenter * Math.sin(angle) return { outerRadialOffsets: { ...acc.outerRadialOffsets, [adjustedIndex]: distanceFromCenter + communityPadding, }, outerCirclePositions: [ ...acc.outerCirclePositions, { ...metadata, x: () => x, y: () => y, }, ], } }, { outerCirclePositions: [], outerRadialOffsets: updatedRadialOffsets }) return [centerCommunityPosition, ...firstCirclePositions, ...outerCirclePositions] }41:T68c,getCommunities = (nodes) => { const communityColors = [ '#cf597e', '#e9e29c', '#39b185', '#e88471', '#9ccb86', '#eeb479', '#E73F74', '#80BA5A', '#F2B701', '#7F3C8D', '#11A579', '#3969AC', '#E68310', '#008695', '#CF1C90', '#f97b72', '#4b4b8f', '#A5AA99', ] const communityMetadataMap = nodes.reduce((acc, node) => { const name = `${node.community}` const community = acc[name] || { members: [], hasWashTrader: false, name, radii: [], } return { ...acc, [name]: { ...community, hasWashTrader: community.hasWashTrader || node.countOfWorksHeldMoreThanOnce > 0, members: [...community.members, node], radii: [...community.radii, { r: nodeRadiusScale(node.weight) }], } } }, {}) const communityMetadata = d3.sort( Object.values({ ...communityMetadataMap }), (a, b) => { const aImportance = a.name === '-1' ? -1 : a.members.length const bImportance = b.name === '-1' ? -1 : b.members.length return d3.descending(aImportance, bImportance) } ) return getCommunityPositioning(communityMetadata).reduce( ( communities, metadata, index ) => { communities[metadata.name] = { color: metadata.name === '-1' ? '#009392' : communityColors[index % communityColors.length], name: metadata.name, members: d3.sort(metadata.members, (a, b) => d3.descending(a.weight, b.weight) ), x: metadata.x, y: metadata.y, } return communities }, {} ) }42:T784,function customForceRadial(radius, x, y) { var constant = function (x) { return function () { return x } } var nodes, strength = constant(0.1), strengths, radiuses, xs, ys if (typeof radius !== 'function') radius = constant(+radius) if (typeof x !== 'function') x = constant(x == null ? 0 : +x) if (typeof y !== 'function') y = constant(y == null ? 0 : +y) function force(alpha) { for (var i = 0, n = nodes.length; i < n; ++i) { var node = nodes[i], dx = node.x - xs[i] || 1e-6, dy = node.y - ys[i] || 1e-6, r = Math.sqrt(dx * dx + dy * dy), k = ((radiuses[i] - r) * strengths[i] * alpha) / r node.vx += dx * k node.vy += dy * k } } function initialize() { if (!nodes) return var i, n = nodes.length strengths = new Array(n) radiuses = new Array(n) xs = new Array(n) ys = new Array(n) for (i = 0; i < n; ++i) { radiuses[i] = +radius(nodes[i], i, nodes) xs[i] = +x(nodes[i], i, nodes) ys[i] = +y(nodes[i], i, nodes) strengths[i] = isNaN(radiuses[i]) ? 0 : +strength(nodes[i], i, nodes) } } force.initialize = function (_) { nodes = _ initialize() } force.strength = function (_) { return arguments.length ? ((strength = typeof _ === 'function' ? _ : constant(+_)), initialize(), force) : strength } force.radius = function (_) { return arguments.length ? ((radius = typeof _ === 'function' ? _ : constant(+_)), initialize(), force) : radius } force.x = function (_) { return arguments.length ? ((x = typeof _ === 'function' ? _ : constant(+_)), initialize(), force) : x } force.y = function (_) { return arguments.length ? ((y = typeof _ === 'function' ? _ : constant(+_)), initialize(), force) : y } return force }43:T670,class Tooltip { constructor(config) { const { element, content } = config if (!element || !element.size()) { throw "Requires a tooltip div element selection"; } this._selection = element; if (!content) { throw "Requires a callback function that returns an HTML string"; } this._content = content; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const container = d3.select(this.selection.node().parentNode) const { width: parentWidth, height: parentHeight } = container.node().getBoundingClientRect(); const left = this.clamp( margin, x > parentWidth / 2 ? x : x - width, parentWidth - width - margin ); const top = parentHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum) { this.selection.style("display", "block").html(this.content(datum)) this.selection.transition().duration(500).style('opacity', 0.9) } hide() { this.selection.style("display", "none").html("") this.selection.transition().duration(500).style('opacity', 0) } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } get content() { return this._content; } }44:[{"id":"2f6c5738ed3c1d26584dfe56303ddc1ba30432e77ac83f41fd2124c6599eed7450f28b0347712a1676ca8f935ac449ece3926dad99d4e36a6168cbec65a92960","href":"https://static.observableusercontent.com/files/2f6c5738ed3c1d26584dfe56303ddc1ba30432e77ac83f41fd2124c6599eed7450f28b0347712a1676ca8f935ac449ece3926dad99d4e36a6168cbec65a92960","name":"satisfied-seal.webp","type":"image/webp","lastModified":1727466104886.124,"size":40614},{"id":"71d4605d136f62110e8ddb61c1cbc8c8f792c19a5a1bb3919e3645906ca91412a78445b214e5de29293890462627ddb5a18683652a2960be12efba8fbc2ab825","href":"https://static.observableusercontent.com/files/71d4605d136f62110e8ddb61c1cbc8c8f792c19a5a1bb3919e3645906ca91412a78445b214e5de29293890462627ddb5a18683652a2960be12efba8fbc2ab825","name":"all-users-graph-nodes@3.json","type":"application/json","lastModified":1727568682604.499,"size":338266},{"id":"70efc9be04843a5725ae4f40456f6601986fc608bd17d8d59fc0b37701cf4ca7c56b9d3a7c3d429bcdfbd7d79d0bdbe29bccc559fbf9378acd3955b6e675a623","href":"https://static.observableusercontent.com/files/70efc9be04843a5725ae4f40456f6601986fc608bd17d8d59fc0b37701cf4ca7c56b9d3a7c3d429bcdfbd7d79d0bdbe29bccc559fbf9378acd3955b6e675a623","name":"all-users-graph-edges@3.json","type":"application/json","lastModified":1727568690957.796,"size":423116},{"id":"461112b0745ce43a1d321de35dcdf0f178d3120f017bc6b5ba34abda9d89bc83cf944fbac4c47ddf7e0547ce4d84675a9004f6b6f5d5275b0b5422e4199f908e","href":"https://static.observableusercontent.com/files/461112b0745ce43a1d321de35dcdf0f178d3120f017bc6b5ba34abda9d89bc83cf944fbac4c47ddf7e0547ce4d84675a9004f6b6f5d5275b0b5422e4199f908e","name":"potential-farmer-graph-nodes-no-partitions.json","type":"application/json","lastModified":1727569680871.602,"size":1112730},{"id":"7a27fb087b36c2d795369bce251e0694dcb613cd9ed3bc01e2fa54df7a16d80aa29fd46297f6fabc95a4f3a87b8774e307719f2ca2d82d5c3ade796245a563d1","href":"https://static.observableusercontent.com/files/7a27fb087b36c2d795369bce251e0694dcb613cd9ed3bc01e2fa54df7a16d80aa29fd46297f6fabc95a4f3a87b8774e307719f2ca2d82d5c3ade796245a563d1","name":"potential-farmer-graph-edges-no-partitions.json","type":"application/json","lastModified":1727569680919.761,"size":610746},{"id":"64cf9cecf7c737640c7ec4b59a09d77934d2a12b98ff1de085a6a2482f524887d8d755e756e319fe20d787df7add7f6ce48568e845575c88f1cb4f3eb3bb2585","href":"https://static.observableusercontent.com/files/64cf9cecf7c737640c7ec4b59a09d77934d2a12b98ff1de085a6a2482f524887d8d755e756e319fe20d787df7add7f6ce48568e845575c88f1cb4f3eb3bb2585","name":"potential-farmer-graph-edges.json","type":"application/json","lastModified":1727196574603.618,"size":311172},{"id":"71d4605d136f62110e8ddb61c1cbc8c8f792c19a5a1bb3919e3645906ca91412a78445b214e5de29293890462627ddb5a18683652a2960be12efba8fbc2ab825","href":"https://static.observableusercontent.com/files/71d4605d136f62110e8ddb61c1cbc8c8f792c19a5a1bb3919e3645906ca91412a78445b214e5de29293890462627ddb5a18683652a2960be12efba8fbc2ab825","name":"potential-farmer-graph-nodes-no-partitions@1.json","type":"application/json","lastModified":1727623999112.626,"size":338266},{"id":"70efc9be04843a5725ae4f40456f6601986fc608bd17d8d59fc0b37701cf4ca7c56b9d3a7c3d429bcdfbd7d79d0bdbe29bccc559fbf9378acd3955b6e675a623","href":"https://static.observableusercontent.com/files/70efc9be04843a5725ae4f40456f6601986fc608bd17d8d59fc0b37701cf4ca7c56b9d3a7c3d429bcdfbd7d79d0bdbe29bccc559fbf9378acd3955b6e675a623","name":"potential-farmer-graph-edges-no-partitions@1.json","type":"application/json","lastModified":1727624019802.638,"size":423116},{"id":"cbbb75b86cfbf983487d45b1b95b340e30875bc4326b1fee29c656367079f8a89ca49ff5d0294ebedf4c66929fd4705ae6cbdf6ea521150dfe8f7a31117be2e0","href":"https://static.observableusercontent.com/files/cbbb75b86cfbf983487d45b1b95b340e30875bc4326b1fee29c656367079f8a89ca49ff5d0294ebedf4c66929fd4705ae6cbdf6ea521150dfe8f7a31117be2e0","name":"potential-farmer-graph-edges@1.json","type":"application/json","lastModified":1727628033769.444,"size":319582},{"id":"95d90f6f38586625df6daf57b0072c9d25281cc7939e6b228cefa67510b9d06ae58411a87adf970dc4b544816023b998c67efd1a5e56b35662f64a7f713a0b38","href":"https://static.observableusercontent.com/files/95d90f6f38586625df6daf57b0072c9d25281cc7939e6b228cefa67510b9d06ae58411a87adf970dc4b544816023b998c67efd1a5e56b35662f64a7f713a0b38","name":"potential-farmer-graph-nodes@4.json","type":"application/json","lastModified":1727628047470.302,"size":366353},{"id":"6796d00814d6034b33aa3c5de38bccb9f27478123e1ac5951ac0a63162f0aea7cebb52812629a885f1c0a360e1e075d301ed89c9672c5a270289a32582caa070","href":"https://static.observableusercontent.com/files/6796d00814d6034b33aa3c5de38bccb9f27478123e1ac5951ac0a63162f0aea7cebb52812629a885f1c0a360e1e075d301ed89c9672c5a270289a32582caa070","name":"potential-farmer-graph-nodes@3.json","type":"application/json","lastModified":1727217648499.4,"size":315498},{"id":"f9d4c63ed5fb50b68c7fa1ece086a95221636cce6c79fece078d21652ce0bc98cfc800c4eba6eff35f1883dacf00f5c25342dbd3c9946e05d5ccde9b137791e6","href":"https://static.observableusercontent.com/files/f9d4c63ed5fb50b68c7fa1ece086a95221636cce6c79fece078d21652ce0bc98cfc800c4eba6eff35f1883dacf00f5c25342dbd3c9946e05d5ccde9b137791e6","name":"potential-farmer-graph-edges@2.json","type":"application/json","lastModified":1727723478290.444,"size":322482},{"id":"61cb5c1d54efabdf026e61a74b6db1e4c289ce8d9f12ea6b98131a85bdfa60d5943abae8a3bc03439024f781b01ced872e23daa8e95db47165b5ce7c8a76265b","href":"https://static.observableusercontent.com/files/61cb5c1d54efabdf026e61a74b6db1e4c289ce8d9f12ea6b98131a85bdfa60d5943abae8a3bc03439024f781b01ced872e23daa8e95db47165b5ce7c8a76265b","name":"potential-farmer-graph-nodes@5.json","type":"application/json","lastModified":1727723491171.197,"size":437967}] 2d:{"id":"a58430901a70564a","slug":null,"title":"Tips for asshole detection in social network patterns","thumbnail":"8c4eb04a6cfd6fc687560b8d13f900526716e43693e8bb37e8caef6f810c0a5e","access_level":"public","create_time":"$D2024-09-24T16:49:17.230Z","update_time":"$D2024-10-09T16:06:48.463Z","view_time":null,"first_public_time":"$D2024-09-29T03:57:04.038Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2bb59736daf4140c","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":"starter_2024"},"version":2048,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e46eb192f759a583","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":null}],"members":[{"type":"team","id":"2bb59736daf4140c","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e46eb192f759a583","login":"lukewhyte","name":"Luke Whyte","avatar_url":"https://avatars-next.observableusercontent.com/688b5801d96123f4df339a833be4d2eace57f294f6db742160616c5c293c426d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Tips for asshole detection in social network patterns","cells":[{"id":0,"value":"# Tips for asshole detection in social network patterns\n\n## Bots, blockchains, and the joys of farmer hunting on Farcaster","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":804,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":769,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":756,"value":"## A $RARE quick tipping primer\n\n_Feel free to skip._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":712,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":696,"value":"## Tricks and tactics of the modern day farmer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":708,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":966,"value":"## A brief, incomplete history of social network analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":977,"value":"I'm going to gloss over two centuries of foundational work and begin, instead, as this story heats up at Harvard University in the 1970s. \n\nThose were heady days: Sociologists, mathematicians, and computer scientists shaping the future of network analysis. Perhaps its fitting that, still decades before the first profile pic or reaction video, the era skewed toward algorithms aimed at uncovering the shape and hierarchy of a network, as opposed to communities that may lurk within it. \n\nOne such incredibly impactful category of algorithms are known as _centrality measures_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":986,"value":"## Short paths along a crowded edge\n\nCentrality algorithms rely on a metric known as _importance_, which quantifies the value of any particular node or edge (i.e., a relationship between nodes) in a graph. A node's importance is measured through its connections to other nodes, and its role in the network.\n\n### Degree Centrality\n\nThe simplest of such measures, Degree Centrality, calculates importance by measuring the number of direct connections (edges) between nodes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":991,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1064,"value":"In the above example, orange has the highest importance score because it is connected to all three other nodes.\n\nAs with many graph algorithms, Degree Centrality graphs can be **undirected** or **directed**. The above example is undirected, but we can change that with some arrows:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1069,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"Degree centrality still has its use cases, but falls short under the demands of today's large-scale graph applications.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1092,"value":"### Betweeness Centrality\n\nCentrality took a big leap forward when legend of the field, [Linton Freeman](https://en.wikipedia.org/wiki/Linton_Freeman) proposed the Betweeness Centrality algorithm in 1977. The technique showers importance on any nodes that proves essential in traveling the **shortest path between all the other nodes**. Importance here is like that high school football player in the drama club that everyone calls on the weekends. The algorithm gives every node a betweeness score dependent on how often you'll pass through it on the path to other nodes.\n\nPer example, here the Betweeness Centrality importance score of Orange is **3.5**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"We calculate this by adding up all the \"shortest paths\" between all other nodes that pass through orange. If two (or more) shortest path exist (i.e., here Pink <-> Purple is just as quick through Orange as through Blue) the path is deemed just half as valuable and, in turn, receives half the points:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1738,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1129,"value":"Betweeness Centrality is great for uncovering important nodes in a network. Though it's not without its weaknesses. Here's one of them:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1112,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1160,"value":"In the above example, Green becomes a bottleneck between the two communities on either side. Yes, it will have the highest importance score, but should it? It could be that both adjacent communities are stronger without Green, who, tragically, has a lot more acquaintances than friends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1119,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1149,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1157,"value":"I really like the elegance of this idea: As we've seen solving for betweeness exposes nodes that can act like bottlenecks between robust sub-communities. For instance, in the example above, clearly the West Side Blue Crew would rather not worry about Orange's Far East needs. Removing such connections increases the network-wide betweenness score, and exposes thriving sub-communities in the process.\n\nDespite the era's innovations, on the heels of Girvan-Newman came a tsunami of Zuckerbergs, Prime memberships, and washing machines with iPhone apps. By the turn of the decade, an algorithm's speed and scalability were near as important as its effectiveness, which brings us to 2008 and the Louvain Method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"## The Belgian bombshell\n\nIn 2008, a group of Belgian researchers proposed a groundbreaking algorithm for fast and effective community detection across large networks. Like Girvan-Newman, Louvain seeks to optimize a network's modularity score by maximizing the number of edges (relationships) in the sub-communities it defines, and minimizing those that span between them. Here's two examples:\n\n**Low modality – the majority of edges travel between communities in the network:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1187,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1349,"value":"\n**High modality – the majority of edges keep it in the family:**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1351,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1823,"value":"Modularity measures the quality of such a community structure by comparing the actual density of edges within communities to the expected density of edges if the connections were random (and defining \"random\" is [an interesting study](https://barabasi.com/f/624.pdf) of its own).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1656,"value":"\n

\n
Warning! What follows is a simplified description. I can do no better.
\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1369,"value":"In the case of Louvain, the algorithm starts by converting every node into a community of its own:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1636,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1651,"value":"The algorithm then, one by one, moves every node into it's neighbor's community and checks to see if this ups the modularity score. If so, it pats itself on the back and leaves the node in its new home, if not, it puts it back before moving to the next node.\n\nThis process is repeated until movement of nodes into new homes cease to result in modularity optimization.\n\nLouvain then deems all of these new node-filled sub-communities _Super Nodes_, and starts the process over from scratch. This time rehoming not the nodes, but the _Super Nodes_ in their neighbors' communities to see if such migrations bear improvements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1681,"value":"## And now, the thrilling conclusion of **_Farmer Hunter_**...\n\nThough we've just scratched the surface of community detection's ongoing advancements, it felt that, with Louvain, I might have found a suitable approach for unmasking unsuspecting token bandits.\n\nAs a preliminary step, I wrote a quick node script to clean up my data – removing the large number of marketplace participants whose behavior clearly placed them far from any crimes.\n\nNext I installed [Neo4j](https://neo4j.com/), a graph database management system, which relies on [Cypher](https://neo4j.com/docs/getting-started/cypher-intro), a specialized query language for graph analysis, and provides a variety of graph algorithms, including Louvain, out of the box. I did need to spend some time reading Cypher tutorials in order to properly organize my data into nodes and edges, but this felt well worth it.\n\nFinally, I ran the query, only to find the results were far less revealing than anticipated:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1372,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1688,"value":"The above graphic _did_, however, make clear that transactions with a few central accounts dominated network activity. Those turned out to be those artists offering the most affordable artworks on SuperRare. Farmers were buying their work and passing them between shell accounts like ringworm through a high school wrestling team.\n\nI removed artists from the data and ran the algorithm again:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1842,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1950,"value":"_Closer!_ But now another problem was clear: Since Louvain seeks to optimize modularity, it broke the network down into the smallest possible communities – a level too granular for my needs.\n\nFortunately, the Neo4j implementation of Louvain allows each node to be assigned an initial community on input. When provide, instead of starting by reducing each node to its own community, the algorithm treats the incoming community assignments as _Super Nodes_ and begins modularity optimization from there.\n\nI wrote a script assigning an initial community to each account by chaining transactions: If account A made a transaction that, by walking transactions (edges) from node to node, could be connected to Node B, A and B would receive the same initial community assignment.\n\nI put that dataset through the algorithm and, _boom_, produced the results shown at the top of this post.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1689,"value":"satisfiedSeal = FileAttachment(\"satisfied-seal.webp\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1691,"value":"## At this point, I need to make a confession\n\nI most likely didn't need to use an algorithm as sophisticated as Louvain. In fact, I might not have needed any graph algorithms at all. Louvain is optimized for enormous networks and, after filtering out unsuspicious transactions, my graph contained less than 3,000 edges.\n\nBut my efforts were not in vain. By organizing transaction data into a graph with initial communities and visualizing it, my dataset transformed from an unstructured puzzle into a set of recognizable patterns in user behavior. I might have achieved near identical results without running Louvain, but I wouldn't have known that unless I did.\n\n## A closing thought\n\nIn researching this article, I came across a 1968 quote from Columbia University sociologist Allen Barton. At the time, most mainstream sociologists still based their research on sample surveys completed by individuals, a practice he described as:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1693,"value":"$3f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1698,"value":"Social network analysis is no longer beholden to such a narrow lens. Damn near every datapoint of human behavior is now digitally recorded. Just think what we might learn about ourselves, and the forces that shape us, as we read the large-scale patterns woven by the fabric of our lives.\n\nIt's the _why_ behind the _what_, and its hiding in plain sight.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1700,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1373,"value":"allUsersGraphEdges = FileAttachment(\"all-users-graph-edges@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"allUsersGraphNodes = FileAttachment(\"all-users-graph-nodes@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"potentialFarmerGraphEdges = FileAttachment(\"potential-farmer-graph-edges@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"potentialFarmerGraphNodes = FileAttachment(\"potential-farmer-graph-nodes@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"function flash(g, communities) {\n // Keep the node red for 10 seconds (10000 ms)\n setTimeout(() => {\n // Flash from red to white and back to red over the course of 1 second (500 ms each way)\n g.selectAll('.wash-trader')\n .transition()\n .duration(500)\n .attr(\"fill\", d => d3.color(communities[d.community].color).brighter(1.5))\n .transition()\n .duration(500)\n .attr(\"fill\", d => communities[d.community].color)\n .on(\"end\", () => {\n // After completing the flash, wait another 10 seconds before flashing again\n flash(g, communities);\n });\n }, 1000); // Initial delay of 10 seconds\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"minNodeWeight = d3.min(potentialFarmerGraphNodes, (node) => node.weight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"maxNodeWeight = d3.max(potentialFarmerGraphNodes, (node) => node.weight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"minBetweeness = d3.min(\n potentialFarmerGraphEdges,\n (link) => link.weight\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"maxBetweeness = d3.max(\n potentialFarmerGraphEdges,\n (link) => link.weight\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"nodeRadiusScale = d3.scaleLinear(\n [minNodeWeight, maxNodeWeight],\n width < 768 ? [2, 15] : [5, 40]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"inverseNodeRadiusScale = d3.scaleLinear(\n [maxNodeWeight, minNodeWeight],\n width < 768 ? [2, 15] : [5, 40]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"nodeRadiusStrengthScale = d3.scaleLinear(\n [minNodeWeight, maxNodeWeight],\n [0.1, 1]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"nodeOpacityScale = d3.scaleLinear(\n [minNodeWeight, maxNodeWeight],\n [0.6, 1]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"linkDistanceScale = d3.scaleLinear(\n [minBetweeness, maxBetweeness],\n [30, 20]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"linkStrengthScale = d3.scaleLinear(\n [minBetweeness, maxBetweeness],\n [0.2, 0.4]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"linkWidthScale = d3.scaleLinear(\n [minBetweeness, maxBetweeness],\n [0.5, 1.5]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"xScale = d3.scaleLinear().domain([0, 1]).range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"yScale = d3.scaleLinear().domain([0, 1]).range([0, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"// Function to calculate the point on the circle edge\nfunction calculateEdgePoint(fromP, toP, radius) {\n const dx = toP.x - fromP.x;\n const dy = toP.y - fromP.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n // Normalize the vector and scale it by the circle radius\n const ratio = radius / distance;\n return {\n x: fromP.x + dx * ratio,\n y: fromP.y + dy * ratio\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1840,"value":"potentialFarmerGraphEdgesNoPartitions = FileAttachment(\"potential-farmer-graph-edges-no-partitions@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1841,"value":"potentialFarmerGraphNodesNoPartitions = FileAttachment(\"potential-farmer-graph-nodes-no-partitions@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W44","stdlib":"1","titling":"auto"}} 2e:"$2d:body"