31:T6cb,html`

${button({ value: 'SWITCH TO RECTS', divStyle: { display: 'inline-block' }, buttonStyle: { background: '#161616', 'box-shadow': '0px 0px 6px 0px lightgray', color: 'white', 'font-size': '14px', 'padding': '10px 15px 25px 15px' }, onclick: objs => { chart.switchToRects(); d3.select(objs.button) .style('background', '#333') .interrupt() .transition() .duration(300) .style('background', '#161616'); }, initialize: false })} ${button({ value: 'SWITCH TO CIRCLES', divStyle: { display: 'inline-block' }, buttonStyle: { background: '#161616', 'box-shadow': '0px 0px 6px 0px lightgray', color: 'white', 'font-size': '14px', 'padding': '10px 15px 25px 15px' }, onclick: objs => { chart.switchToCircles(); d3.select(objs.button) .style('background', '#333') .interrupt() .transition() .duration(300) .style('background', '#161616'); }, initialize: false })} ${button({ value: 'RANDOM HASHTAG', divStyle: { display: 'inline-block' }, buttonStyle: { background: '#161616', 'box-shadow': '0px 0px 6px 0px lightgray', color: 'white', 'font-size': '14px', 'padding': '10px 15px 25px 15px' }, onclick: objs => { d3.select('input[name="input"]').node().value = hashtags[Math.floor(Math.random() * hashtags.length)]; d3.select('input[name="input"]').node().dispatchEvent(new CustomEvent('input')); d3.select(objs.button) .style('background', '#333') .interrupt() .transition() .duration(300) .style('background', '#161616'); }, initialize: false })}

`32:T1840,function updateLeaf(g, leaf, root, colorScale) { leaf = g.selectAll('g') .data(root.leaves(), d => d.data.hashtag) .join( enter => enter.append('g') .attr('data-angle', d => d.angle = Math.atan2(d.y - h * 0.5, d.x - w * 0.5)) .attr('transform', d => `translate(${Math.cos(d.angle) * size}, ${Math.sin(d.angle) * size})`) .style('opacity', 0) .call( g => g.append('path') .attr('d', drawArc) .style('fill', d => color(colorScale(d.data.n))) .style('opacity', 1) .style('cursor', d => { if (hashtags.indexOf(d.data.hashtag) >= 0) { return 'pointer'; } else { return 'auto'; }; }) .on('mouseover', function(d) { if (hashtags.indexOf(d.data.hashtag) >= 0) { d3.select(this).attr('stroke', 'black').attr('stroke-width', 2.5).style('opacity', 0.9); } }) .on('mouseout', function(d) { if (hashtags.indexOf(d.data.hashtag) >= 0) { d3.select(this).attr('stroke', 'black').attr('stroke-width', 0).style('opacity', 1); }; }) .on('click', d => { if (hashtags.indexOf(d.data.hashtag) >= 0) { d3.select('input[name="input"]').node().value = d.data.hashtag; d3.select('input[name="input"]').node().dispatchEvent(new CustomEvent('input')); }; }) ) .call( g => g.append('text') .attr('class', 'toRect') .style('opacity', 0) .style('font-weight', 500) .style('font-size', d => fontAdj * d.r / d3.sum(root.leaves(), d => d.r) + 'px') .style('pointer-events', 'none') .text(d => '#' + d.data.hashtag) ) .call( g => g.append('text') .style('fill', '#242424') .attr('text-anchor', 'middle') .style('font-weight', 500) .style('font-size', '1px') .text(d => '#' + d.data.hashtag) .style('opacity', function(d) { const bbox = d3.select(this.parentNode).select('.toRect').node().getBBox(); if ((bbox.width <= d.r * 2 - 7.5) && (fontAdj * d.r / d3.sum(root.leaves(), d => d.r) > 6)) { d3.select(this).attr('transform', `translate(0,${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) * 0.25}) scale(${fontAdj * d.r / d3.sum(root.leaves(), d => d.r)},${fontAdj * d.r / d3.sum(root.leaves(), d => d.r)})`); return 1; } else { const adj = bbox.width / (d.r * 2 - 7.5); d3.select(this).attr('transform', `translate(0,${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) / adj * 0.25}) scale(${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) / adj},${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) / adj})`); return 1; } }) .style('pointer-events', 'none') ) .call( enter => enter.transition() .duration(duration) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .attr('transform', d => `translate(${d.x + 1},${d.y + 1})`) .style('opacity', 1) ), update => update .call( g => g.select('path').interrupt() .transition() .duration(duration) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .attrTween('d', function(d) { const context = d3.path(); context.arc(0, 0, d.r, 0, 2 * Math.PI); const d1 = context.toString(); let path0 = d3.select(this).node(), path1 = path0.cloneNode(), n0 = path0.getTotalLength(), n1 = (path1.setAttribute('d', d1), path1).getTotalLength(); let distances = [0], i = 0, dt = 4 / Math.max(n0, n1); while ((i += dt) < 1) distances.push(i); distances.push(1); let points = distances.map(function(t) { let p0 = path0.getPointAtLength(t * n0), p1 = path1.getPointAtLength(t * n1); return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]); }); return function(t) { return t < 1 ? 'M' + points.map(function(p) { return p(t); }).join('L') : d1; }; }) .style('fill', d => color(colorScale(d.data.n))) .style('opacity', 1) ) .call( g => g.select('.toRect') .text(d => '#' + d.data.hashtag) .style('font-size', d => fontAdj * d.r / d3.sum(root.leaves(), d => d.r) + 'px') ) .call( g => g.select('text:not(.toRect)').interrupt() .transition() .duration(duration) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .attr('transform', function(d) { const bbox = d3.select(this.parentNode).select('.toRect').node().getBBox(); if ((bbox.width <= d.r * 2 - 7.5) && (fontAdj * d.r / d3.sum(root.leaves(), d => d.r) > 6)) { return `translate(0,${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) * 0.25}) scale(${fontAdj * d.r / d3.sum(root.leaves(), d => d.r)},${fontAdj * d.r / d3.sum(root.leaves(), d => d.r)})`; } else { if ((bbox.width <= d.r * 2 - 7.5) && (fontAdj * d.r / d3.sum(root.leaves(), d => d.r) < 6)) { return `translate(0,${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) * 0.25}) scale(${fontAdj * d.r / d3.sum(root.leaves(), d => d.r)},${fontAdj * d.r / d3.sum(root.leaves(), d => d.r)})`; }; const adj = bbox.width / (d.r * 2 - 7.5); return `translate(0, ${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) / adj * 0.25}) scale(${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) / adj},${fontAdj * d.r / d3.sum(root.leaves(), d => d.r) / adj})`; } }) .text(d => '#' + d.data.hashtag) .style('opacity', 1) ) .interrupt() .transition() .duration(duration) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .attr('transform', d => `translate(${d.x + 1},${d.y + 1})`) .style('opacity', 1), exit => exit.lower() .call( g => g.interrupt().transition() .duration(duration) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .attr('transform', `translate(${w * 0.5}, ${h * 0.5})`) .style('opacity', 0) .remove() ) ); return leaf; }33:T533,function toRect(node) { const bbox = d3.select(node).select('.toRect').node().getBBox(); d3.select(node).select('path') .transition() .duration(duration * 0.75) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .style('opacity', 1) .attrTween('d', function(d) { const context = d3.path(); context.moveTo(bbox.width * 0.5 + 5, -15); context.arcTo(bbox.width * 0.5 + 5, 15); context.lineTo(-bbox.width * 0.5 - 5, 15); context.lineTo(-bbox.width * 0.5 - 5, -15); context.closePath(); const d1 = context.toString(); let path0 = d3.select(this).node(), path1 = path0.cloneNode(), n0 = path0.getTotalLength(), n1 = (path1.setAttribute('d', d1), path1).getTotalLength(); let distances = [0], i = 0, dt = 4 / Math.max(n0, n1); while ((i += dt) < 1) distances.push(i); distances.push(1); let points = distances.map(function(t) { let p0 = path0.getPointAtLength(t * n0), p1 = path1.getPointAtLength(t * n1); return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]); }); return function(t) { return t < 1 ? 'M' + points.map(function(p) { return p(t); }).join('L') : d1; }; }) }34:T5b1,function toRects(leaf) { leaf.selectAll('text.toRect') .data(d => [d]) .join('text') .attr('class', 'toRect') .style('font-size', '15px') .text(d => '#' + d.data.hashtag); leaf.selectAll('text:not(.toRect)') .transition() .duration(duration * 0.75 * 0.75) .delay(d => duration * 0.25 * 0.75 + Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .attr('transform', 'translate(0,3.75) scale(15,15)') .style('opacity', 1); for (const node of leaf.nodes()) { toRect(node); }; let x = 0, y = 50; leaf.transition() .duration(duration * 0.75) .delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * delayAdj) .ease(d3.easeSin) .style('opacity', 1) .attr('transform', function(d, i) { const bbox = d3.select(this).select('.toRect').node().getBBox(); let translate; if (i == 0) { x = bbox.width * 0.5 + 15; translate = `translate(${x}, ${y})`; x += bbox.width * 0.5 + 15; return translate; }; if (x + bbox.width + 10 > w) { y += 35; x = bbox.width * 0.5 + 15; translate = `translate(${x}, ${y})`; x += bbox.width * 0.5 + 15; return translate; } else { x += bbox.width * 0.5; translate = `translate(${x}, ${y})`; x += bbox.width * 0.5 + 15; return translate; }; }); }35:[{"id":"22c632353cc60770caef78c9abfe66bfff5a50bd4418ebd22df66ffd03a3f703eba42af319276372a916afaf8619d50bfb1a519a1f432fc6f8738fec485a9ece","href":"https://static.observableusercontent.com/files/22c632353cc60770caef78c9abfe66bfff5a50bd4418ebd22df66ffd03a3f703eba42af319276372a916afaf8619d50bfb1a519a1f432fc6f8738fec485a9ece","name":"hashtagPairsSummarized.json","type":"application/json","lastModified":1588838795863.328,"size":3446350}] 2f:{"title":"Exploring Concurrent Twitter Hashtags (Brexit Edition)","cells":[{"id":0,"value":"md`# Exploring Concurrent Twitter Hashtags (Brexit Edition)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`*What were Twitter users talking about > in the context of Brexit?*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`---\n## Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`Do you ever wanted to know under which circumstances a... pizza 🍕 appeared in the talks about Brexit? If not, how about... Fortnite 👾? Jokes aside, but these topics were among other, incomparably more important ones, that appeared in the discussions on Twitter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`---\n## Methodology`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`Having the data which was gathered using the Twitter Streaming API over the period of a month after the Brexit took place (30.01 - 26.02.2020), I conducted text analysis to find all pairs of hashtags that appeared next to each other.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`For each tweet in the dataset (which consists of 560k of them), I extracted hashtags that appeared in that tweet and created 2-combinations for them (if there was a single hashtag, it was paired with an empty string).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`After that I selected all hashtags that appeared at least 10 times; for each one of them (3226), all concurrent hashtags were found and summarized, so we are able to compare their relative popularities.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`---\n## How to read the chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`Below you'll find an autoselect field (initially filled with BREXIT). The chart is showing up to 50 most popular hashtags that appeared together with the given hashtag (#brexit in that case).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`You might notice two strange things — the first one is a big, single #, which symbolizes a no pair — it means that #brexit was appearing mostly alone.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"md`The second one is... #brexit. It means that, well, #brexit was often appearing with multiple #brexits... I even checked some tweets where this occured — and it's a real thing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`---\n## Interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`\n- You can change the BREXIT to any of the 3226 hashtags available — just delete the text and search for another one.\n- The labels often will be too small to be readable — if it happens, you can transform circles to rectangles to be able to clearly see all of the hashtags.\n- **The main idea behind the chart is to explore interconnected topics** — you can click on majority of circles to seamlessly switch to the most popular pairs for clicked hashtag. Some of them aren't clickable, as they were too rare to be included in the analysis — but I hope you'll enjoy browsing Brexit-related topics 😀\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof hashtag = autoSelect({\n options: hashtags.sort(d3.ascending),\n placeholder: 'Search for a hashtag...',\n value: 'brexit',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"chart = {\n const svg = d3.create('svg')\n .attr('id', 'che')\n .attr('viewBox', [0, 0, w, h]);\n \n const g = svg.append('g');\n let leaf;\n \n function draw(hashtag) {\n // Data & scales.\n const data = initialData[hashtag].slice(0, numberOfHashtagsToShow);\n const nMax = d3.max(data, d => d.n);\n const rScale = d3.scaleSqrt().domain([0, nMax]).range(radiusRange);\n const colorScale = d3.scaleSqrt().domain([0, nMax]).range([0, 1]);\n \n // Packing the circles.\n const pack = data => d3.pack()\n .size([w - 2, h - 2])\n .padding(3)\n (d3.hierarchy({children: data})\n .sum(d => d.n));\n \n const root = pack(data);\n \n // Draw the circles.\n leaf = updateLeaf(g, leaf, root, colorScale);\n Object.assign(svg.node(), {\n switchToCircles() {\n updateLeaf(g, leaf, root, colorScale);\n },\n switchToRects() {\n leaf.call(toRects);\n }\n });\n }\n\n return Object.assign(svg.node(), {\n draw\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"duration = 2000","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"delayAdj = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"h = 625","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"size = Math.max(w, h)","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"fontAdj = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"gray = '#F2F2F2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"blue = '#548AFF'","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"radiusRange = [4, 30]","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"numberOfHashtagsToShow = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`---\n### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"color = d3.interpolate(gray, blue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"function drawArc(d) {\n const context = d3.path();\n context.arc(0, 0, d.r, 0, 2 * Math.PI);\n return context.toString();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"chart.draw(hashtag)","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"initialData = await FileAttachment('hashtagPairsSummarized.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"hashtags = Object.keys(initialData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"md`---\n### Imports & Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import {autoSelect} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"import {button} from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}