2c:null 2d:["$","title",null,{"children":"CompLit Search + Table | Rini B. Mehta | Observable"}] 32: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(); }33:[{"id":"507c2c469481cc8253ff489e4623959fff84c3bdf87ddf4a63d1e4d0200a0049348c2f895432a50b3e897685f1fb82791c6ea73c8a326aed13ab1cd57ad23ea7","href":"https://static.observableusercontent.com/files/507c2c469481cc8253ff489e4623959fff84c3bdf87ddf4a63d1e4d0200a0049348c2f895432a50b3e897685f1fb82791c6ea73c8a326aed13ab1cd57ad23ea7","name":"finaldf.csv","type":"text/csv","lastModified":1745270211964.603,"size":99186}] 30:{"id":"6a3d1586fea78696","slug":null,"title":"CompLit Search + Table","thumbnail":"0d0b1f796c3af01bfbab9bd676e71b89f6a6381507427a9bb7f01da83c852d32","access_level":"public","create_time":"$D2025-04-21T21:15:06.909Z","update_time":"$D2025-04-23T18:04:58.367Z","view_time":null,"first_public_time":"$D2025-09-11T03:02:14.692Z","has_unpublished_edits":null,"fork":{"id":"ee9e4fb45c009de1","slug":"search-table","title":"Search + Table","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":"starter_2024"},"version":138,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2acec808e73ff66d","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":null}],"members":[{"type":"individual","id":"2acec808e73ff66d","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":null,"role":"editor"},{"type":"team","id":"9e093f781fb276b6","login":"rbhttchr","name":"Rini B. Mehta","avatar_url":"https://avatars-next.observableusercontent.com/f01f45f328c8f9ea2aea4750f27c601cbe23773858fae2a02593e05c4f1796ee","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"Inputs.table(data.filter((d) => d.type === uni))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"data = FileAttachment(\"finaldf.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"links = data.filter((d) => d.type === uni)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"sources = Array.from(new Set(links.map((d) => d.source)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"color = d3.scaleOrdinal(sources, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"