2b:null 2c:["$","title",null,{"children":"Tweets Network | John Alexis Guerra Gómez | Observable"}] 31: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 `32: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(); } }33:[{"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}] 2f:{"id":"5082a70b42d246f3","slug":"tweets-network","title":"Tweets Network","thumbnail":"bc1af69cf0343633d63ee5b69bb62f7f48d15f7b5be945537f13dbbbe06d0c88","access_level":"public","create_time":"$D2019-05-11T22:57:16.407Z","update_time":"$D2022-10-21T15:16:36.340Z","view_time":null,"first_public_time":"$D2019-05-11T23:06:16.861Z","fork":{"id":"9766f05ef0fffd0c","slug":"ieeevis-tweets","title":"IEEEVIS Tweets Network All Data","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":9,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":1698,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"32a0c61bd441ebe1","slug":"twitter-networks","title":"Twitter networks","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Tweets Network","cells":[{"id":1416,"value":"md`# Tweets Network\n${loading}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1130,"value":"mutable selectedTweet = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1146,"value":"showTweet = tweet(selectedTweet ? selectedTweet.id_str : nodes[0].id_str)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":841,"value":"// viewof xAsTime = html``\nxAsTime = Generators.input(intro.querySelector(\"#chxAsTime\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1255,"value":"// viewof yAsFaves = html``\nyAsFaves = Generators.input(intro.querySelector(\"#chyAsFaves\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"// viewof minRts = html``\nminRts = Generators.input(intro.querySelector(\"#slminRts\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1102,"value":"// viewof minFollowers = html``\nminFollowers = Generators.input(intro.querySelector(\"#slminFollowers\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"charge = Generators.input(intro.querySelector(\"#slCharge\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"// viewof linkDistance = html``\nlinkDistance = Generators.input(intro.querySelector(\"#sllinkDistance\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"// viewof linkStrength = html``\nlinkStrength = Generators.input(intro.querySelector(\"#sllinkStrength\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"// viewof centerStrength = html``\ncenterStrength = Generators.input(intro.querySelector(\"#slcenterStrength\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"// viewof xStrength = html``\nxStrength = Generators.input(intro.querySelector(\"#slxStrength\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1396,"value":"yStrength = Generators.input(intro.querySelector(\"#slyStrength\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"// viewof numDays = html``\nnumDays = Generators.input(intro.querySelector(\"#slnumDays\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1251,"value":"maxTop = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":266,"value":"d3 = require(\"d3@5\", \"https://rawgit.com/john-guerra/b484776070920239d6acea09682de0f8/raw/192a59258a8dae54798b8b832dce63db8f15e3a5/forceInABox.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"height=600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1168,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1317,"value":"md`# Tweets data\n\nHere is the data in case you want to use it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1439,"value":"// viewof localData = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1417,"value":"loading = \"Loading 20MB of data please wait\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1693,"value":"tweets.nodes.map((d) => d.degree)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"