2c:null 2d:["$","title",null,{"children":"Ontology Explorer | Bruce Crock | Observable"}] 32:T65f,sampleOntology = ( { "nodes": [ { "id": 1, "name": "Fruit()", "type": "Group", "group": "Core", "description": "A group of various fruits." }, { "id": 2, "name": "Apple", "type": "Item", "group": "Fruit", "description": "A type of fruit that is red or green in color." }, { "id": 3, "name": "Color", "type": "Attribute", "group": "Core", "description": "Possible colors of items." }, { "id": 4, "name": "Red", "type": "Value", "group": "Color", "description": "The color red." }, { "id": 5, "name": "Green", "type": "Value", "group": "Color", "description": "The color green." }, { "id": 6, "name": "Banana", "type": "Item", "group": "Fruit", "description": "A type of fruit that is yellow in color." }, { "id": 7, "name": "Yellow", "type": "Value", "group": "Color", "description": "The color yellow." } ], "edges": [ { "source": 1, "target": 2, "edgeName": "contains" }, { "source": 1, "target": 6, "edgeName": "contains" }, { "source": 2, "target": 3, "edgeName": "has" }, { "source": 3, "target": 4, "edgeName": "is" }, { "source": 3, "target": 5, "edgeName": "is" }, { "source": 6, "target": 3, "edgeName": "has" }, { "source": 3, "target": 7, "edgeName": "is" } ] } )33:T1460,DeckOfCardsOntology = ( { nodes: [ // Deck group { id: 1, type: "Group", name: "Deck()", description: "A collection of 52 cards used for playing games.", group: "Core" }, { id: 2, type: "Group", name: "Cards()", description: "The individual cards in the deck.", group: "Deck" }, // Attributes and values { id: 3, type: "Attribute", name: "Color", description: "The color of the card.", group: "Attributes" }, { id: 4, type: "Value", name: "Red", description: "Cards with red color (Hearts, Diamonds).", group: "Values" }, { id: 5, type: "Value", name: "Black", description: "Cards with black color (Clubs, Spades).", group: "Values" }, { id: 6, type: "Attribute", name: "Suit", description: "The suit of the card.", group: "Attributes" }, { id: 7, type: "Value", name: "Hearts", description: "Cards in the Hearts suit.", group: "Values" }, { id: 8, type: "Value", name: "Diamonds", description: "Cards in the Diamonds suit.", group: "Values" }, { id: 9, type: "Value", name: "Clubs", description: "Cards in the Clubs suit.", group: "Values" }, { id: 10, type: "Value", name: "Spades", description: "Cards in the Spades suit.", group: "Values" }, { id: 11, type: "Attribute", name: "Rank", description: "The rank of the card.", group: "Attributes" }, ...(() => { const ranks = [ "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King" ]; return ranks.map((rank, index) => ({ id: 12 + index, type: "Value", name: rank, description: `Cards with rank ${rank}.`, group: "Values" })); })(), // Number of Cards as its own node { id: 25, type: "Attribute", name: "numberOfCards:52", description: "The total number of cards in the deck.", group: "Attributes" }, // Individual cards ...(() => { const suits = ["Hearts", "Diamonds", "Clubs", "Spades"]; const ranks = [ "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King" ]; const cards = []; let cardId = 26; // Start ID for cards for (const suit of suits) { for (const rank of ranks) { cards.push({ id: cardId++, type: "Item", name: `${rank} of ${suit}`, description: `A card with rank ${rank} and suit ${suit}.`, group: "Cards" }); } } return cards; })() ], edges: [ // Deck -> Cards group { source: 1, target: 2, edgeName: "Includes", description: "The deck includes all cards." }, // Deck -> Number of Cards { source: 1, target: 25, edgeName: "Has Attribute", description: "The deck has a total number of cards." }, // Cards group -> Individual cards ...(() => { const edges = []; const suits = ["Hearts", "Diamonds", "Clubs", "Spades"]; const ranks = [ "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King" ]; const colors = { Hearts: 4, Diamonds: 4, Clubs: 5, Spades: 5 }; // Red:4, Black:5 const suitIds = { Hearts: 7, Diamonds: 8, Clubs: 9, Spades: 10 }; let cardId = 26; // Start ID for cards suits.forEach((suit) => { ranks.forEach((rank, rankIndex) => { const currentCardId = cardId++; const colorId = colors[suit]; const suitId = suitIds[suit]; const rankId = 12 + rankIndex; edges.push( { source: 2, target: currentCardId, edgeName: "Contains", description: "The cards group contains individual cards." }, { source: currentCardId, target: colorId, edgeName: "Has Value", description: `Card color is ${suit === "Hearts" || suit === "Diamonds" ? "Red" : "Black"}.` }, { source: currentCardId, target: suitId, edgeName: "Has Value", description: `Card suit is ${suit}.` }, { source: currentCardId, target: rankId, edgeName: "Has Value", description: `Card rank is ${rank}.` } ); }); }); return edges; })(), // Connect Color node to its values { source: 3, target: 4, edgeName: "Has Value", description: "Possible color is Red." }, { source: 3, target: 5, edgeName: "Has Value", description: "Possible color is Black." }, // Connect Suit node to its values { source: 6, target: 7, edgeName: "Has Value", description: "Possible suit is Hearts." }, { source: 6, target: 8, edgeName: "Has Value", description: "Possible suit is Diamonds." }, { source: 6, target: 9, edgeName: "Has Value", description: "Possible suit is Clubs." }, { source: 6, target: 10, edgeName: "Has Value", description: "Possible suit is Spades." }, // Connect Rank node to its values ...(() => { const ranks = [ "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King" ]; return ranks.map((rank, index) => ({ source: 11, target: 12 + index, edgeName: "Has Value", description: `Possible rank is ${rank}.` })); })() ] } )34:T898,function validateOntology(ontology) { const improvements = []; // Check for required keys in the ontology object if (!ontology.nodes) { improvements.push("The ontology object must include a 'nodes' array."); } if (!ontology.edges) { improvements.push("The ontology object must include an 'edges' array."); } // Validate nodes if (ontology.nodes) { ontology.nodes.forEach((node, index) => { if (!node.id) { improvements.push(`Node at index ${index} is missing the 'id' field.`); } if (!node.type) { improvements.push(`Node at index ${index} is missing the 'type' field.`); } if (!node.name) { improvements.push(`Node at index ${index} is missing the 'name' field.`); } if (!node.description) { improvements.push(`Node at index ${index} is missing the 'description' field.`); } if (!node.group) { improvements.push(`Node at index ${index} is missing the 'group' field.`); } }); } // Validate edges if (ontology.edges) { ontology.edges.forEach((edge, index) => { if (!edge.source) { improvements.push(`Edge at index ${index} is missing the 'source' field.`); } if (!edge.target) { improvements.push(`Edge at index ${index} is missing the 'target' field.`); } if (!edge.edgeName) { improvements.push(`Edge at index ${index} is missing the 'edgeName' field.`); } }); } // Validate node relationships const nodeIds = ontology.nodes ? ontology.nodes.map(node => node.id) : []; if (ontology.edges) { ontology.edges.forEach((edge, index) => { if (!nodeIds.includes(edge.source)) { improvements.push(`Edge at index ${index} has a 'source' that does not match any node ID.`); } if (!nodeIds.includes(edge.target)) { improvements.push(`Edge at index ${index} has a 'target' that does not match any node ID.`); } }); } // Return results if (improvements.length === 0) { return "This Ontology conforms to specifications."; } else { return `The following list of improvements should be made:\n- ${improvements.join("\n- ")}`; } } 35:T39fb,forceGraph_Bruce = { return (data, { groups = distinct(data.nodes.map(({ group }) => group)), linkTypes = distinct(data.links.map(({ type }) => type)), height = 680, scale = d3.scaleOrdinal(groups, d3.schemeCategory10), color = d => scale(d.group), linkTypesToLabel = [], nodeGroupsToLabel = [], nodeRadius = (d) => 5, linkDistance = (d) => 40, chargeStrength = (d) => -120, fontStyle = "12px sans-serif", } = {}) => { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance)) .force("charge", d3.forceManyBody().strength(chargeStrength)) .force("collision", d3.forceCollide().radius(nodeRadius)) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .style("font", fontStyle) .attr("viewBox", [-width / 2, -height / 2, width, height]); // Link arrows svg.append("defs").selectAll("marker") .data(["arrow"]) .enter() .append("marker") .attr("id", d => d) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -0.5) .attr("markerWidth", 3) .attr("markerHeight", 3) .attr("orient", "auto") .append("path") .attr("fill", "#999") .attr("d", "M0,-5L10,0L0,5"); // root svg element, which makes global scaling/ transformations easier const root = svg.append("g"); const link = root.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value) * 2) .attr("marker-end", d => `url(#arrow)`); // for link hovering link.append("title").text(d => d.type); const linkLabels = root.append("g") .selectAll(".link-label") .data(links) .join("text") .attr("class", "link-label") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") // Center the text on the edge .attr("visibility", "hidden") // Initially hidden .attr("fill", "gray") // Set text color to gray .style("font-size", "10px") // Set font size to 10px // .text(d => d.type); // Set the edge type as the text .text(d => d.edgeName); // Set the edge type as the text const node = root.append("g") //.attr("id", d => `node-${d.id}`) // Assign unique IDs to nodes .attr("stroke-width", 1.5) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .attr("class", d => nodeGroupsToLabel.includes(d.group) ? "node show-label" : "node") .call(stickyDrag(simulation)); // Node circles const nodeCircle = node.append("circle") .attr("nodeCircleid", d => `nodeCircle-${d.id}`) // Assign unique IDs to circles .attr("id", d => `node-${d.id}`) // Assign unique IDs to circles .attr("r", nodeRadius) .attr("stroke", "#fff") .attr("fill", color) .on("dblclick", function(d) { // unfix the node d3.select(this.parentNode).classed("fixed", false); d.fx = null; d.fy = null; }) .on("click", function(d, i, arr) { if (d3.event.defaultPrevented) return; // dragged or double-clicked console.log("manual click"); // Get the current cycle state of the node const nodeSelection = d3.select(this.parentNode); let currentState = nodeSelection.attr("data-cycle-state") || "0"; // Increment the state (cycle: 0 → 1 → 2 → back to 0) currentState = (parseInt(currentState) + 1) % 3; nodeSelection.attr("data-cycle-state", currentState); // Update the state const textElements = nodeSelection.selectAll("text"); // Select both label and border // Get the node's data const nodeData = nodeSelection.datum(); console.log("svg:",svg); console.log("NodeData:", nodeSelection.datum()); console.log("NodeData.index:", nodeSelection.datum().index); console.log("Node Name:", nodeData.name); // Log the name of the node console.log("Node?:", nodes[nodeSelection.datum().index]); console.log("Node Selection:", nodeSelection); console.log("Node Label Selection:", nodeSelection.select("text")); console.log("parentNode",nodeSelection.select("text").parentNode); console.log("nodeSelection.select('text').node()",nodeSelection.select("text").node()); console.log("nodeSelection.select('text').node().parentNode",nodeSelection.select("text").node().parentNode); console.log("Node Label Selection Exists:", !nodeSelection.select("text").empty()); console.log("currentState:",currentState); const isHidden = nodeSelection.select("text").attr("visibility") === "hidden"; console.log("isHidden:",isHidden); // const thisNode = d3.select(nodeData.name); // Select the node // console.log("thisNode:", thisNode); const thisNodeCircle = d3.select(`#node-${nodeSelection.datum().id}`).node(); // Select the circle element console.log("thisNodeCircle:", thisNodeCircle); const textElement = nodeSelection.select("text"); console.log("Node Label Selection:", textElement); console.log("Parent Element of Node Label Selection:", textElement.parentNode); console.log("Nodel Label Selection . node", textElement.node()); // Check if text element exists if (!textElement.empty()) { // Toggle visibility explicitly const isCurrentlyHidden = textElement.attr("visibility") === "hidden"; textElement.attr("visibility", isCurrentlyHidden ? "visible" : "hidden"); // Log the updated text element for verification console.log("Updated Text Element:", textElement.node()); } else { console.error("No text element found for the node."); } if (thisNodeCircle) { const parentG = d3.select(thisNodeCircle.parentNode); // Get the parent element console.log("parentG:", parentG); highlightNode(nodeData); toggleNodeClass(parentG,"show-label"); // Apply the behavior based on the state switch (currentState) { case 0: // No text //setVisibility(parentG, false); // Hide node label //toggleClass(nodeSelection.select("text"), className) //nodeSelection.select("text").attr("visibility", isHidden ? "visible" : "hidden"); // Toggle visibility //console.log("Toggled node visibility to:", isHidden ? "visible" : "hidden"); setVisibility(linkLabels.filter(d => d.source.id === nodeData.id || d.target.id === nodeData.id), false); // Hide edge labels break; case 1: // Show text //setVisibility(parentG, true); // Show node label nodeSelection.select("text").attr("visibility", isHidden ? "visible" : "hidden"); // Toggle visibility console.log("Toggled node visibility to:", isHidden ? "visible" : "hidden"); setVisibility(linkLabels.filter(d => d.source.id === nodeData.id || d.target.id === nodeData.id), false); // Keep edge labels hidden break; case 2: // Show text and child edge labels //setVisibility(parentG, true); // Show node label nodeSelection.select("text").attr("visibility", isHidden ? "visible" : "hidden"); // Toggle visibility console.log("Toggled node visibility to:", isHidden ? "visible" : "hidden"); setVisibility(linkLabels.filter(d => d.source.id === nodeData.id || d.target.id === nodeData.id), true); // Show edge labels break; } } }); // add text for hover nodeCircle.append("title") .text(({ group, name }) => `${group}: ${name}`); // optional text labels with white border node.append("text") .attr("x", d => -(d.name.length * 2)) .attr("y", "-0.5em") .attr("fill", "black") .text(({ name }) => name) .clone(true) .lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); function toggleNodeClass(n, className) { // Toggle class for the clicked node toggleClass(n, className); console.log("Toggled class for node:", n.datum().name); } function setVisibility(selection, isVisible) { if (!selection.empty()) { console.log("Setting visibility to:", isVisible ? "visible" : "hidden", "for", selection); selection.attr("visibility", isVisible ? "visible" : "hidden"); } else { console.warn("Selection is empty, cannot set visibility."); } } function toggleEdgeLabels(nodeSelection, showChildEdges) { const nodeData = nodeSelection.datum(); // Toggle edge labels connected to the node linkLabels .filter(d => d.source.id === nodeData.id || d.target.id === nodeData.id) .attr("visibility", showChildEdges ? "visible" : "hidden"); // If showing child edges, handle their edge labels too if (showChildEdges) { const childEdges = links.filter(link => link.source.id === nodeData.id); childEdges.forEach(link => { d3.select(`text[edge-label-id="${link.source.id}-${link.target.id}"]`) .attr("visibility", "visible"); }); } } function toggleNodeAndEdgeLabels(nodeSelection, className) { // Toggle the node label toggleClass(nodeSelection, className); // Get the node data const nodeData = nodeSelection.datum(); //console.log("nodeSelection.datum():", nodeSelection.datum()); // Debugging // Toggle visibility of edges and edge labels connected to the node linkLabels .filter(d => d.source.id === nodeData.id || d.target.id === nodeData.id) .attr("transform", d => { const x = (d.source.x + d.target.x) / 2; // Midpoint X const y = (d.source.y + d.target.y) / 2; // Midpoint Y const angle = Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * (180 / Math.PI); // Angle in degrees const adjustedAngle = angle > 90 || angle < -90 ? angle + 180 : angle; // Keep text upright return `translate(${x},${y}) rotate(${adjustedAngle})`; }) .attr("visibility", function() { return d3.select(this).attr("visibility") === "hidden" ? "visible" : "hidden"; }); } // Helper function to highlight and display info function highlightNode(n) { if (!n) return; const infoDiv = document.querySelector("#info"); infoDiv.innerHTML = `

Name: ${n.name}

Type: ${n.type}

Group: ${n.group}

Description: ${n.description}

`; // d3.select(`#node-${n.id}`) // .attr("stroke", "red") // .attr("stroke-width", 3); console.log("HighlightNode:", n.name); // Debugging } const topNode = data.nodes.find(node => { const hasIncomingEdges = data.links.some(link => link.target === node.id); console.log(`Node: ${node.name}, ID: ${node.id}, Has Incoming Edges: ${hasIncomingEdges}`); return !hasIncomingEdges; // Return true if the node has no incoming edges }); let topNodeInitialized = false; // Track if the logic has already run 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); linkLabels //.attr("x", d => ((d.source.x + d.target.x) / 2)) //.attr("y", d => ((d.source.y + d.target.y) / 2)); .attr("transform", d => { const x = (d.source.x + d.target.x) / 2; // Midpoint X const y = (d.source.y + d.target.y) / 2; // Midpoint Y const angle = Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * (180 / Math.PI); // Angle in degrees return `translate(${x},${y}) rotate(${angle})`; // Apply translation and rotation }); node.attr("transform", d => `translate(${d.x},${d.y})`); if (!topNodeInitialized) { console.log("Running topNode initialization..."); console.log("Top Node:", topNode); if (topNode) { highlightNode(topNode); console.log("searching for cicle with id: ",`#node-${topNode.id}`); const topNodeElement = d3.select(`#node-${topNode.id}`).node(); // Select the circle element console.log("Top Node Element:", topNodeElement); if (topNodeElement) { const parentG = d3.select(topNodeElement.parentNode); // Get the parent element console.log("parentG:", parentG); toggleNodeClass(parentG,"show-label"); } } topNodeInitialized = true; // Ensure this runs only once } }); invalidation.then(() => simulation.stop()); const zoom = d3.zoom(); zoom.on("zoom", () => { // console.log("zoom:",zoom); console.log("root:",root); const { transform } = d3.event; root.attr("transform", transform); }); // const zoom = d3.zoom() //.on("zoom", event => { // root.attr("transform", event.transform); // Apply zoom and pan to the root group //}); svg.call(zoom) .call(zoom.transform, d3.zoomIdentity) .on("dblclick.zoom", null); // used for resetting nodes const reset = () => { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } function toggleClass(selection, className) { selection.classed(className, !selection.classed(className)); } return Object.assign(svg.node(), { reset, scale: scale, color: color, }); } } 36:[] 30:{"id":"f28e675348be3487","slug":"ontology-explorer","title":"Ontology Explorer","thumbnail":"17efd396c87c21cdd226f3ac433c5dbc62344aa24e54d0730f357ec0ee143353","access_level":"public","create_time":"$D2023-02-12T05:49:51.871Z","update_time":"$D2024-12-11T21:22:04.822Z","view_time":null,"first_public_time":"$D2023-02-12T05:49:51.871Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","bio":""},"version":96,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"bio":""}],"members":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ontology Explorer","cells":[{"id":0,"value":"# Ontology Explorer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"viewof graph = {\nconst renderedGraph = forceGraph_Bruce({\n // nodesFromOntology,\n // linksFromOntology, \n nodes,\n links,\n nodeId: d => d.id,\n nodeTitle: d => d.id,\n width: 800,\n height: 600\n });\n\n setTimeout(() => {\n console.log(\"Rendered Graph:\", renderedGraph);\n }, 1000);\n\n return renderedGraph;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof selectedInfo = html`

Click on a node or link to see details.

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"init = {\n console.log(\"ontology\",ontology);\n return true;\n };\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"## DATA FOR VISUALIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"ontology = sampleOntology; // ontology = DeckOfCardsOntology; // ontology = sampleOntology;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"isOntologyValid = validateOntology(ontology)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"nodes = ontology.nodes;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"links = ontology.edges;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## CODE REPURPOSE \n#### @austince/ontology-visualizations-core\nCredits due to this author for most of this code... ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"showAllLabels = {\n if (false) {\n d3.selectAll(\"text\")\n .attr(\"visibility\", \"visible\")\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", \"12px\")\n .attr(\"stroke\", \"none\");\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"distinct = (items) => [...new Set(items)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"stickyDrag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) {\n simulation.alphaTarget(0.3).restart();\n }\n d3.select(this).classed(\"fixed\", true);\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) {\n simulation.alphaTarget(0);\n }\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## STYLES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"forceGraphStyles = css('Force Graph Styles')`\n\nsvg {\n cursor: grab;\n}\n\n.node {\n cursor: pointer;\n}\n\n.node > text {\n visibility: hidden;\n}\n\n.node.show-label > text {\n visibility: visible;\n}\n\n.node.fixed > circle {\n stroke: black;\n}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## IMPORTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {css, collapsedCSS} from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"