32:Tb68,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); var isTooltipHidden = true; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke", d => colors(d.type)) .attr("stroke-width", 2); link.append("title") .text(d => d.type); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 7) .attr("fill", color) .call(drag(simulation)) .on("click", clickNode) .on("mouseenter", (d) => { link .attr("display", "none") .filter(l => l.source.id === d.id || l.target.id === d.id) .attr("display", "block"); }) .on("mouseleave", evt => { link.attr("display", "block"); }); function clickNode(node) { isTooltipHidden = !isTooltipHidden; var visibility = (isTooltipHidden) ? "hidden" : "visible"; loadTooltipContent(node); if (isTooltipHidden) { unPinNode(node); } // place tooltip where cursor was return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", visibility); } // reset nodes to not be pinned function unPinNode(node) { node.fx = null; node.fy = null; } // add html content to tooltip function loadTooltipContent(node) { var htmlContent = "

"; htmlContent += "

" + node.id + "<\/h4>" htmlContent += "View resources<\/a>" htmlContent += "<\/div>" tooltip.html(htmlContent); } // add tooltip to HTML body var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("padding", "10px") .style("z-index", "10") .style("width", "150px") .style("height", "100px") .style("background-color", "rgba(230, 242, 255, 0.8)") .style("border-radius", "5px") .style("visibility", "hidden") .text(""); node.append("title") .text(d => d.id); simulation.on("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("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:Tb5c,filteredlinkchart = { const links = filteredlinks; const nodes = data.nodes.map(d => Object.create(d)); var isTooltipHidden = true; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke", d => colors(d.type)) .attr("stroke-width", 2); link.append("title") .text(d => d.type); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 7) .attr("fill", color) .call(drag(simulation)) .on("click", clickNode) .on("mouseenter", (d) => { link .attr("display", "none") .filter(l => l.source.id === d.id || l.target.id === d.id) .attr("display", "block"); }) .on("mouseleave", evt => { link.attr("display", "block"); }); function clickNode(node) { isTooltipHidden = !isTooltipHidden; var visibility = (isTooltipHidden) ? "hidden" : "visible"; loadTooltipContent(node); if (isTooltipHidden) { unPinNode(node); } // place tooltip where cursor was return tooltip.style("top", (d3.event.pageY -10) + "px").style("left", (d3.event.pageX + 10) + "px").style("visibility", visibility); } // reset nodes to not be pinned function unPinNode(node) { node.fx = null; node.fy = null; } // add html content to tooltip function loadTooltipContent(node) { var htmlContent = "
"; htmlContent += "
" + node.id + "<\/h4>" htmlContent += "View resources<\/a>" htmlContent += "<\/div>" tooltip.html(htmlContent); } // add tooltip to HTML body var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("padding", "10px") .style("z-index", "10") .style("width", "150px") .style("height", "100px") .style("background-color", "rgba(230, 242, 255, 0.8)") .style("border-radius", "5px") .style("visibility", "hidden") .text(""); node.append("title") .text(d => d.id); simulation.on("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("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }34:[{"id":"510f984074659611c3067b29dbd3f75e6faa45cf4e571178cc35a18409d4987377d9e69b5c038a4f56c7f9e53f4ed85220fbc2b4ba72d8b752bccfbfd6be8899","href":"https://static.observableusercontent.com/files/510f984074659611c3067b29dbd3f75e6faa45cf4e571178cc35a18409d4987377d9e69b5c038a4f56c7f9e53f4ed85220fbc2b4ba72d8b752bccfbfd6be8899","name":"PersonRelations@12.json","type":"application/json","lastModified":1654401233611.874,"size":184820},{"id":"687c212318452511ea0fc3a5c9530ebd11387de489b490f88e7da53b9fb07dd69f7488da01b09b11714a86afbaa43ddddfa1b053eb7fe1753ee2d2aa326900ff","href":"https://static.observableusercontent.com/files/687c212318452511ea0fc3a5c9530ebd11387de489b490f88e7da53b9fb07dd69f7488da01b09b11714a86afbaa43ddddfa1b053eb7fe1753ee2d2aa326900ff","name":"PersonRelations@3.json","type":"application/json","lastModified":1629406431488.03,"size":188701}] 30:{"title":"Submissions to Richard II, 1395 [Person relations, link highlight, color coded links, HTML popup, labels on links, link type filter]","cells":[{"id":1,"value":"md`# Submissions to Richard II, 1395 [Person relations, link highlight, color coded links, HTML popup, labels on links, link type filter]\n\nNetwork graph of parties to the submissions with tooltips linking to records, link spotlight on hover, color coded links by type, labels (by type) on links, and select filter for links by relationship type\n\n### Navigating the graph\n\nHover over a node to show only the nodes to which it is directly linked.\n\nClick on an individual node to bring up a link to their full record. To close the popup, click on any node.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"filteredlinks = data.links\n .filter(d => d.type === reltype)","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"viewof reltype = Inputs.select(type, {label: \"Relationship Type\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"PersonRelations@12.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"type = Array.from(new Set(data.links.map(d => d.type)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"types = Array.from(new Set(data.links.map(d => d.type)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"people = Array.from(new Set(data.nodes.map(d => d.id)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 680","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeAccent);\n return d => scale(d.type);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"colors = d3.scaleOrdinal(types, d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"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":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}