30:T172c,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); //Tooltip format lifted (which much thanks) from https://observablehq.com/@muqeet/artsed-bubble const toolTip = d3.select("body").selectAll('div.tool-tip') .data([1]).join("div") .attr("class", "tool-tip").style("opacity", 0); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).distance(forceVariables.nodeDistance).id(d => d.id)) .force("charge", d3.forceManyBody().strength(forceVariables.chargeStr)) .force("collide", d3.forceCollide(d => getRadius(d.group))) //sets the collision points of the various nodes .force("center", d3.forceCenter(width / 2, height / 2)) //centers the diagram in the middle of the svg .force("x", d3.forceX(width/ forceVariables.xDenom).strength(forceVariables.xStr)) .force("y", d3.forceY(height * forceVariables.yDenom).strength(forceVariables.yStr)); const svg = d3.select(DOM.svg(width, height)); //creates the svg canvas that all groups, nodes and links will sit on const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", 4) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", function(d){ let radius if(d.level == 1){ radius = 30 } else if(d.level == 2){ radius = 20 } else if(d.level == 3){ radius = 10 } return radius}) .attr("id", function(d){ let id = d.id if(id == "G & G Property Investments") { id = id.split("&").join("") } id = id.split(' ').join('') return id }) .attr("fill", d => groupColor(d.group)) .on("mouseover", function(d) { toolTip.style("opacity", 1); if(d.level == 3){ //Make ever node finger point except oleg since he's not interactable d3.select(this).style("cursor", "pointer"); } }) .on("mouseout", function(d) { toolTip.transition().duration(500).style('opacity', 0); webIt(d, "out", nodes, link) //add css to illustrate all the connections d3.select(this) .style('stroke', "") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", "") .style("stroke-width", ""); }) .on("touchmove mousemove", function(d) { buildToolTip(d,"node", toolTip); webIt(d, "in", node, link) d3.select(this) .style('stroke', "#18aef9") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", 1) .style("stroke-width", 6); }) .on("click", function(d){ d.fx = null; d.fy = null; }) .call(drag(simulation)); //add the mouseover functionality for the links: make tooltips and highlight links and nodes link.on("mouseover", function(d) { toolTip.style("opacity", 1); }) .on("mouseout", function(d) { toolTip.transition().duration(500).style('opacity', 0); d3.select(this) .style('stroke', "#999") .style("stroke-width", 4) .style("stroke-opacity", 0.6); let source_id = idCompress(d.source.id) let target_id = idCompress(d.target.id) d3.select(`#${source_id}`) .style('stroke', "") .style('stroke-width', "") d3.select(`#${target_id}`) .style('stroke', "") .style('stroke-width', "") }) .on("mousemove", function(d) { buildToolTip(d,"link", toolTip); //runs the function to create the tooltip every time the mouse moves, this allows the tooltip to follow the mouse as it moves d3.select(this) .style('stroke', "#18aef9") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", 1) .style("stroke-width", 6); let source_id = idCompress(d.source.id); let target_id = idCompress(d.target.id); d3.select(`#${source_id}`) .style('stroke', "#18aef9") .style('stroke-width', 6) d3.select(`#${target_id}`) .style('stroke', "#18aef9") .style('stroke-width', 6) }) let firer = node.filter(d => d.group == "Firer").datum(); let bgirls = node.filter(d => d.id == "Bar Girls scam").datum() let office = node.filter(d => d.id == "Firer Office").datum() let grenada = node.filter(d => d.id == "Grenada").datum() let house = node.filter(d => d.id == "Wolf House").datum() simulation.on("tick", () => { let radius = 10 node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }) .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); firer.fy = height / 3; firer.fx = width / 2; bgirls.fy = height/2.5; bgirls.fx = width/2 - 100; office.fy = height/2; office.fx = width/2 house.fy = height/2.5; house.fx = width/2 + 100; grenada.fy = height/6 grenada.fx = width/2 }); invalidation.then(() => simulation.stop()); return svg.node(); }31:T6c9,function webIt(data, inOrOut, node, link){ let target_links = link.filter(d => d.source.id == data.id || d.target.id == data.id); const link_nodes = target_links.data() //returns all the data binded to those links if(inOrOut == "in"){ //add css target_links .style('stroke', "#18aef9") .style("stroke-opacity", 0.6) .style("stroke-width", 4); for(var i = 0; i < link_nodes.length; i++){ console.log(link_nodes[i].source.id) let source_id = idCompress(link_nodes[i].source.id) d3.select(`#${source_id}`) .style('stroke', "#18aef9") .style("stroke-opacity", 0.6) .style("stroke-width", 4); let target_id = idCompress(link_nodes[i].target.id) d3.select(`#${target_id}`) .style('stroke', "#18aef9") .style("stroke-opacity", 0.6) .style("stroke-width", 4); } } else if(inOrOut == "out"){ //remove css target_links .style('stroke', "#999") .style("stroke-width", 4) .style("stroke-opacity", 0.6); for(var i = 0; i < link_nodes.length; i++){ //console.log(link_nodes[i].source.id) let source_id = idCompress(link_nodes[i].source.id) d3.select(`#${source_id}`) .style('stroke', "") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", 1) .style("stroke-width", 0); let target_id = idCompress(link_nodes[i].target.id) d3.select(`#${target_id}`) .style('stroke', "") //#72798C this is one of the Net Element Colors if we want to use it .style("stroke-opacity", 1) .style("stroke-width", 0); } } }32:[] 2e:{"title":"Firer's Network","cells":[{"id":0,"value":"md`# Firer's Network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`This network graph is intended to be a visual aid in representing the various relationships Oleg Firer has cultivated over the past 13 years since arriving in Miami.\nI have taken the liberty of dividing Firer's connections into four groups: business interests, the Wolf house, the Bar Girls scam and Grenada. Occasionally, connections overlap between these groups.\n\nMouse over a node to learn more about a specific entity. Mouse over a link between two entities to display their relationship. Drag a node to reposition it. Click that node again to undo your positioning.\n\nThis is a visual aid to [Firer's story](https://www.miamiherald.com/news/local/community/miami-dade/article231993317.html) in the Miami Herald. \n\nA simpler version of this graph can be found [here](https://observablehq.com/@aaronbrezel/firers-network-simplified)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"forceVariables = ({ nodeRadius: 20, \n nodeDistance: 30,\n chargeStr: -400,\n xDenom: 2,\n xStr: 0.0,\n yDenom: 0.9,\n yStr: 0.0\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"function groupColor(group) {\n let color;\n switch (group) {\n case 'Firer':\n color = '#000000';\n break;\n case 'Wolf House':\n color = \"#FF6600\"\n break;\n case 'Grenada':\n color = \"#EF3340\"\n break;\n case 'Bar Girls scam':\n color = \"#FFD100\"\n break;\n case 'Firer Office':\n color = \"#50eb64\"\n break;\n case 'Connection':\n color = \"#8A8D8F\"\n break;\n }\n \n return color;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"function idCompress(id){ //function that handles \n let compressed_id\n let temp_id = id\n if(id = \"G & G Property Investments\"){\n compressed_id = temp_id.split(\" \").join(\"\")\n compressed_id = compressed_id.split(\"&\").join(\"\")\n }\n else{\n compressed_id = id.split(\" \").join(\"\")\n }\n \n \n return compressed_id\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"function buildToolTip(d, type, toolTip) {\n \n var rows = [];\n if(type == \"link\"){\n rows.push([\"Connection\", d.relationship])\n toolTip.html(rows.map(row => `${row[0]}:${row[1]}`).join(''))\n .transition().duration(200)\n .style('opacity', 0.9)\n .style(\"left\", (d3.event.pageX + 28) + \"px\")\n .style(\"top\", (d3.event.pageY - 28) + \"px\");\n }\n else if(type == \"node\"){\n \n rows.push([d.id, d.tooltip])\n toolTip.html(rows.map(row => `${row[0]}:${row[1]}`).join(''))\n .transition().duration(200)\n .style('opacity', 0.9)\n .style(\"left\", (d3.event.pageX + 28) + \"px\")\n .style(\"top\", (d3.event.pageY - 28) + \"px\");\n \n }\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"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 }\n \n function dragged(d) {\n if(d.level == 3){ //fix the position of Oleg\n \n d.fx = d3.event.x;\n d.fy = d3.event.y;\n \n } \n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n if(d.level == 3){\n d.fx = null;\n d.fy = null;\n \n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \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":85,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"getRadius = (group) => {\n let res;\n switch (group) {\n case 'guest':\n res = groupData[0].mx;\n break;\n case 'event':\n res = groupData[1].mx;\n break;\n case 'organization':\n res = groupData[2].mx;\n break;\n case 'president':\n res = groupData[3].mx;\n break;\n }\n return res * forceVariables.nodeRadius;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"width = SVGwidth - margin.right - margin.left","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"height = SVGheight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"SVGheight = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"SVGwidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"groupData = [{name: 'Firer', shape: \"circle\", radius: 2},\n {name: \"person\", shape: \"circle\", radius: 1},\n {name: \"location\", shape: \"polygon\", radius: 1},\n {name: \"business\", shape: \"rectangle\", radius: 1}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = d3.json(\"https://raw.githubusercontent.com/aaronbrezel/bad-plants/master/temp2.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}