2f:T1576,chart = { const strokeColor = "black"; const highlightStroke = "pink"; const imgLength = 24; const imgWidth = 24; const radius = 13; const width = 800; // const links = data.links.map(d => Object.create(d)); // const nodes = data.nodes.map(d => Object.create(d)); const links = data.links; // Reuse the same nodes to have the animation work when changing the inputs const nodes = data.nodes; const simulation = d3.forceSimulation(nodes) .alpha(1) .force("link", d3.forceLink(links).id(d => d.id).distance(30).strength(0.25)) .force("charge", d3.forceManyBody()) .force("collide", collide ? d3.forceCollide(11).iterations(4): null) .force( "position", useRadial ? d3 .forceRadial( (d) => (d.id.includes("Drag Race") ? width*0.01 : width * 0.5), width / 2, height / 2 ) .strength(radialForce) : null ) .force("x", d3.forceX(width/2)) .force("y", d3.forceY(height/2).strength(0.1*width/height)) // .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .style("overflow", "visible") .attr("viewBox", [0, 0, width, height]); const tooltip = d3.select("body").append("div") .attr("class", "toolTip") .style("position", "absolute") .style("visibility", "hidden") .text("Placeholder"); //link connections taken straight from Raven Gao: https://observablehq.com/@ravengao/force-directed-graph-with-cola-grouping ------- // create link reference let linkedByIndex = {}; data.links.forEach(d => { linkedByIndex[`${d.source.id},${d.target.id}`] = 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; //mouse over and mouse out functions adapted from Raven Gao: https://observablehq.com/@ravengao/force-directed-graph-with-cola-grouping ------- const nodeMouseOver = (d, links) => { tooltip.style("visibility", "visible") .html(createTooltipText(links, d.id)); node .transition(500) .style('opacity', o => { console.log("o", o, d); const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 1.0; } return 0.1; }); link .transition(500) .style('stroke-opacity', o => { console.log(o.source.id === d.id) return (o.source.id === d.id || o.target.id === d.id ? 1 : 0.1) }) .transition(500) .attr('marker-end', o => (o.source.id === d.id || o.target.id === d.id ? 'url(#arrowhead)' : 'url()')); } const nodeMouseOut = (e, d) => { tooltip.style("visibility", "hidden"); node .transition(500) .style('opacity', 1); link .transition(500) .style("stroke-opacity", o => { console.log(o.value) }); }; const link = svg.append("g") .attr("stroke", "#D0D0D0") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .selectAll(".node") .data(nodes) .join("g") .attr('class', 'node') .call(drag(simulation)); //include circle backdrop to create border around images node.append('circle') .attr('fill','black') //color & size of circle depends on what node represents (franchise? season? queen?) .attr("r", d => /S\d+/.test(d.id) ? 10 : d.id.includes('Drag Race') ? 12 : 10) .attr("fill", d => /S\d+/.test(d.id) ? "#B248F8" : d.id.includes('Drag Race') ? "#5448C8" : "black") .attr("stroke", d => /S\d+/.test(d.id) ? "white" : d.id.includes('Drag Race') ? "white" : "black"); // add text to nodes representing seasons node.append('text') .text(d => /S\d+/.test(d.id) ? d.id.match(/S\d+/)[0] : '') .attr('text-anchor', 'middle') .attr('font-size',10) .attr('font-family', 'Chivo Mono') .attr('dominant-baseline', 'central') .attr('fill', 'white'); //add images for queens node.append("image") .attr("xlink:href", d => { //set up custom functuon to look up the image url for each queen based on id (name) const matchingRefImg = ref_queen_img.find(i => i.name === d.id); return matchingRefImg ? matchingRefImg.link_image : ''; }) .attr("x", "-10px") .attr("clip-path",'inset(0 0 0 0 round 50%)') .attr("y", "-10px") .attr("width", "20px") .attr("height", "20px") .on("mouseover", (e, d) => nodeMouseOver(d, data.links)) // hovering out returns image to regular size .on("mouseout", nodeMouseOut) //from Raven .on('mousemove', (event) => tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px")); const 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("transform", d => `translate(${d.x}, ${d.y})`); }; simulation.on("tick", tick); invalidation.then(() => simulation.stop()); tick(); return svg.node(); }30:[{"id":"d6f7e8729d573f0ec45d27cd96239b1f87c08d54ea3786091dded1c563964ed39b037c64194b7d71860e651214b86338ab0a8cf68822e4f2ec4a31bf55eee702","href":"https://static.observableusercontent.com/files/d6f7e8729d573f0ec45d27cd96239b1f87c08d54ea3786091dded1c563964ed39b037c64194b7d71860e651214b86338ab0a8cf68822e4f2ec4a31bf55eee702","name":"ref_queen_img.csv","type":"text/csv","lastModified":1682444346339.048,"size":45378},{"id":"9995ad102361fd6e0fadcbdb3a23da83b5a98f655c816a8dab69dcd80f87c036a26788b6815f0d7137822e35a4738fd393f6268e3e38d93a57c81d435b0f2a39","href":"https://static.observableusercontent.com/files/9995ad102361fd6e0fadcbdb3a23da83b5a98f655c816a8dab69dcd80f87c036a26788b6815f0d7137822e35a4738fd393f6268e3e38d93a57c81d435b0f2a39","name":"rpdr@1.json","type":"application/json","lastModified":1682444346339.048,"size":55471}] 2d:{"title":"Drag Queens: Netwerk Diagram","cells":[{"id":16,"value":"# Drag Queens: Netwerk Diagram","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"I modified code from [**Guillermo Garcia's notebook**](https://observablehq.com/@garciaguillermoa/force-directed-graph) and [**Raven Gao's notebook**](https://observablehq.com/@ravengao/force-directed-graph-with-cola-grouping) to experiment with network diagrams. Network diagram shows drag queens who were featured on different franchises and seasons of the TV reality competition series, **RuPaul's Drag Race**. ","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"viewof collide = Inputs.toggle({ label: \"Collide\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof useRadial = Inputs.toggle({ label: \"Use Radial Force\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"viewof radialForce = Inputs.range([0.01, 0.9], {\n step: 0.01,\n value: this?.value || 0.25,\n label: \"Radial Force Strength\",\n disabled: !useRadial\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"viewof height = Inputs.range([10, 1200], {label: \"Height\", value: 600, step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"Additional function below also from Guillermo.","pinned":false,"hidden":false,"mode":"html"},{"id":191,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!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"},{"id":333,"value":"test_links = data.links.map(d => Object.create(d));","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"nodes = data.nodes.map(d => Object.create(d));","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"test_links.filter(link => link.source === \"RuPaul's Drag Race S1\").length;","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"function createTooltipText (links, id) {\n const regex = /S\\d+/;\n const sourceLinks = links.filter(link => link.source.id === id);\n const targetLinks = links.filter(link => link.target.id === id); \n if (id.match(regex)) {\n const count = sourceLinks.length;\n return `${id} has a total of ${count} queen${count === 1 ? '' : 's'}`;\n }\n else if (id.includes('Drag Race')) {\n const count = sourceLinks.length;\n return `${id} has a total of ${count} season${count === 1 ? '' : 's'}`;\n }\n else {\n const count = targetLinks.length;\n return `${id} appeared on ${count} season${count === 1 ? '' : 's'}`;\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"createTooltipText(test_links, \"Miz Cracker\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"# Import Data","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"I created a json file for this network diagram using data I scraped from [**RuPaul's Drag Race Wiki**](https://rupaulsdragrace.fandom.com/wiki/RuPaul%27s_Drag_Race_Wiki). The code and csv files are available on my [Github](https://github.com/tashapiro/drag-race). We'll use this **data** array to set up the nodes and links of the network diagram. ","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"data = FileAttachment(\"rpdr@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"Also importing a reference csv file with all the image urls for each queen. In the network diagram function, we'll create a new look up function to search and return the **link_image** for each queen by **name**.","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"ref_queen_img = await FileAttachment(\"ref_queen_img.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"# CSS","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}