2f:Tcbd,chart = { const links = dataF.links.map((d) => Object.create(d)); const nodes = dataF.nodes.map((d) => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force( "link", d3.forceLink(links).id((d) => d.id) ) .force("charge", d3.forceManyBody().strength(-50)) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;"); // Per-type markers, as they don't inherit styles. svg .append("defs") .selectAll("marker") .data(sources) .join("marker") .attr("id", (d) => `arrow-${d}`) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -0.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") // .attr("fill", color) .attr("d", "M0,-5L10,0L0,5"); /* const link = svg .append("g") .attr("fill", "none") .attr("stroke", "#000000") .attr("stroke-width", 1) .selectAll("path") .data(links) .join("path"); //.attr("stroke", (d) => color(d.type)); // .attr("marker-end", (d) => `url(${new URL(`#arrow-${d.type}`, location)})`); */ const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5) .selectAll("path") .data(links) .join("path") .attr("stroke", (d) => color(d.source.id)) // ← color from source node .attr("stroke-dasharray", "3,3") .attr("d", linkArc); // assuming you're using arcs const node = svg .append("g") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .call(drag(simulation)); node .append("circle") .attr("fill", (d) => { // If node is a source, use its own color if (sources.includes(d.id)) { return color(d.id); } // Else find the source of this node (from links) const link = links.find((l) => l.target.id === d.id); if (link) { return color(link.source.id); } // Fallback color return "#ccc"; }) .attr("stroke", "white") .attr("stroke-width", 1) .attr("r", 7.5) .attr("opacity", (d) => (sources.includes(d.id) ? 1 : 0.5)); //opacity for targets // Tooltips for all nodes (on hover) node.append("title").text((d) => d.id); // Visible labels ONLY for source nodes node .filter((d) => sources.includes(d.id)) .append("text") .attr("x", 8) .attr("y", "0.31em") .text((d) => d.id) .clone(true) .lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); /* node .append("text") .attr("x", 8) .attr("y", "0.31em") .text((d) => d.id) .clone(true) .lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); */ simulation.on("tick", () => { link.attr("d", linkArc); node.attr("transform", (d) => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }30:[{"id":"507c2c469481cc8253ff489e4623959fff84c3bdf87ddf4a63d1e4d0200a0049348c2f895432a50b3e897685f1fb82791c6ea73c8a326aed13ab1cd57ad23ea7","href":"https://static.observableusercontent.com/files/507c2c469481cc8253ff489e4623959fff84c3bdf87ddf4a63d1e4d0200a0049348c2f895432a50b3e897685f1fb82791c6ea73c8a326aed13ab1cd57ad23ea7","name":"finaldf.csv","type":"text/csv","lastModified":1745270211964.603,"size":99186}] 2d:{"title":"CompLit Search + Table","cells":[{"id":4,"value":"# CompLit Search + Table\n\nUsing [Inputs.search](https://github.com/observablehq/inputs/blob/main/README.md#search) and [Inputs.table](https://github.com/observablehq/inputs/blob/main/README.md#table). ","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof uni = Inputs.select(\n data.map((d) => d.type),\n {\n sort: true,\n unique: true,\n value: \"\",\n label: \"University\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"Inputs.table(data.filter((d) => d.type === uni))","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":119,"value":"data = FileAttachment(\"finaldf.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"links = data.filter((d) => d.type === uni)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"dataF = ({\n nodes: Array.from(\n new Set(links.flatMap((l) => [l.source, l.target])),\n (id) => ({ id })\n ),\n links\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"sources = Array.from(new Set(links.map((d) => d.source)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"color = d3.scaleOrdinal(sources, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"function linkArc(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"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"}],"files":"$W30","stdlib":"1","titling":"auto"}