2a:Tea6,force = { const context = DOM.context2d(width, 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); }; simulationNodes .forEach(t => t.show = false); const filteredNodes = simulationNodes .filter(t => t.user.followers_count>=minFollowers) .filter(t => t.retweet_count>=minRts); filteredNodes .forEach(t => { t.show = true; t.r = rS(t.favorite_count); }); 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; // }); const simulation = d3.forceSimulation(filteredNodes) .force("collide", d3.forceCollide(n => n.r+1).iterations(4)) .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) .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(); } }2b:T92e,intro = md` ### Params values: * Charge = 0.1 * linkDistance = 2 * linkStrength = 0.4 * centerStrength = 0.1 * xStrength = 0.3 * yStrength = 0.1 * x Axis as time * y Axis as favorite count ### Filters * minRts = 0 * minFollowers = 0 * numDays = 10 `2c:[] 29:{"title":"IEEEVIS Tweets network","cells":[{"id":1416,"value":"md`# IEEEVIS Tweets network`\n","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`","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":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2b","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)])\n .range([0, width])","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":1271,"value":"y.domain()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"maxTop = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"rS = d3.scalePow().exponent(0.5)\n .domain([\n d3.min(nodes, d=> d.favorite_count || 0) , \n d3.max(nodes, d=> d.favorite_count || 0) ])\n .range([1, 7])","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"// For computing from the tweets\n// nodes = tweets.map(n => {\n// n.date = new Date(n.created_at);\n// return n;\n// })\nnodes = 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 = d3.range(500).map(() => ({\n// source:Math.floor(Math.random()*nodes.length), \n// target:Math.floor(Math.random()*nodes.length)\n// }))\n// links = graph.links.map( l => { return {source:+l.source, target:+l.target}})\n// links = {\n// let links=[];\n \n// links = nodes.filter( t=> t.retweeted_status).map(t => ({\n// target:t.retweeted_status.id,\n// target_id:t.retweeted_status.id,\n// source:t.id,\n// type: \"retweet\"\n// }));\n \n// links = links.concat(nodes.filter(t=> t.in_reply_to_status_id).map(t=> ( {\n// source:t.id,\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,\n// target:t.quoted_status.id,\n// target_id: t.quoted_status.id,\n// type: \"quote\"\n// }))); \n\n// return links;\n// }\nlinks = tweets.links","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"simulationLinks = links.map( l=> { 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= nodes","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"dNodes = {\n const dNodes = {};\n simulationNodes.forEach( n => {\n n.retweeted_status && (dNodes[n.retweeted_status.id]=n.retweeted_status);\n n.quoted_status && (dNodes[n.quoted_status.id]=n.quoted_status);\n });\n \n simulationNodes.forEach( n => {\n dNodes[n.id]=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=800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"width=900","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":294,"value":"// These are the full tweets:\n// tweets = d3.json(\"https://gist.githubusercontent.com/john-guerra/cfa5e6df8fa5edcbccdc9d2ff7594641/raw/514aa9de9725f5eb52a7ea95a35547c665100569/ieeevis2018Tweets.json\")\ntweets = d3.json(\"https://gist.githubusercontent.com/john-guerra/cfa5e6df8fa5edcbccdc9d2ff7594641/raw/09920287288599903159225557aa53ba23d15005/ieeevis2018_rt_network.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}