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":"9995ad102361fd6e0fadcbdb3a23da83b5a98f655c816a8dab69dcd80f87c036a26788b6815f0d7137822e35a4738fd393f6268e3e38d93a57c81d435b0f2a39","href":"https://static.observableusercontent.com/files/9995ad102361fd6e0fadcbdb3a23da83b5a98f655c816a8dab69dcd80f87c036a26788b6815f0d7137822e35a4738fd393f6268e3e38d93a57c81d435b0f2a39","name":"rpdr@1.json","type":"application/json","lastModified":1681244924398.927,"size":55471},{"id":"ea73d42ac0c4e2a7e957221cdf25115b6e9539e074c3aa59fdf83f7e4754473f261af599e7d78e27b2355da0e6e9de123f6da4a0f05174ed90fca1add0422460","href":"https://static.observableusercontent.com/files/ea73d42ac0c4e2a7e957221cdf25115b6e9539e074c3aa59fdf83f7e4754473f261af599e7d78e27b2355da0e6e9de123f6da4a0f05174ed90fca1add0422460","name":"ref_img.csv","type":"text/csv","lastModified":1681256063816.335,"size":47752},{"id":"d6f7e8729d573f0ec45d27cd96239b1f87c08d54ea3786091dded1c563964ed39b037c64194b7d71860e651214b86338ab0a8cf68822e4f2ec4a31bf55eee702","href":"https://static.observableusercontent.com/files/d6f7e8729d573f0ec45d27cd96239b1f87c08d54ea3786091dded1c563964ed39b037c64194b7d71860e651214b86338ab0a8cf68822e4f2ec4a31bf55eee702","name":"ref_queen_img.csv","type":"text/csv","lastModified":1681305279022.682,"size":45378},{"id":"5e80534e8d2b2f41fdb818ae65c51b47e4f8d0ef6657ed734a470ce9588ec42a12cfc90091e618d94c1a961a936016fe844baae0446c81893f0943ba3055d9e0","href":"https://static.observableusercontent.com/files/5e80534e8d2b2f41fdb818ae65c51b47e4f8d0ef6657ed734a470ce9588ec42a12cfc90091e618d94c1a961a936016fe844baae0446c81893f0943ba3055d9e0","name":"network_20230824.json","type":"application/json","lastModified":1692969678749.844,"size":73819},{"id":"68a8877725a69e38341063667f63861f75f31b8ac6be2d7ca7c6770a9636dd5fc976c7191a13b4e56fe0c5b84d156a5429d9080ef7734032cad77c7608e26ec7","href":"https://static.observableusercontent.com/files/68a8877725a69e38341063667f63861f75f31b8ac6be2d7ca7c6770a9636dd5fc976c7191a13b4e56fe0c5b84d156a5429d9080ef7734032cad77c7608e26ec7","name":"ref_queen_image.csv","type":"text/csv","lastModified":1692969724799.041,"size":78716},{"id":"adc25cc5cadbe24801579dfcc567f9821961d9da12f54cdfdb001953c27d8214b23fa483fc89402ddca1b92fc1b39250bbc99157b6fbba3a38f57b56cd22ab65","href":"https://static.observableusercontent.com/files/adc25cc5cadbe24801579dfcc567f9821961d9da12f54cdfdb001953c27d8214b23fa483fc89402ddca1b92fc1b39250bbc99157b6fbba3a38f57b56cd22ab65","name":"rpdr_network_json.R","type":"application/octet-stream","lastModified":1692969640287.085,"size":1626}] 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**. \n\nMajor shout out to [**John Guerra**](https://observablehq.com/@john-guerra) for adding in edits to make this 100x cooler. John added in inputs to make the network diagram dynamic (Collide, Radial Force Strength, and Height) and easier to navigate. Thank you John!","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"viewof collide = Inputs.toggle({ label: \"Collide\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"viewof useRadial = Inputs.toggle({ label: \"Use Radial Force\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"viewof radialForce = Inputs.range([0.01, 0.9], {\n step: 0.01,\n value: this?.value || 0.07,\n label: \"Radial Force Strength\",\n disabled: !useRadial\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"viewof height = Inputs.range([10, 1200], {label: \"Height\", value: 700, step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$2f","pinned":false,"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":false,"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":false,"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":416,"value":"data = FileAttachment(\"network_20230824.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"data_old= 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":419,"value":"ref_queen_img = await FileAttachment(\"ref_queen_image.csv\").csv({typed: \"auto\"})","pinned":false,"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":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}