30:T933,intro = md` ### Params values: * Charge = 1 * linkDistance = 2 * linkStrength = 0.15 * centerStrength = 0.1 * xStrength = 0.2 * yStrength = 0.1 * x Axis as time * y Axis as favorite count ### Filters * minRts = 0 * minFollowers = 0 * numDays = 10 `31:Tf87,force = { const context = DOM.context2d(width*0.8, height); const drawNode = (n) => { // context.fillStyle = c(n.cluster); context.moveTo(n.x+n.r, n.y+n.r); context.arc(n.x, n.y, n.r, 0, 2 * Math.PI); if (n.favorite_count>40) context.fillText(n.user.screen_name, n.x + 7, n.y + 2); }; for (let t of simulationNodes) { t.show = false; } const filteredNodes = simulationNodes .filter(t => t.user.followers_count>=minFollowers) // .filter(t => t.retweet_count>=minRts); .filter(t => t.degree>=minRts); for (let t of filteredNodes) { t.show = true; // t.r = rS(t.favorite_count); t.r = rS(t.degree); }; const nestedNodes = nest.entries(filteredNodes) .sort( (a,b) => d3.descending(a.value.total, b.value.total)); const c = d3.scaleOrdinal(d3.schemeCategory10); const filteredLinks = simulationLinks .filter( l => l.source.show && l.target.show) // .filter(l => l.source.user.followers_count>=minFollowers || l.target.user.followers_count>=minFollowers) // .filter(l => l.target.retweet_count> minRts); // filteredLinks.forEach( l => { // l.source.show=true; // l.target.show=true; // }); console.log("filteredNodes", filteredNodes, "links",filteredLinks); const simulation = d3.forceSimulation(filteredNodes) // .force("collide", d3.forceCollide(n => n.r+1).iterations(2)) .force("x", xAsTime ? d3.forceX(d => x(d.date)).strength(xStrength) : d3.forceX(width/2).strength(centerStrength)) .force("y", yAsFaves ? d3.forceY(d => y(d.favorite_count)).strength(yStrength) : d3.forceY(height/2).strength(centerStrength)) .force("charge", d3.forceManyBody().strength(-1*charge)) .force("links", d3.forceLink(filteredLinks).id(d=> d.id_str) .distance(linkDistance) .strength(linkStrength)) .on("tick", ticked); function ticked() { context.clearRect(0, 0, width, height); // draw links if (simulation.alpha() < 0.5) { context.beginPath(); context.lineWidth= 1.5; context.strokeStyle = "#ddd"; for (const link of filteredLinks) { context.moveTo(link.source.x, link.source.y); context.lineTo(link.target.x, link.target.y); } context.stroke(); } for (const [i,user] of nestedNodes.entries()) { context.beginPath(); context.fillStyle = i { // // mutable selectedTweet = simulation.find(d3.event.x, d3.event.y) // const coords = d3.mouse(context.canvas); // console.log(coords, d3.event.y); // }) .on("click", t => { const coords = d3.mouse(context.canvas); mutable selectedTweet = simulation.find(coords[0], coords[1]) console.log(d3.event.x); }) } try { yield context.canvas; yield invalidation; } finally { simulation.stop(); } }32:[{"id":"b5b0f46bdc52b080fecf40b1ddaf9dabc6d781fe703f49fe7656157071d437134a41a6f0ac2c52e8dee6d7f7a49dedb535f1baa3ddf9aec99d5ca441faef1d76","href":"https://static.observableusercontent.com/files/b5b0f46bdc52b080fecf40b1ddaf9dabc6d781fe703f49fe7656157071d437134a41a6f0ac2c52e8dee6d7f7a49dedb535f1baa3ddf9aec99d5ca441faef1d76","name":"ieeevis2022_rt_network@1.json","type":"application/json","lastModified":1666365229905.558,"size":928566},{"id":"9aaa0ddab643713cd5cfa9cc8ec4977f03cc1b490cbe5f010d88f1f22d0a4782ad036a68b88c3d244e032b3a2c9c7df97b5c8428561995136532d6a5f9e97ac1","href":"https://static.observableusercontent.com/files/9aaa0ddab643713cd5cfa9cc8ec4977f03cc1b490cbe5f010d88f1f22d0a4782ad036a68b88c3d244e032b3a2c9c7df97b5c8428561995136532d6a5f9e97ac1","name":"ieeevis2022_rt_network@2.json","type":"application/json","lastModified":1666365349539.514,"size":948597}] 2e:{"title":"Tweets Network","cells":[{"id":1416,"value":"md`# Tweets Network\n${loading}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"introText = md`\n\n**This observable uses a smaller version of the dataset that loads faster, if you want to play with all the tweets check the [original version](https://beta.observablehq.com/@john-guerra/ieeevis-tweets/)**\n\nHere are ${nodes.length} tweets collected from ${x.domain()[0]} until ${x.domain()[1]}\n\nEach dot is a tweet, there are links for reweets, quotes and replies (haven't figured out favorites yet). Circle area is the favorite count. Color shows the users with most favorites overall. Check the controls below to manipulate parameters.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"timeAxis = {\n const svg = d3.select(DOM.svg(width,50));\n svg.append(\"g\")\n .call(d3.axisTop(x))\n .attr(\"transform\", \"translate(0,30)\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"mutable selectedTweet = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"showTweet = tweet(selectedTweet ? selectedTweet.id_str : nodes[0].id_str)","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"// viewof xAsTime = html``\nxAsTime = Generators.input(intro.querySelector(\"#chxAsTime\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"// viewof yAsFaves = html``\nyAsFaves = Generators.input(intro.querySelector(\"#chyAsFaves\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"// viewof minRts = html``\nminRts = Generators.input(intro.querySelector(\"#slminRts\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"// viewof minFollowers = html``\nminFollowers = Generators.input(intro.querySelector(\"#slminFollowers\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"charge = Generators.input(intro.querySelector(\"#slCharge\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"// viewof linkDistance = html``\nlinkDistance = Generators.input(intro.querySelector(\"#sllinkDistance\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"// viewof linkStrength = html``\nlinkStrength = Generators.input(intro.querySelector(\"#sllinkStrength\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"// viewof centerStrength = html``\ncenterStrength = Generators.input(intro.querySelector(\"#slcenterStrength\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"// viewof xStrength = html``\nxStrength = Generators.input(intro.querySelector(\"#slxStrength\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"yStrength = Generators.input(intro.querySelector(\"#slyStrength\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"// viewof numDays = html``\nnumDays = Generators.input(intro.querySelector(\"#slnumDays\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"x = d3.scaleTime()\n .domain([d3.max(nodes, d=> d.date)-1000*3600*24*numDays ,d3.max(nodes, d=> d.date).getTime()+1000*3600*3]) // Add an extra 3 hours after the max\n .range([0, width*0.8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"// y = d3.scaleBand()\n// .domain(nestedNodes.map(d=>d.user.screen_name))\n// .range([0, height])\ny = d3.scaleSqrt()\n .domain(d3.extent(simulationNodes, d => d.favorite_count))\n .range([height-100, -100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"maxTop = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"rS = d3\n .scalePow()\n .exponent(0.5)\n .domain([\n d3.min(nodes, (d) => d.degree || 0),\n d3.max(nodes, (d) => d.degree || 60)\n ])\n .range([1, 10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"nodes = tweets.nodes.map(n => {\n n.date = new Date(n.created_at);\n return n;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"links = tweets.links;\n// links = {\n// let links=[];\n \n// links = nodes.filter( t=> t.retweeted_status).map(t => ({\n// target:t.retweeted_status.id_str,\n// target_id:t.retweeted_status.id_str,\n// source:t.id_str,\n// type: \"retweet\"\n// }));\n \n// links = links.concat(nodes.filter(t=> t.in_reply_to_status_id).map(t=> ( {\n// source:t.id_str,\n// target:t.in_reply_to_status_id,\n// target_id:t.in_reply_to_status_id,\n// type: \"reply\"\n// }))); \n \n// links = links.concat(nodes.filter(t=> t. quoted_status).map(t=> ( {\n// source:t.id_str,\n// target:t.quoted_status.id_str,\n// target_id: t.quoted_status.id_str,\n// type: \"quote\"\n// }))); \n\n// return links;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"// simulationLinks = links;\nsimulationLinks = links.map( l=> { \n // dNodes[l.source] ? dNodes[l.source].degree+=1 : \"\";\n // dNodes[l.target] ? dNodes[l.target].degree+=1 : \"\"; \n return {\n source:dNodes[l.source], \n target:dNodes[l.target],\n type:l.type\n } }).filter(l=> l.source && l.target) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"// simulationNodes= nodes.map(clone)\nsimulationNodes= {\n rS.domain([\n d3.min(nodes, d=> d.degree || 0) , \n d3.max(nodes, d=> d.degree || 60) ]);\n\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"dNodes = {\n const dNodes = {};\n \n // Add rts and quotes\n for (let n of simulationNodes) { \n n.retweeted_status && (dNodes[n.retweeted_status.id_str]=n.retweeted_status);\n n.quoted_status && (dNodes[n.quoted_status.id_str]=n.quoted_status);\n };\n \n for (let n of simulationNodes) { \n // n.degree=0;\n dNodes[n.id_str]=n; \n }; \n \n return dNodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"d3 = require(\"d3@5\", \"https://rawgit.com/john-guerra/b484776070920239d6acea09682de0f8/raw/192a59258a8dae54798b8b832dce63db8f15e3a5/forceInABox.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"height=600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"nest = d3.nest()\n .key(t=> t.user.screen_name)\n .rollup(function(v) { return {\n count: v.length,\n total: d3.sum(v, function(d) { return d.favorite_count; }),\n avg: d3.mean(v, function(d) { return d.favorite_count; }),\n values: v\n }; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"md`# Tweets data\n\nHere is the data in case you want to use it`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"tweets = FileAttachment(\"ieeevis2022_rt_network@2.json\").json()\n// d3.json(\"https://gist.githubusercontent.com/john-guerra/f81ce062114114d712c458ecbcd93c9d/raw/dfb93dba0129cbadd478545df83d4b1d29a226a1/chi2019_rt_network.json\")\n\n// Parse tweets from a local file where each row is a tweet\n// tweets = Files.text(localData).then(data => data.split(\"\\n\").filter(r => r).map(r => JSON.parse(r)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"// viewof localData = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"loading = \"Loading 20MB of data please wait\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"DOM.download(\n new Blob([JSON.stringify({\n nodes:nodes.map(n => ({\n id:n.id, \n id_str:n.id_str,\n user:{\n screen_name:n.user.screen_name,\n followers_count:n.user.followers_count\n },\n favorite_count:n.favorite_count,\n retweet_count:n.retweet_count,\n created_at:n.created_at\n })), \n links:links\n })], {type: \"text/json\"}),\n \"ieeevis2018_rt_network.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"tweets.nodes.map((d) => d.degree)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}