Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Knowledge Graph</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .node { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .node:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .link { | |
| stroke: #94a3b8; | |
| stroke-width: 2px; | |
| } | |
| .graph-container { | |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); | |
| border-radius: 1rem; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| padding: 0.5rem 1rem; | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| z-index: 10; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Interactive Knowledge Graph</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Visualize complex relationships between concepts in an interactive network diagram. | |
| </p> | |
| <div class="mt-6 flex justify-center space-x-4"> | |
| <button id="physicsBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-atom mr-2"></i>Toggle Physics | |
| </button> | |
| <button id="addNodeBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-plus mr-2"></i>Add Node | |
| </button> | |
| <button id="resetBtn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-redo mr-2"></i>Reset Graph | |
| </button> | |
| </div> | |
| </div> | |
| <div class="graph-container relative p-6 shadow-xl"> | |
| <div id="graph" class="w-full h-[600px]"></div> | |
| <div id="tooltip" class="tooltip"></div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-info-circle text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">What is a Knowledge Graph?</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| A knowledge graph is a network of interconnected entities and their relationships. | |
| It represents information in a way that's closer to how humans think about concepts. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-project-diagram text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Graph Features</h3> | |
| </div> | |
| <ul class="text-gray-600 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Interactive nodes and connections</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Physics-based simulation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Dynamic tooltips</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-lightbulb text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Try It Out</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Click on nodes to see details. Drag nodes to rearrange the graph. Use the buttons above to control the visualization. | |
| </p> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Interactive</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Dynamic</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Responsive</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sample knowledge graph data | |
| const graphData = { | |
| nodes: [ | |
| { id: 1, name: "Artificial Intelligence", type: "concept", description: "The simulation of human intelligence processes by machines.", color: "#3B82F6" }, | |
| { id: 2, name: "Machine Learning", type: "subfield", description: "A subset of AI that enables systems to learn from data.", color: "#10B981" }, | |
| { id: 3, name: "Neural Networks", type: "technique", description: "Computational models inspired by biological neural networks.", color: "#8B5CF6" }, | |
| { id: 4, name: "Deep Learning", type: "method", description: "ML technique using multi-layered neural networks.", color: "#EC4899" }, | |
| { id: 5, name: "Natural Language Processing", type: "application", description: "AI field focused on interactions between computers and human language.", color: "#F59E0B" }, | |
| { id: 6, name: "Computer Vision", type: "application", description: "Field of AI that enables computers to interpret visual data.", color: "#6366F1" }, | |
| { id: 7, name: "Reinforcement Learning", type: "method", description: "ML method where agents learn by taking actions in an environment.", color: "#EF4444" } | |
| ], | |
| links: [ | |
| { source: 1, target: 2, relation: "includes" }, | |
| { source: 2, target: 3, relation: "uses" }, | |
| { source: 3, target: 4, relation: "basis of" }, | |
| { source: 2, target: 5, relation: "applies to" }, | |
| { source: 2, target: 6, relation: "applies to" }, | |
| { source: 2, target: 7, relation: "includes" }, | |
| { source: 4, target: 5, relation: "enhances" }, | |
| { source: 4, target: 6, relation: "enhances" } | |
| ] | |
| }; | |
| // Set up the SVG container | |
| const width = document.getElementById('graph').clientWidth; | |
| const height = document.getElementById('graph').clientHeight; | |
| const svg = d3.select("#graph") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("viewBox", [0, 0, width, height]) | |
| .attr("style", "max-width: 100%; height: auto;"); | |
| // Set up the simulation | |
| const simulation = d3.forceSimulation(graphData.nodes) | |
| .force("link", d3.forceLink(graphData.links).id(d => d.id).distance(150)) | |
| .force("charge", d3.forceManyBody().strength(-500)) | |
| .force("center", d3.forceCenter(width / 2, height / 2)) | |
| .force("collision", d3.forceCollide().radius(60)); | |
| // Create the links | |
| const link = svg.append("g") | |
| .selectAll("line") | |
| .data(graphData.links) | |
| .join("line") | |
| .attr("class", "link") | |
| .attr("stroke-width", 2); | |
| // Add link labels | |
| const linkText = svg.append("g") | |
| .selectAll("text") | |
| .data(graphData.links) | |
| .join("text") | |
| .attr("font-size", 12) | |
| .attr("fill", "#64748b") | |
| .text(d => d.relation); | |
| // Create the nodes | |
| const node = svg.append("g") | |
| .selectAll("g") | |
| .data(graphData.nodes) | |
| .join("g") | |
| .attr("class", "node") | |
| .call(drag(simulation)); | |
| // Add circles to the nodes | |
| node.append("circle") | |
| .attr("r", 25) | |
| .attr("fill", d => d.color) | |
| .attr("stroke", "#fff") | |
| .attr("stroke-width", 2); | |
| // Add icons to the nodes based on type | |
| node.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", ".35em") | |
| .attr("fill", "white") | |
| .attr("font-size", "12px") | |
| .html(d => { | |
| switch(d.type) { | |
| case "concept": return "🧠"; | |
| case "subfield": return "🔍"; | |
| case "technique": return "⚙️"; | |
| case "method": return "📊"; | |
| case "application": return "💻"; | |
| default: return "🔘"; | |
| } | |
| }); | |
| // Add node labels | |
| const labels = node.append("text") | |
| .attr("dy", 50) | |
| .attr("text-anchor", "middle") | |
| .attr("fill", "#1e293b") | |
| .attr("font-weight", "600") | |
| .text(d => d.name) | |
| .clone(true).lower() | |
| .attr("stroke", "white") | |
| .attr("stroke-width", 3); | |
| // Tooltip setup | |
| const tooltip = d3.select("#tooltip"); | |
| node.on("mouseover", function(event, d) { | |
| d3.select(this).select("circle").attr("r", 30); | |
| tooltip.transition() | |
| .duration(200) | |
| .style("opacity", 1); | |
| tooltip.html(` | |
| <h3 class="font-bold text-lg mb-1" style="color: ${d.color}">${d.name}</h3> | |
| <p class="text-sm text-gray-600 mb-1">Type: ${d.type}</p> | |
| <p class="text-sm text-gray-700">${d.description}</p> | |
| `) | |
| .style("left", (event.pageX + 10) + "px") | |
| .style("top", (event.pageY + 10) + "px"); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select(this).select("circle").attr("r", 25); | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // Update positions on each tick | |
| 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); | |
| linkText | |
| .attr("x", d => (d.source.x + d.target.x) / 2) | |
| .attr("y", d => (d.source.y + d.target.y) / 2); | |
| node | |
| .attr("transform", d => `translate(${d.x},${d.y})`); | |
| }); | |
| // Drag behavior | |
| function drag(simulation) { | |
| function dragstarted(event, d) { | |
| if (!event.active) simulation.alphaTarget(0.3).restart(); | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragged(event, d) { | |
| d.fx = event.x; | |
| d.fy = event.y; | |
| } | |
| function dragended(event, d) { | |
| if (!event.active) simulation.alphaTarget(0); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| return d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended); | |
| } | |
| // Button interactions | |
| let physicsEnabled = true; | |
| document.getElementById('physicsBtn').addEventListener('click', function() { | |
| physicsEnabled = !physicsEnabled; | |
| if (physicsEnabled) { | |
| simulation.alphaTarget(0.3).restart(); | |
| this.innerHTML = '<i class="fas fa-atom mr-2"></i>Toggle Physics'; | |
| this.classList.remove('bg-gray-600'); | |
| this.classList.add('bg-blue-600'); | |
| } else { | |
| simulation.alphaTarget(0); | |
| this.innerHTML = '<i class="fas fa-pause mr-2"></i>Toggle Physics'; | |
| this.classList.remove('bg-blue-600'); | |
| this.classList.add('bg-gray-600'); | |
| } | |
| }); | |
| document.getElementById('resetBtn').addEventListener('click', function() { | |
| // Reset node positions | |
| graphData.nodes.forEach(node => { | |
| node.fx = null; | |
| node.fy = null; | |
| node.x = Math.random() * width; | |
| node.y = Math.random() * height; | |
| }); | |
| if (physicsEnabled) { | |
| simulation.alpha(1).restart(); | |
| } | |
| // Add pulse animation to all nodes temporarily | |
| node.select("circle").classList.add("pulse"); | |
| setTimeout(() => { | |
| node.select("circle").classList.remove("pulse"); | |
| }, 2000); | |
| }); | |
| document.getElementById('addNodeBtn').addEventListener('click', function() { | |
| const newNodeId = graphData.nodes.length + 1; | |
| const colors = ["#3B82F6", "#10B981", "#8B5CF6", "#EC4899", "#F59E0B", "#6366F1", "#EF4444"]; | |
| const types = ["concept", "subfield", "technique", "method", "application"]; | |
| const newNode = { | |
| id: newNodeId, | |
| name: `New Node ${newNodeId}`, | |
| type: types[Math.floor(Math.random() * types.length)], | |
| description: "This is a newly added node to the knowledge graph.", | |
| color: colors[Math.floor(Math.random() * colors.length)] | |
| }; | |
| // Add the new node | |
| graphData.nodes.push(newNode); | |
| // Add a random link to an existing node | |
| if (graphData.nodes.length > 1) { | |
| const randomExistingNode = graphData.nodes[Math.floor(Math.random() * (graphData.nodes.length - 1))]; | |
| const relations = ["related to", "connected with", "part of", "similar to", "derived from"]; | |
| graphData.links.push({ | |
| source: newNodeId, | |
| target: randomExistingNode.id, | |
| relation: relations[Math.floor(Math.random() * relations.length)] | |
| }); | |
| } | |
| // Update the simulation with new data | |
| updateGraph(); | |
| // Highlight the new node | |
| const newNodeElement = node.filter(d => d.id === newNodeId); | |
| newNodeElement.select("circle").classList.add("pulse"); | |
| setTimeout(() => { | |
| newNodeElement.select("circle").classList.remove("pulse"); | |
| }, 3000); | |
| }); | |
| function updateGraph() { | |
| // Update the simulation | |
| simulation.nodes(graphData.nodes); | |
| simulation.force("link").links(graphData.links); | |
| if (physicsEnabled) { | |
| simulation.alpha(1).restart(); | |
| } | |
| // Update the links | |
| link.data(graphData.links).join("line").attr("class", "link"); | |
| linkText.data(graphData.links).join("text").text(d => d.relation); | |
| // Update the nodes | |
| const newNode = node.data(graphData.nodes).join("g") | |
| .attr("class", "node") | |
| .call(drag(simulation)); | |
| newNode.select("circle").attr("fill", d => d.color); | |
| newNode.select("text").text(d => d.name); | |
| // Add icons to new nodes | |
| newNode.filter((d, i) => i >= graphData.nodes.length - 1) | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", ".35em") | |
| .attr("fill", "white") | |
| .attr("font-size", "12px") | |
| .html(d => { | |
| switch(d.type) { | |
| case "concept": return "🧠"; | |
| case "subfield": return "🔍"; | |
| case "technique": return "⚙️"; | |
| case "method": return "📊"; | |
| case "application": return "💻"; | |
| default: return "🔘"; | |
| } | |
| }); | |
| // Add tooltip to new nodes | |
| newNode.on("mouseover", function(event, d) { | |
| d3.select(this).select("circle").attr("r", 30); | |
| tooltip.transition() | |
| .duration(200) | |
| .style("opacity", 1); | |
| tooltip.html(` | |
| <h3 class="font-bold text-lg mb-1" style="color: ${d.color}">${d.name}</h3> | |
| <p class="text-sm text-gray-600 mb-1">Type: ${d.type}</p> | |
| <p class="text-sm text-gray-700">${d.description}</p> | |
| `) | |
| .style("left", (event.pageX + 10) + "px") | |
| .style("top", (event.pageY + 10) + "px"); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select(this).select("circle").attr("r", 25); | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Arg1990/knowledge-graph-s1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |