2b:null 2c:["$","title",null,{"children":"Network Graph MPs and influencers #2 | vix18 | Observable"}] 31:T1fab,chart = { const links = displayLinks.map(d => Object.create(d)); const nodes = displayNodes.map(d => Object.create(d)); const [width, height] = [1000, 600]; const svg = d3.select(DOM.svg(width, height)); const aiScoreMinDiff = 0.05; // create link reference let linkedByIndex = {}; data.links.forEach(d => { linkedByIndex[`${d.source},${d.target}`] = true; }); // nodes map let nodesById = {}; data.nodes.forEach(d => { nodesById[d.id] = {...d}; }) const isConnectedAsSource = (a, b) => linkedByIndex[`${a},${b}`]; const isConnectedAsTarget = (a, b) => linkedByIndex[`${b},${a}`]; const isConnected = (a, b) => isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a === b; const isEqual = (a, b) => a === b; const nodeRadius = d => 15 * d.support; const baseGroup = svg.append("g"); function zoomed() { baseGroup.attr("transform", d3.event.transform); } const zoom = d3.zoom() .scaleExtent([0.2, 8]) //.translateExtent([[-100, -100], [width + 1000, height + 1000]]) .on("zoom", zoomed); //svg.call(zoom); let ifClicked = false; const simulation = d3.forceSimulation(nodes) .force("y", d3.forceY(height/2).strength(0.1)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(width/2)) .force("link", d3.forceLink(links).id(d => d.id).distance(10).strength(0.2)) .force("charge", d3.forceManyBody()) .force("collide", d3.forceCollide().radius(d => getNodeSize(d) + 0.5).iterations(2)) const link = baseGroup.append("g") .selectAll("line") .data(links) .join("line") .classed('link', true) .style('stroke', 0.1) .style("stroke-opacity", 0); const node = baseGroup.append("g") .selectAll("circle") .data(nodes) .join("circle") .classed('node', true) .attr("r", d => getNodeSize(d)) .attr("fill", d => getMpColor(d)) .attr("opacity", 0.8); function ticked() { 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; }); node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } simulation .nodes(nodes) .on("tick", ticked); simulation.force("link") .links(links); const mouseOverFunction = d => { tooltip.style("visibility", "visible") .html(() => { if (influencersCsv.map(d => d[""]).includes(d.id)) { const content = `Influencer: ${getInfluencerName(d.id)}`+'
' +`Bio: ${getInfluencerBio(d.id)}`; return content} if(mpCsv.map(d => d["Name"]).includes(d.name)){ const content = `MP: ${d.id}`+'
'; return content } }); if (ifClicked) return; node .transition(500) .style('fill', o => getInfluencerColor(o.id)) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 0.8; } return 0.3; }) ; link .transition(500) .style('stroke-opacity', o => { return (o.source === d || o.target === d ? 1 : 0)}) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); }; const mouseOutFunction = d => { tooltip.style("visibility", "hidden"); if (ifClicked) return; node .transition(500) .style('opacity', 0.8); link .transition(500) .style("stroke-opacity", 0)//o => { }; const mouseClickFunction = d => { // we don't want the click event bubble up to svg d3.event.stopPropagation(); // menuItems.attr('visibility', "hidden"); ifClicked = true; node .transition(500) .style('opacity', 0.8) link .transition(500); node .transition(500) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 0.8; } return 0.3 }) link .transition(500) .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0)) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); }; const rightClickActions = (d, menuItem, i) => { }; const rightClickFunction = d => { d3.event.preventDefault(); // add clicked effect: highlight right-clicked item ifClicked = true; node .transition(500) .style('opacity', 0.8) link .transition(500); node .transition(500) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 0.8; } return 0.3 }) link .transition(500) .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0.1)) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); tooltip.style("visibility", "hidden"); const position = {x: d.x, y: d.y}; }; node.on('mouseover', mouseOverFunction) .on('mouseout', mouseOutFunction) .on('click', mouseClickFunction) .on('contextmenu', rightClickFunction) .on('mousemove', () => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px")); svg.on('click', () => { ifClicked = false; node .transition(500) .style('opacity', 0.8); link .transition(500) .style("stroke-opacity", 0) //menuItems.attr('visibility', "hidden"); }); //invalidation.then(() => layout.stop()); return svg.node(); }32:[{"id":"3199a17dd5256971889d3557383c40a858077bd9467e25d4bb16aaf9d0bd3bc905fa61171e42c66e62b959d0315017b2160e4f309c4cd8932c086c327d0779f0","href":"https://static.observableusercontent.com/files/3199a17dd5256971889d3557383c40a858077bd9467e25d4bb16aaf9d0bd3bc905fa61171e42c66e62b959d0315017b2160e4f309c4cd8932c086c327d0779f0","name":"Infl with stats.csv","type":"text/csv","lastModified":1619207562673.74,"size":8384},{"id":"728b8bf0845e67f3bfb8fa0654762df41f6784cf06f9bcec0806494b31291fb97ac77ad82ff29e1572c078bd88624121bf6a7d3a81015865a81f496ba43f9530","href":"https://static.observableusercontent.com/files/728b8bf0845e67f3bfb8fa0654762df41f6784cf06f9bcec0806494b31291fb97ac77ad82ff29e1572c078bd88624121bf6a7d3a81015865a81f496ba43f9530","name":"MP attributes.csv","type":"text/csv","lastModified":1619207562673.74,"size":126157},{"id":"8c9de352e23791f96c9642dff76b5e187934e6b2c9a8ae63db45cd4ed07a31c9048cddfae4c4db771046febe183c9ae71720b65c96e253e16b3bb55a6027e3ba","href":"https://static.observableusercontent.com/files/8c9de352e23791f96c9642dff76b5e187934e6b2c9a8ae63db45cd4ed07a31c9048cddfae4c4db771046febe183c9ae71720b65c96e253e16b3bb55a6027e3ba","name":"Graph Pinfluencers.json","type":"application/json","lastModified":1619207562673.74,"size":666983},{"id":"6f14313e899e6df68febf7a0804096a33a4967df86a9cedce2e41a11727cb58bf149c87a5e78fef08027ae7f49fc031389d9f758658d9872aaecf522741f2298","href":"https://static.observableusercontent.com/files/6f14313e899e6df68febf7a0804096a33a4967df86a9cedce2e41a11727cb58bf149c87a5e78fef08027ae7f49fc031389d9f758658d9872aaecf522741f2298","name":"PUK.csv","type":"text/csv","lastModified":1619207562673.74,"size":109176}] 2f:{"id":"1cf3d1fe307a8281","slug":"network-graph-mps-and-influencers-1","title":"Network Graph MPs and influencers #2","thumbnail":"78c87b8f5ec56ae6fff1e3682d0560eaa150017c52f4a0ffe8c6531a44598fb4","access_level":"public","create_time":"$D2021-04-23T19:52:42.673Z","update_time":"$D2021-04-26T09:10:45.293Z","view_time":null,"first_public_time":"$D2021-04-23T19:55:49.679Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5d53dd32a08085f0","login":"vix18","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fc8d29517df5336425f605bf4d0212743dc2327fcaf64bbd15a556c8a40ba17c","tier":"starter_2024"},"version":898,"publish_version":898,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b8b1900123f0221","login":"vix18","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fc8d29517df5336425f605bf4d0212743dc2327fcaf64bbd15a556c8a40ba17c","tier":null}],"members":[{"type":"individual","id":"9b8b1900123f0221","login":"vix18","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fc8d29517df5336425f605bf4d0212743dc2327fcaf64bbd15a556c8a40ba17c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Network Graph MPs and influencers #2","cells":[{"id":1,"value":"md`# Network Graph MPs and influencers #2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"I'm a circle!\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"Pinfl = FileAttachment(\"PUK.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":690,"value":"data = FileAttachment(\"Graph Pinfluencers.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":692,"value":"influencersCsv = d3.csvParse(await FileAttachment(\"Infl with stats.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":694,"value":"mpCsv = d3.csvParse(await FileAttachment(\"MP attributes.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"primaryLinks = data.links.filter(d => (influencersCsv.map(d => d[\"\"]).includes(d.source))|| (influencersCsv.map(d => d[\"\"]).includes(d.target)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":710,"value":"secondaryLinks = data.links.filter(d => (Array.from(new Set(primaryLinks.map(d => d['source']).concat(primaryLinks.map(d => d['target'])))).includes(d.source) && Array.from(new Set(primaryLinks.map(d => d['source']).concat(primaryLinks.map(d => d['target'])))).includes(d.target)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"displayLinks = primaryLinks.concat(secondaryLinks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"displayNodes = data.nodes.filter(d => (Array.from(new Set(primaryLinks.map(d => d['source']).concat(primaryLinks.map(d => d['target'])))).includes(d['id'])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":889,"value":"displayNodes.filter(d => d.id == 'Darren Jones')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":896,"value":"displayLinks.filter(d => (d.source == 'Darren Jones') || (d.target == 'Darren Jones'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"function getNodeSize(d) {\n let inflNodeSize = d3.scaleLinear()\n .domain([0, d3.max(influencersCsv.map(d => d[\"MP followers\"]))])\n .range([10, 20])\n \n if (influencersCsv.map(d => d[\"\"]).includes(d.id)) {\n return inflNodeSize(d['MP followers'])\n }\n if(mpCsv.map(d => d[\"Name\"]).includes(d.name)){\n let i = mpCsv.filter(a => a[\"Name\"] == d.name)[0]\n return 5 \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"// need new getInflColor function if introducing toggle between MPs and influencers\n\nfunction getMpColor(d) {\n if (influencersCsv.map(d => d[\"\"]).includes(d.id)) {\n return \"grey\"\n }\n if(mpCsv.map(d => d[\"Name\"]).includes(d.name)){\n return d.colour\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"function getInfluencerColor(d){\n\n const colorScale = d3.scaleSequentialQuantile(d3.interpolateRdYlBu)\n .domain(d3.range(0, 1.1, 0.1))\n const crunch = d3.scaleLinear()\n .domain([-1, 1])\n .range([0, 1])\n let i = influencersCsv.filter(a => a[\"\"] == d)[0]\n return colorScale(crunch(i['Con followers'] - i['Lab followers']))\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"function getInfluencerName(d){\n\n let i = Pinfl.filter(a => a[\"Twitter Handle\"] == d)[0]\n return i['Name']\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"getInfluencerBio('carolinejmolloy')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"function getInfluencerBio(d){\n\n let i = Pinfl.filter(a => a[\"Twitter Handle\"] == d)[0]\n return i['Description']\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"cola = require(\"webcola@3/WebCola/cola.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"html\n``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"