30:T9bc,intro = md`

Parameters

Include retweets
Charge 0.5
linkDistance 2
linkStrength 0.1
centerStrength 0.1
xStrength 0.2
yStrength 0.1
x Axis as time
y Axis as favorite count

Filters

minRts 0
minFollowers 0
numDays 7

`31:T14b7,force = { const context = DOM.context2d(width, height); let _selectedTweet = null; mutable loading = ""; let transform = d3.zoomIdentity; const drawText = (txt, x, y, size) => { context.stroke(); context.save(); context.font = `${size}px sans-serif`; context.strokeStyle = "white"; // context.fillStyle = "white"; context.lineWidth = size/6; context.textAlign = "center"; context.strokeText(txt, x, y); context.fillText(txt, x, y); context.restore(); }; const drawNode = (n, dr=0) => { // context.fillStyle = c(n.cluster); context.moveTo(n.x+n.r+dr, n.y+n.r+dr); context.arc(n.x, n.y, n.r + dr, 0, 2 * Math.PI); if (n === _selectedTweet) { drawText(n.user.screen_name, n.x, n.y + n.r + 20, 24); drawText(n.text, n.x, n.y + n.r + 32, 12); } if (_selectedTweet && n.user.screen_name !== _selectedTweet.user.screen_name) { context.globalAlpha = 0.4; } else { context.globalAlpha = 1; } }; 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); rS.domain([ d3.min(nodes, d=> d.degree || 0) , d3.max(nodes, d=> d.degree || 10) ]) 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, 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*3/4).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.save(); context.clearRect(0, 0, width, height); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); // 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 { const coords = transform.invert(d3.mouse(context.canvas)); _selectedTweet = simulation.find(coords[0], coords[1]); simulation.restart(); // console.log(coords, d3.event.y); }) .on("click", t => { const coords = transform.invert(d3.mouse(context.canvas)); mutable selectedTweet = simulation.find(coords[0], coords[1]); // console.log(d3.event.x); }) context.restore(); } //ticked // Zoom and Pan d3.select(context.canvas).call(d3.zoom() .scaleExtent([1, 8]) .on("zoom", () => { transform = d3.event.transform; // Update the xScale gX.call(xAxis.scale(transform.rescaleX(x))); ticked(); })); ticked(); invalidation.then( () => simulation.stop()); return context.canvas; }32:[] 2e:{"title":"IEEEVIS Tweets Network All Data","cells":[{"id":1416,"value":"md`# IEEEVIS Tweets Network All Data\n${loading}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"md`\n\nHere are ${nodes.length} IEEEVIS2019 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. Check the controls below to manipulate parameters. Color shows the users with most favorites overall. Click to see a tweet below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1821,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"handle_filter = {\n const div = html`\n \n `;\n \n d3.select(div)\n .select(\"#btnSearch\")\n .on(\"click\", () => {\n mutable searchHandle = d3.select(div)\n .select(\"#inScreenName\")\n .property(\"value\");\n });\n \n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"xAxisSvg = DOM.svg(width,50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"tweet(selectedTweet ? selectedTweet.id_str : nodes[0].id_str)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"mutable selectedTweet = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1811,"value":"mutable searchHandle = \"\"","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":"\nyAsFaves = Generators.input(intro.querySelector(\"#chyAsFaves\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"includeRts = Generators.input(intro.querySelector(\"#chIncludeRts\"))","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([\n d3.max(nodes, d=> d.date)-1000*3600*24*numDays,\n d3.max(nodes, d=> d.date).getTime()+1000*3600*24*numDays/3]) // Add some threeshold after the max\n .range([0, width])\n .nice()","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, 200])","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 || 10) ])\n .range([2, 5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1872,"value":"xAxis = d3.axisTop(x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"gX = {\n const svg = d3.select(xAxisSvg);\n return svg.selectAll(\"g\")\n .data([x])\n .join(\"g\")\n .call(xAxis)\n .attr(\"transform\", \"translate(0,30)\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1760,"value":"md`## Data preprocessing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"nodes = tweets.map(n => {\n n.date = new Date(n.created_at);\n return n;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1763,"value":"md`We add three types of connections: rts, replies, and quotings`","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"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":true,"hidden":false,"mode":"ojs"},{"id":1766,"value":"md`Filters for nodes and links`","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"simulationLinks = {\n dNodes;\n\n return links\n .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 };\n })\n .filter((l) => l.source && l.target);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"simulationNodes = nodes.filter((t) =>\n searchHandle !== \"\"\n ? t.user.screen_name === searchHandle\n : true && includeRts\n ? true\n : t.retweeted_status === undefined\n)","pinned":true,"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.degree=0);\n n.quoted_status && (dNodes[n.quoted_status.id_str]=n.quoted_status, n.degree=0);\n };\n \n for (let n of simulationNodes) { \n n.degree=0;\n dNodes[n.id_str]=n;\n \n }; \n \n return dNodes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"height=600","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":1684,"value":"initialData = d3.text(\"https://gist.githubusercontent.com/john-guerra/7b27a95eb898ffcafde2145530e96dc8/raw/54fca0be40a657adec4de6a4f1eb30089bd827d1/ieeevis2019Tweets.dump\").then(data => data.split(\"\\n\").filter(r => r).map(r => JSON.parse(r)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1439,"value":"viewof tweets = dataInput({\n initialValue: initialData,\n delimiter:',',\n format:\"MongoExport\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1417,"value":"mutable loading = \"Loading 20MB of data please wait\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"nodes.map((d) => d.degree)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1419,"value":"DOM.download(\n new Blob(\n [\n 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 degree: n.degree,\n text: n.text\n })),\n links: links\n })\n ],\n { type: \"text/json\" }\n ),\n \"ieeevis2018_rt_network.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"import {dataInput} from \"@john-guerra/file-input-with-default-value\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1939,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1945,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1969,"value":"fetch(\n \"https://gist.githubusercontent.com/john-guerra/b484776070920239d6acea09682de0f8/raw/192a59258a8dae54798b8b832dce63db8f15e3a5/forceInABox.js\"\n).then((res) => res.text())","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}