32:T4db,md`## Context This visualisation is part of a study aiming to identify cause-effect associations in diabetes related tweets. Following steps have been conducted to determine causes and effects: - *Personal* and *non-jokes* tweets: We were only interested in studying tweets containing personal information such as emotions, opinion and *personal* content and in consequence *institutional* tweets (advertising, health studies, etc.) were removed. Similarly jokes related to diabetes is a frequent phenomenon and were removed as well. Both personal and non-jokes tweets were obtained by fine-tuning transformer based language models - A special focus of our study lied on diabetes distress which regroups all psychological factors related to the day-to-day disease management such as anxiety, fear, concerns, emotions. Only tweets containing an emotional element, either emoji/emoticon or emotional word were kept. - Fine-tuning a BERTweet based language model allowed us to focus only on sentences containing causal information - A conditional random field algorithm in combination with BERTweet features enabled us to detect causes and effects - The identified causes and effects in diabetes-related tweets are visualised in the following `33:T1bfb,function drawChart(data) { const nodesFiltered = data.nodes.map(d => Object.create(d)) .filter(d => d.nodesize >= minNnode) // filter nodes with minimal number of causes/effects const links = data.links.map(d => Object.create(d)) .filter(d => nodesFiltered.map(node => node.name).includes(d.source) && nodesFiltered.map(node => node.name).includes(d.target)) .filter(d => d.value >= minNedge); // filter edges with min number of associations // don't show nodes that are not linked to any other node (when filtered) const nodes = nodesFiltered.filter(node => links.map(link => link.source).includes(node.name) || links.map(link => link.target).includes(node.name)); const maxNlinks = Math.max.apply(null, data.links.map(d => Object.create(d)).map(d => d.value)) const radius = 7; var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody().strength(-800)) // adjust to separate nodes more .force("center", d3.forceCenter(width/2, height/2)) .force('collision', d3.forceCollide().radius(d => d.radius)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) const link = svg.append("g") .attr("class", "links") .selectAll("line") .data(links) .join("line") .attr("class", "link") .attr("stroke-width", d => Math.max.apply(null, [1, 2*d.value / maxNlinks]) ) // Math.sqrt(d.value) / 2) // play on arrow size .attr("marker-end", "url(#end)"); // marker-end: defines arrowhead that will be drawn at the final vertex of the given shape: "url(#arrowhead)" link.append("title").text(d => d.value); // build the arrow const arrows = svg.append("svg:defs").selectAll("marker") // let's add two markers: one for unhovered links and one for hovered links. .data(["end", "end-active"]) // Different link/path types can be defined here .enter().append("svg:marker") .attr("id", String) // String; "arrowhead" .attr("viewBox", "0 -5 10 10") .attr("refX", 20) // sets offset of the arrow from the centre of the circle; If circle is bigger, the value needs to be bigger //.attr("refY", -1.5) .attr("markerWidth", 6) // set the bounding box for the marker .attr("markerHeight", 6) .attr("orient", "auto") .attr("xoverflow", "visible") .append("svg:path") .attr("d", "M0, -5L10,0L0,5") .attr("class", d => d=== "end-active" ? "active arrowPath" : "arrowPath"); //define the classes for each of the markers. svg.append("svg:defs").select("#end").attr("class", "arrow"); svg.append("svg:defs").select("#end-active").attr("class", "arrow-active"); const node = svg.append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes) .join("circle") .attr("r", radius) .attr("fill", d => color(d)) .call(drag(simulation)) .on('mouseover.fade', fade(0.2)) .on('mouseout.fade', fade(1)); // text for the nodes const textNode = svg.append('g') .selectAll('.node-label') .data(nodes) .join('text') .text(d => d.name) .attr("class", "node-label") .attr('font-size',10) .attr("font-family", "Arial") .call(drag(simulation)) .on('mouseover.fade', fade(0.2)) .on('mouseout.fade', fade(1)); // text for edges const textLine = svg.append("g") .selectAll(".edge-label") .data(links) .join("text") .text(d => d.value) .attr("class", "edge-label") .attr("font-size", 10) .attr("font-family", "Arial") .call(drag(simulation)) .on('mouseover.fade', fade(0.2)) .on('mouseout.fade', fade(1)); // runs the animation of the force layout one "step". Those steps give the force layout its fluid movement simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", function(d) { return d.x = Math.max((radius+1), Math.min(width - (radius+1), d.x)); }) .attr("cy", function(d) { return d.y = Math.max((radius+1), Math.min(height - (radius+1), d.y)); }); textNode .attr("x", d => d.x + 10) .attr("y", d => d.y) .attr("visibility", "hidden"); textLine .attr("visibility", "hidden") .attr("x", function(d) { if (d.target.x > d.source.x) { return (d.source.x + 0.99*(d.target.x - d.source.x)/2); } else { return (d.target.x + 0.99*(d.source.x - d.target.x)/2); } }) .attr("y", function(d) { if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); } else { return (d.target.y + (d.source.y - d.target.y)/2); } }) }); // elements fade on touch function fade(opacity) { return d => { node.style('opacity', function (o) { return isConnected(d, o) ? 1 : opacity }); node.attr("r", function(o) {return isConnected(d,o) ? radius+1 : radius}); textNode.style('visibility', function (o) { return isConnected(d, o) ? "visible" : "hidden" }); textLine.style('visibility', o => (o.source === d || o.target === d ? "visible" : "hidden")); link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity)); link.attr("marker-end", o => o.source.index == d.index || o.target.index == d.index ? "url(#end-active)" : "url(#end)"); // move out of node if(opacity === 1){ node.style('opacity', 1) node.attr("r", radius) node.select("circle").attr("r", radius); textNode.style('visibility', 'hidden'); textLine.style("visibility", "hidden"); link.style('stroke-opacity', 0.3) link.attr("marker-end", "url(#end)"); //arrows.style("fill-opacity", 0.3) } }; } var unique_parent_names=nodes.map(d => d.parentName).filter((v, i, a) => a.indexOf(v) === i); var legend = svg.selectAll(".legend") .data(unique_parent_names) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 15) .attr("width", 15) .attr("height", 15) .style("fill", function(d) {return color(nodes.filter(n => n.parentName === d)[0]);}); legend.append("text") .attr("x", width - 20) .attr("y", 9) .attr("dy", ".25em") .style("text-anchor", "end") .attr("font-family", "Arial") .style("font-size", "14px") .text(function(d) { return d; }); const linkedByIndex = {}; links.forEach(d => { linkedByIndex[`${d.source.index},${d.target.index}`] = 1; }); function isConnected(a, b) { return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index; } function isLinkForNode(node, link){ return link.source.index == node.index || link.target.index == node.index; } invalidation.then(() => simulation.stop()); return svg.node() }34:T43c,md`## MIT License ### Copyright (c) 2021 Adrian Ahne.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.`35:[{"id":"f0a50029581bc528b2e605233bae6b93f5d65c7005e9c1c124c322655b268f82f9965c752a4be05aa80726f8328ddc5c1d47380cb49dfd2077f1fba2e6680e05","href":"https://static.observableusercontent.com/files/f0a50029581bc528b2e605233bae6b93f5d65c7005e9c1c124c322655b268f82f9965c752a4be05aa80726f8328ddc5c1d47380cb49dfd2077f1fba2e6680e05","name":"cause_effect_nodes_links_reduced_wo_diabetes_10_minNedges_10@4.json","type":"application/json","lastModified":1633429780333.553,"size":133854},{"id":"2582b2b9969d7c31d91dbb9a1374ea046e06fe127cf09ada95cbbd0ceb416345834a116d126e37b5dacdb3aaa1f099dcd52d97ca7697c2dd42e1e182a8b41f06","href":"https://static.observableusercontent.com/files/2582b2b9969d7c31d91dbb9a1374ea046e06fe127cf09ada95cbbd0ceb416345834a116d126e37b5dacdb3aaa1f099dcd52d97ca7697c2dd42e1e182a8b41f06","name":"cause_effect_nodes_links_reduced_diabetes_10_minNedges_10@4.json","type":"application/json","lastModified":1633429802241.362,"size":56380}] 30:{"title":"Cause and effect associations in diabetes related Tweets","cells":[{"id":0,"value":"md`# Cause and effect associations in diabetes related Tweets\n\n\n\n**Adrian Ahne**, adrian.ahne@protonmail.com`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md `## Visualization: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md` \nThe causes (source) and effects (target) have been extracted from diabetes-related Twitter data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"{\n const table = html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Attribute	Type of Attribute	Ordering direction
Links.source	Categorical	-
Links.target	Categorical	-
Links.value	Ordered Quantitative	Sequential
Node.name	Categorical	-
Node.group	Categorical	-

\n
`;\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md `## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"viewof minNnode = Inputs.range([10, 1000], {label: \"Min number of causes/effects per node\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"md `It is suggested to play mainly with the following parameter:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"viewof minNedge = Inputs.range([0, 1000], {label: \"Min number of cause-effect associations per edge\", value: 200})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"chart = drawChart(data_wo_diab)","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"//data.links\n//d3.scaleOrdinal(d3.schemeSet2).domain([1,2,3,4,5,6,7,8,9,10,11,12,13])\n//unique_parent_names=data_wo_diab.nodes.map(d => Object.create(d))\n// .filter(d => d.nodesize >= minNnode).map(d => d.parentName).filter((v, i, a) => //a.indexOf(v) === i);\ndata_wo_diab.nodes.filter(d => d.parentName == \"Insulin\")[0].parentClass\n//data.links.map(d => Object.create(d)).filter(d => data.nodes.map(d => Object.create(d)).filter(d => d.nodesize >= minElements).map(node => node.name).includes(d.source) && data.nodes.map(d => Object.create(d)).filter(d => d.nodesize >= minElements) .map(node => node.name).includes(d.target))\n//Math.max.apply(null, data.links.map(d => Object.create(d)).map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md `#### Network Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"// Css imports\nhtml``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = {return 700; console.log(\"DD\");}","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md `#### Drag Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md `#### Color Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeSet2);\n return d => scale(d.parentClass)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md `#### Data Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"//data = FileAttachment(\"sample_cause_effect.json\").json()\n//data = FileAttachment(\"cause_effect_nodes_links@2.json\").json()\n//data = FileAttachment(\"cause_effect_nodes_links_reduced@5.json\").json()\n//data = FileAttachment(\"cause_effect_nodes_links_reduced_wo_diabetes@3.json\").json()\ndata_diab = FileAttachment(\"cause_effect_nodes_links_reduced_diabetes_10_minNedges_10@4.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"data_wo_diab = FileAttachment(\"cause_effect_nodes_links_reduced_wo_diabetes_10_minNedges_10@4.json\").json();","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"md `#### D3 Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}